In my post about the behavioral aspects of web performance, I mentioned the importance of getting quick wins to help give performance culture some momentum.
Here is an example of one quick win that happened recently.
Identification
I've worked with our product developer, @robflaherty, at two different companies now, and he's really been my biggest ally for building up a proper web performance practice.
Rob found the following issue in Google Search Console and created a card for me in Trello:
The issue was a little surprising to me. It didn't show up in any of the macro-level reporting because the site was solidly good for desktop and mobile for all Core Web Vitals metrics.
This is because the macro-level reporting looks at overall percentage of page views with a good experience. In other words, the most popular pages have greater impact for CWV scores because they're viewed more.
Search Console is a little different. Instead of looking at overall page views, it looks at problems by the number of URLs, giving all of them the same weight. In this case, the CLS scores were at an average of 0.12 for a specific URL pattern, slightly higher than the 0.1 that would merit a score of good for CLS.
The URL pattern with the issue was /forum/*
.
Troubleshooting
Using Real User Monitoring (RUM) data, I was able to filter my query to only desktop devices and limited it to the URL pattern with the CLS issues.
The RUM data was revealing. There were 2 components that were the largest contributors to CLS issues.
Troubleshooting made it clear that it was a flash of unstyled text (FOUT) issue - when the webfont was loaded, it caused a sizeable shift compared to the fallback.
Using a font style matcher, I was able to pick a better match and fix the issue.
Results
To validate the fix, I used RUM data to see the overall percentage of page views on the forum with a good CLS score on desktop, comparing the data from before and after my fix.
Desktop page views w/ CLS < 0.1 | |
---|---|
/forum/* before | 75.46% |
/forum/* after | 91.74% |
This fix resulted in a >20% improvement in the number of pages views with a good CLS score on forum pages, and it safeguards the site from being flagged for moderate CLS if there is a sudden spike in traffic on the forum pages.