Improving CLS at BuzzFeed: Part 1 | BuzzFeed Tech

Layout shift is the Core Web Vital that feels most like a bug and least like a performance metric. Nobody complains that a page scored 0.24; they complain that they tapped a link and hit an ad because the page moved underneath them. The BuzzFeed engineering write up is useful because it treats the problem in that order: first understand what the score is measuring, then find the specific elements doing the moving.

This page adds the practitioner detail around the first half of that work, the diagnosis. Once you can name the offending elements, the field measurement phase in part two, getting help from real users tells you which of them actually affect your audience.

Reading the score before chasing it

Each unexpected shift produces a score of impact fraction multiplied by distance fraction. Impact fraction is the proportion of the viewport that the unstable element occupied across the before and after frames combined. Distance fraction is the greatest distance the element travelled, divided by the viewport's larger dimension. The multiplication is what makes intuition unreliable: a hero block that fills half the screen and slides down a quarter of the screen height scores 0.75 times 0.25, which is 0.1875, nearly double the 0.1 good threshold, from a single event that lasted a fraction of a second.

Individual scores are then grouped into session windows. A window opens at the first shift, closes after one full second with no shift, and can never run longer than five seconds. Your reported CLS is the value of the largest single window, not the total of everything that moved. Two consequences follow directly. Clustered shifts are much more expensive than spread out ones, so a burst of three shifts in the same second is what you hunt for. And a long article with occasional small shifts is not automatically doomed, because those shifts land in separate windows.

Reproducing shifts in the browser

Three habits make reproduction far more reliable. Throttle the network to a slow mobile profile, because most shifts are races between a fast layout and a slow resource, and on a fast connection the race is over before it starts. Test with an empty cache and in a fresh profile, so consent banners and first visit interstitials actually appear. And scroll the page during the trace, since a measurement that stops at load will never see the ad slot that fills halfway down the article.

The fixes, with the syntax that matters

Almost every layout shift fix is the same move: tell the browser how much room to leave before the thing that needs the room has downloaded.

Two of these deserve a warning. font-display: optional genuinely eliminates the swap, at the cost of some first time visitors never seeing your brand font on that visit; if that trade is unacceptable, the metric override properties are the compromise, and our guide to web fonts, performance and SEO works through the options. And lazy loading is a frequent accidental cause: lazy loaded images that lack dimensions shift the page every time one enters the viewport, so the two techniques have to be applied together.

Technical Challenge

Technical SEO issues often create invisible barriers to ranking potential. This case study identifies the specific technical challenges addressed, from crawlability issues to performance bottlenecks. Understanding the problem scope helps practitioners diagnose similar issues.

On a large editorial site the challenge is scale rather than difficulty. Any single fix is a few lines of CSS. The problem is that the same template feeds tens of thousands of articles, images come from a decade of legacy uploads with inconsistent metadata, and embeds are pasted by writers rather than generated by the system. Fixing CLS at that scale means fixing the template and the ingestion pipeline, not the pages.

Diagnostic Process

Identifying technical issues requires systematic analysis using crawling tools, log file analysis, and Search Console data. This case study documents the diagnostic methodology that uncovered actionable issues. The process itself provides value for practitioners building technical audit capabilities.

A crawl contributes something specific here that a browser test cannot: coverage. Configure a crawl to extract whether each img element carries width and height attributes, then count the offenders by template. That converts a vague statement about images into a number of affected URLs per template, which is what gets engineering time allocated. Pair it with the Search Console Core Web Vitals report to see which URL groups are already failing, so the crawl findings are ranked by real impact rather than by volume.

Implementation and Solutions

Each identified issue required specific technical solutions implemented within development constraints. The case study details solutions for rendering issues, performance optimization, crawl management, and indexation improvements. Implementation approaches balance ideal solutions with practical constraints.

Sequence the work by where and when the shift happens, because that determines both user harm and score contribution:

1. Above the fold, during load. Hero images, mastheads, consent banners and the first ad slot. These almost always dominate the score and they are what the reader actually experiences.
2. Above the fold, after load. Late injected promos, sticky bars and personalisation containers. Cheap to fix, and often the difference between passing and failing.
3. Below the fold, during scroll. In article embeds, lazy loaded images, related content modules. Real, but only counted when a reader scrolls that far.
4. Interaction driven. Menus, accordions, filters. Usually excluded from the score by the hadRecentInput rule, so fix these for usability, not for the metric.

The systemic version of step one is to stop the problem at the source: make the CMS store intrinsic dimensions on upload and emit them in the template, so new content cannot reintroduce the defect after the backfill is done. Without that, CLS becomes a recurring cleanup project. The template level checklist in CLS too high covers the audit side of the same work.

Measurable Impact

Technical improvements demonstrate value through measurable outcomes: improved crawl stats, faster indexation, better Core Web Vitals scores, and ultimately improved rankings and traffic. This case study quantifies the impact of technical optimization.

Track the lab number and the field number on different clocks. A Lighthouse run confirms within minutes that a specific shift is gone, which is the right check for a pull request. The reported field score moves on a 28 day rolling window, so a fix deployed today changes the Search Console status roughly a month later, and only once enough real sessions have been recorded on the new build. Reporting the lab improvement as if it were the field result is the most common way these projects lose credibility with stakeholders, so state which number you are quoting every time.

Technical SEO case studies like this one help practitioners understand the tangible value of investing in site infrastructure.

This technical SEO case study demonstrates how resolving technical issues and optimizing site infrastructure directly impacts organic visibility. The documented approach provides a template for technical optimization initiatives.

FAQ

Source: https://tech.buzzfeed.com/improving-cumulative-layout-shift-at-buzzfeed-part-1-8b7ead2381dd