Skip to main content

INP by screen orientation

INP by screen orientation without noise

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


What is INP by screen orientation

INP by screen orientation shows the Interaction to Next Paint (INP) based on the screen’s orientation during the session — portrait, landscape, or square. This lens helps identify interaction issues tied to how your layout responds to different viewports and device positions.

Only orientations that actually saw traffic during the selected timeframe are shown. Both mobile and desktop devices are included.

Why it matters: Touch targets, layout density, event handlers, and even animation timing can vary significantly between orientations. For example, a button that's easy to tap in portrait may shift positions or get crowded in landscape, leading to longer input delays.



Healthy INP by screen orientation sample


Should you worry

In a healthy state, INP values remain green across portrait, landscape, and square. Small variations are normal — especially on mobile where screen real estate and touch ergonomics differ — but none of them should dip into yellow or red.

Unhealthy INP by screen orientation sample

If landscape INP is worse, it might be due to:

  • Buttons shifting closer together, leading to mis-taps or delayed feedback.

  • Slower animations or JavaScript-heavy elements becoming more prominent.

  • Larger visible areas causing more simultaneous interactions or heavier rendering.

If portrait INP is degraded:

  • Vertical scrolling or long content might delay interaction readiness.

  • Sticky headers or menus could be blocking or delaying taps.

  • Offscreen interactions (like bottom modals) may be poorly optimized.

If square INP is poor (e.g. on foldables, embedded apps, or odd aspect ratios):

  • Layouts might be improperly collapsed, leading to janky transitions or input overlap.

  • Input handlers could be placed in unexpected DOM states.

Resolving unhealthy INP by screen orientation

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

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

  2. Filter for poor-performing orientations and inspect their top pages and components.

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

  4. Use an automated INP optimization tool like INProve to improve your INP by screen orientation values.

  5. Once you’ve improved INP, 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?