How Web Developers Can Optimize For Google’s Core Web Vitals
How web developers can ensure websites are optimized for Google's Core Web Vitals. Includes tips for optimizing Largest Contentful Paint and other metrics.
Join the DZone community and get the full member experience.Join For Free
It’s been nearly one year since Google announced three new user experience metrics that will be part of its core ranking algorithm. These new metrics -- known as the Core Web Vitals -- will go into effect starting in June 2021. As a web developer, you now have a strong incentive to improve the overall experience you’re delivering on client websites. Sites that meet—or exceed—these metrics will gain a benefit over competitors in search rankings.
What Google is saying by establishing these standards is “web pages need to have an overall better user experience from a speed and usability perspective, and here’s what we think you should do about it.” Research backs this up. As a general rule of thumb, people lose interest if they have to wait too long for a web page to load. So, optimizing sites according to Google’s metrics will result in happier website visitors. This is important to businesses that want users to stick around longer.
Search results on Google have already been taking into account other user experience metrics such as interstitial ads and mobile-friendliness. The three new metrics you as a web developer should now be paying specific attention to are Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift—basically, loading speed, interactivity, and visual stability. The following are some tips on how you can work to address each of these.
Reducing Loading Speed
Another thing you can do is to improve the server response time, which Google recommends being under 200 ms. Things like using a content delivery network (CDN), reducing reliance on heavy server-side libraries and frameworks, and making sure any shared server is not starved for resources like CPU, network, or memory, which can slow down the response of your server. Lastly, improving the LCP metric should also include optimizing all images on a page. It is vital that images are compressed and resized to increase the website loading speed.
Stabilizing the Page Visuals
The third Core Web Vital metric—Cumulative Layout Shift (CLS)—is the hardest one for web developers to optimize for, but it’s really important to user experience. It’s really frustrating for page visitors when they’re about to click a button, but the layout of the page shifts and they end up clicking on the wrong element. Google says pages should have a CLS of less than 0.1 in order to offer a good user experience.
A lot of the fixes for this problem involve media assets on the page. To optimize the CLS, you can add a height and width attribute to images and videos on a web page. This tells the browser to reserve space in the layout and to move the page around later, once these have loaded. For any dynamically added content—such as banner ads and inline notifications—you should make sure that the empty space already exists on the page to prevent shifting other content around them.
Finally, as a word of warning, you should never have content insert itself above existing content on the page, except in response to a user’s interaction.
Optimizing For the Future
Typically, Google doesn’t give developers a year to prepare websites for its changes, so the fact that the company announced the Core Web Vitals a year in advance demonstrates what a major change this is. While the “signal” goes into effect starting in June, Google will need to collect 28 days of “Real User Metrics” or “Field Data”—historical user experience—for there to be any change to the website rankings.
Moving forward, Google will likely update the metrics on an annual basis, though these will likely be minor. Of course, following best practices when it comes to improving speed on a website is something you should be doing on your own—including things like making sure there isn’t a lot of bloatware on a website, optimizing images, and using the right size and width of images.
As a rule, web developers should keep themselves informed about any changes that might affect the websites they handle. One thing won’t change: Speed and stability will always be factored in user experience. Be conscious of each choice you make at every step along the way as you develop a website, and you’ll be ready as changes keep coming.
Opinions expressed by DZone contributors are their own.