Skip to main content

LCP by device pixel ratio

LCP by device pixel ratio without noise

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

What is LCP by device pixel ratio

LCP by device pixel ratio shows the Largest Contentful Paint (LCP) based on the screen’s device pixel ratio (DPR) - values like 1x, 2x, 3x, and in-between (e.g. 1.25x or 1.5x).

Device pixel ratio reflects how many physical pixels exist per one CSS pixel. Higher ratios usually indicate higher-density displays - like Retina screens or flagship mobile phones.

This lens is helpful because it can highlight whether high-density or low-density screens are causing longer LCPs, often tied to image loading, scaling, or hardware limitations.

Only DPR values seen during the selected time period will appear in the list.



Healthy LCP by device pixel ratio sample


Should you worry

In a healthy setup, most DPR groups - especially common ones like 1x, 2x, and 3x - should show green LCP bars. That means your images, styles, and layout scale well across devices with different screen densities.

Unhealthy LCP by device pixel ratio sample

Slower LCP for certain DPRs usually points to image or layout issues. Examples include:

  • High DPR devices (e.g. 3x) being served low-res images that get upscaled, leading to repaints.

  • Low DPR devices (like older desktops) choking on unnecessarily high-res images.

  • Responsive layouts triggering expensive scaling or font adjustments.

  • Lazy-loading or media queries failing to account for pixel ratio properly.

Sometimes, it’s not just the DPR - it’s that those DPRs are tied to specific device classes (e.g. older laptops at 1x, newer phones at 3x), and the performance gap is really about hardware or resolution.

Resolving unhealthy LCP by device pixel ratio

Go-to action plan to resolve an unhealthy LCP by device pixel ratio:

  1. Ask Uxi to analyze your LCP by device pixel ratioe values and suggest improvements.

  2. Use Filters to drill into those groups and see if image-heavy pages or layout shifts are involved.

  3. Simulate LCP of the suspected lens to see if fixing it will resolve the slow LCP by device pixel ratio. 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 device pixel ratio 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?