Understanding Core Web Vitals

How Brainly is adapting to new SEO requirements

Photo by NisonCo PR and SEO on Unsplash

Core Web Vitals (CWV) is an initiative created by Google to provide a unified guide for quality signals essential to delivering a great user experience on the web. You can find the official guide from Google here. The metrics that makeup Core Web Vitals will evolve, so they are essentially a moving target. This can present some challenges to development teams intent on maximizing their scores. Because CWV will be used to calculate SEO rankings, they've become a significant focus at Brainly.

There are currently three categories of metrics Google is tracking:

1. Loading
2. Interactivity
3. Visual stability

These categories are mapped to three scores which are outlined below:

• Largest Contentful Paint (LCP): Measures loading performance. LCP should occur within 2.5 seconds of when the page first starts loading.
• First Input Delay (FID): Measures interactivity. Pages should have an FID of 100 milliseconds or less.
• Cumulative Layout Shift (CLS): Measures visual stability. Pages should maintain a CLS of 0.1. or less.

For each of the above metrics, to ensure you're hitting the recommended target for most of your users, a reasonable threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.

Testing Tools

Google has an official guide on CWV testing tools which you can view here. The primary tool used for local developer tools is Google Lighthouse (available in Chrome Dev tools).

The data collected through testing tools like Lighthouse is known as lab data. In addition, Google collects Real User Monitoring (RUM) using Chrome. Ultimately, RUM data constitutes your score, so ensuring your lab tests reflect reality can be challenging. Fortunately, Google has published a guide here to help you understand the difference between lab and RUM data.

At Brainly, we've opted to incorporate CWV testing tools into workstations and our CI/CD pipeline. Providing a feedback loop as close to when the developer's fingers hit the keyboard is critical in all cases but especially critical when testing CWV. It's tough to track issues back to a code change once they've gone into production.

Our CI/CD pipeline uses Puppeteer and Lighthouse (Node lib) to check the CWV scores when changes are pushed to our staging environments. One challenge we faced with this setup was the number of Lighthouse executions required to produce high-resolution scores. We've explored tools like AWS Batch that can help us paralyze across a large number of instances which can often be more performant than horizontal scaling. Using Puppeteer and Lighthouse in virtualization or Serverless technologies can be tricky. So be cautious when considering services like ECS and Lambda for executing your CWV tests.

Using a CDN to Improve Performance

Brainly uses Cloudflare to provide the best possible performance for its global user base. With over 350 million monthly active users, proper use of a CDN is critical to our success. Proper caching is extremely important for CWV. Be sure static resources are cached correctly (i.e., Chrome Dev tools show the resource loaded from cache). Cloudflare also provides cache hit metrics that can be used for debugging. A new feature that was recently released called early hints can also improve page load times for first-time visitors. Early hints are part of the HTTP standard. Below is an example of early hints in the response headers for static resources:

HTTP/1.1 200 OK
     Date: Thurs, 16 Sept 2021 11:30:00 GMT
     Content-Length: 1234
     Content-Type: text/html; charset=utf-8
     Link: </style.css>; rel=preload; as=style
     Link: </script.js>; rel=preload; as=script
[Rest of Response]

Development Improvements

Brainly has to implement several new components to help developers improve CWV scores across the entire React stack. Some of the most significant changes were:

1. Creating a responsive image component: This solution relies on Cloudflare's Image Resizing service. This React component ensures images are served using fixed sizes optimized for the user's resolution using srcset. We saw ~30% improvement in our scores after implementing responsive images.
2. Preloading critical CSS: Be sure critical CSS is set to preload. We built a small WebPack plugin that sets rel="preload" in all our critical CSS paths.
3. Prevent display state changes based on user interaction. This includes things like layout shifts after user input, such as scrolling. It’s important to note that layout shifts within 500 milliseconds of user input (other than scrolling) will be excluded from CLS calculations.
4. Limit third-party scripts. This is the most challenging aspect of improving CWV scores. In many cases, ad libraries are a significant contributor to poor scores. However, they are also a contributor to revenue.
5. Improved experiments rendering. We implemented a small hook to handle the default states of our experiments. Rendering nulls will cause CLS issues because new data will appear on the page without a reserved space.

Stay tuned if you want more details on any of the above solutions. Our Front End Infrastructure team is working on a series of articles that will do a deep dive into each solution.

Conclusions

Adapting to Core Web Vitals is an ongoing challenge that will continue into the foreseeable future. It's crucial to stay on top of Lighthouse updates as future changes to the SEO algorithm will often be reflected in each release. It's also important not to lose focus on other contributing factors and to keep CWV in perspective. It's not clear yet how much of a role they play in SEO rankings. Brainly's CWV improvements have ultimately been very good for our product and fast-tracked some items on our road map like responsive images. We look forward to continued innovation and advancements in 2022!