Skip to main content

LCP by screen orientation

LCP by screen orientation without noise

Vasil Dachev avatar
Written by Vasil Dachev
Updated over 3 weeks ago

What is LCP by screen orientation

LCP by screen orientation shows the Largest Contentful Paint (LCP) segmented by the screen's orientation at the time of the visit — portrait, landscape, or square. This lens helps uncover how different visual layouts impact LCP.

Only orientations that generated real traffic during the selected period are shown.

Why it matters: The largest element, which LCP tracks, often shifts depending on orientation. A layout that performs well in portrait might struggle in landscape due to wider viewports, more visible content, or repositioned elements. Similarly, edge cases like square viewports can trigger unexpected layout behavior.

LCP is the most popular vital from the Core Web Vitals and represents the loading time of the largest element on the page.



Healthy LCP by screen orientation sample


Should you worry

In a healthy view, all three orientations - portrait, landscape, and square - are green.

You may notice slight performance variation, especially between portrait and landscape on mobile or tablet. That’s normal. But if one orientation consistently underperforms, it might hint at responsive design issues, slow media loading, or layout shifts.

Square traffic is typically minimal and often comes from niche devices (e.g. foldables, small embedded browsers, or unusual window resizing). If it’s slow but low volume, it’s usually not critical - but worth a look if bounce rates are high.

Unhealthy LCP by screen orientation sample

Slower landscape LCP might indicate:

  • Wider layouts causing the largest content to appear later.

  • Video or carousel elements becoming prominent in horizontal view.

  • Increased render work due to more DOM being visible at once.

Slower portrait might result from:

  • Hidden or collapsed elements loading inefficiently.

  • Overly long vertical layouts pushing critical content too far down.

Slower square is often caused by:

  • Layouts that don’t anticipate square viewports, leading to awkward stacking or off-screen rendering.

  • Conflicts in CSS breakpoints or media queries.

Resolving unhealthy LCP by screen orientation

Go-to action plan to resolve an unhealthy LCP by screen orientation:

  1. Ask Uxi to analyze your LCP by screen orientation values and suggest improvements.

  2. Use Filters to isolate affected orientations and dig into which content shifts between views.

  3. Simulate LCP of the suspected lens to see if fixing it will resolve the slow LCP by screen orientation. If yes, this is where the resolution focus should be.

  4. Use an automated LCP optimization tool like Navigation AI to improve your LCP by screen orientation values.

  5. Once you’ve improved LCP, set an alert to be the first to know if it starts worsening again.

Try it yourself

Discover how your website performs with real user data.

Did this answer your question?