[openstreetmap/openstreetmap-website] High Largest Contentful Paint (LCP) in Google Core web vitals (Issue #4084)

[Andy Allan]

I've had a quick look at one of the example URLs in their dashboard, and it's the background tiles that it's complaining about most:

> This is the largest contentful element painted within the viewport. [Learn more about the Largest Contentful Paint element](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-largest-contentful-paint/?utm_source=lighthouse&utm_medium=lr)LCP
Element
div.leaflet-pane > div.leaflet-layer > div.leaflet-tile-container > img.leaflet-tile
<img alt="" src="https://tile.openstreetmap.org/19/283653/182345.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(1px, 137px, 0px);">

|Phase | % of LCP | Timing|
|---|---|---|
|TTFB|17%| 610 ms |
|Load Delay|72%|2,500 ms|
|Load Time|3%|100 ms|
|Render Delay|8%|290 ms|

The difference between mobile and desktop performance seems to be because they throttle bandwidth and add extra latency to the mobile requests. That means the above figures need to be taken with a pinch of salt, I reckon, since they are probably a mixture of real latencies plus emulated ones.

Overall though, this might be something for the OSMF operations team to have a look at, since map tiles are out of scope here :smile:

The other topic appears to be the large size of our application.js bundle, so maybe that's something we can check on here.

> Frankly this seems like SEO nonsense to me and I'm not interested in pandering to that.

Well, it's an approximation of how people in the real world experience the site, so I'm receptive to warnings about that and suggestions for improvements. 

I'm also (mildly) receptive to maintaining OSM.org ranking in search results, since I don't want us to end up with a "stackoverflow" situation where other copy+paste sites end up ranking higher by simply serving the same content faster than we do. But that's a minor concern.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/issues/4084#issuecomment-1631142778
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/issues/4084/1631142778 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20230711/4015a780/attachment-0001.htm>