Measuring Largest Contentful Paint in the Field
Lab scores are a guess. Field data is the truth, and collecting it takes fewer lines than you might think.
Reading work aloud is the cheapest editing tool there is. Your ear catches rhythm problems that your eye skips over, especially in long sentences.
We schedule unstructured time on purpose. Some of our best ideas started as an afternoon with no plan and a stack of old magazines.
lcp.js
new PerformanceObserver((list) => {
const entries = list.getEntries();
const last = entries[entries.length - 1];
navigator.sendBeacon('/rum', JSON.stringify({
metric: 'LCP',
value: Math.round(last.startTime),
element: last.element?.tagName,
}));
}).observe({ type: 'largest-contentful-paint', buffered: true });
JavaScript
Reading work aloud is the cheapest editing tool there is. Your ear catches rhythm problems that your eye skips over, especially in long sentences.
Continue reading
Related posts
Lazy-Loading Images Without a Library
Native loading hints, a sizes attribute, and one fallback.
Caching Expensive Queries the Simple Way
A read-through cache pattern that fits in one function.
Finding Slow Pages with a Single SQL Query
Group request logs by path and sort by the ninety-fifth percentile.
Comments · 4
The quote at the end made my day. Sharing this with the whole team.
Portra 400 for most of them, and one roll of HP5 for the evening shots.
Would love a follow-up post on how you organise all of this afterwards.
Such a clear explanation. I finally understand why our pages felt sluggish on mobile.