Google’s CLS Update Helps PWAs Achieve Accurate Performance Scores

Google’s update changes the maximum time to calculate cumulative layout shift.

Google announced a significant change to how Cumulative Layout Shift (CLS) is calculated within Core Web Vitals (CWV). The change adjusts the maximum session window with 1 second gap, capped at 5 second. According to Malte Ubl, the change makes it “more fair for long running pages and single page apps.”

For websites using Progressive Web Apps (PWA) or Single Page Apps (SPA), the change provides a well-deserved boost to performance.

Cumulative Layout Shift and PWAs

PWAs and SPAs behave differently from standard web pages. Their use of service workers and other techniques to speed up performance have a drawback: A full session may be seen as a single page hit by current CLS metrics. As such, each time a user loads a new page, it’s calculated as a major shift in layout, as opposed to loading a new page. While these techniques are implemented to provide better UX with greater performance, the CLS calculation unfairly penalized performant websites. And that’s no longer the case.

The old calculation was noticeable when looking at websites built using the AMP framework and PWA. CLS scores for the AMP pages are generally great, and pass CLS requirements. However, when those same pages are called within the PWA, the CLS score is much worse. It’s the same content, with the same layout shifts, but somehow the score change is dramatic.

Moving forward, PWAs –  especially AMP-powered ones – should see CLS scores that more accurately reflect the excellent real-world experience they deliver .

How Google’s Update Helps CLS for PWAs

By putting a maximum session window gap and cap limit, we see fewer page loads counted in an individual, cumulative layout shift. This will lead to improved scores, based more closely to actual performance as opposed to an aggregate across a session.

Google explained the decision to adopt the smaller, capped, maximum window:

Since this update caps the CLS of a page, no page will have a worse score as a result of this change. And based on our analysis, 55% of origins will not see a change in CLS at all at the 75th percentile. This is because their pages either do not currently have any layout shifts or the shifts they do have are already confined to a single session window. The rest of the origins will see improved scores at the 75th percentile with this change. Most will only see a slight improvement, but about 3% will see their scores improve from having a “needs improvement” or “poor” rating to having a “good” rating. These pages tend to use infinite scrollers or have many slow UI updates, as described in our earlier post.

The updated CLS calculation comes just in time, with CWV set to take effect this month.