In our recent webinar and blog post, we explained Google’s Core Web Vitals, how they’ll soon impact your search rankings, and the meaning of the new terms Google has introduced as part of this update. As we prepare for Google’s inclusion of Core Web Vitals as one of the factors that impact search rankings, we’ve reviewed the performance of hundreds of websites. In this post, we’ll share the six most common issues we’ve encountered and how to fix them.

1. Serve images in next-gen formats

You’re probably familiar with image formats like PNG, GIF, or JPEG. Newer image formats like JPEG 2000, JPEG XR, and WebP offer superior compression without reducing quality. Google suggests you use these next-generation formats because it will reduce load time and data consumption. While Google suggests  three options, WebP is the only viable option based on browser support. Typically, moving from JPEG to WebP reduces file sizes by 15 to 25% with equivalent quality. 

What you should do next  

We don’t recommend updating all of the images on your website to WebP because not all browsers support this format yet. Instead, install a Drupal module or  WordPress plugin that  automatically creates a WebP version of all images and serves these new images to supporting browsers only. When evaluating your site, Google will be served the WebP version, improving your score and search rankings. You’ll also still have a website that’s fully functional for visitors using older browsers.

2. Eliminate render-blocking resources

Render-blocking resources are scripts, cascading style sheets (CSS), and HTML imports that block or delay the browser from rendering page content to the screen. When a visitor lands on your site, their web browser starts at the top of your site’s code and reads down. If in that process it encounters a CSS or JavaScript file, it needs to stop “reading” while it waits to download and process that file. The time that it spends “paused” to download and parse those resources could be spent on something much more productive, like loading the part of your website’s content that’s immediately visible when someone lands on the page. 

What you should do next

As a solution, Google suggests delivering critical CSS or JavaScript inline or deferring all non-critical JavaScript and styles. We do not recommend inline JavaScript code as this can pose security and maintenance issues. Instead, we recommend the deferring approach. Any script that doesn’t involve what the viewer will see right away should be deferred until the rest of the page is loaded. That can be done easily using the defer or async attribute.

3. Remove unused CSS

CSS tells the browser how to display the text, images, and shapes on a webpage. Google has found code for displaying elements that do not appear on the page. Unused CSS unnecessarily slows the loading of your page in two ways: first, it makes the files larger to download, and second, it takes longer for the browser to process and apply the CSS.

What you should do next

Use themes and plugins with modular CSS inclusion, which  loads only the CSS necessary to style their modules or the output on the page. If your site has a custom design, separate your CSS per component or per layout instead of creating one monolithic CSS. While it’s possible to separate your CSS files per device to eliminate unused CSS, it may not be worth the effort.

4. Remove unused JavaScript

JavaScript is a scripting language that allows web pages to do more complex things than display text and images, like updating the content on the page. Like your junk drawer, over time, scripts can accumulate on your site, and this code competes for bandwidth with other resources while it’s downloading, which can make your site take longer to load. Unused JavaScript is also wasteful for mobile users who don’t have unlimited data plans.

What you should do next

It’s common for WordPress websites to install multiple plugins, and each plugin may load its own JavaScript. Removing unused plugins is one way to remove unused JavaScript. Additionally, we recommend reviewing all of the JavaScript included on your website to identify code that’s no longer used. We often find sites loading social retargeting pixels they’re not using or social sharing tools that can take significant time to load.

5. Defer offscreen images

By default, browsers load all of the images on a page with equal priority regardless of if the image appears at the top or the bottom of the screen. Google recommends that you improve how fast the top of your page loads by deferring the loading of images that aren’t visible until someone scrolls. This is sometimes referred to as  lazy loading and allows you to  deprioritize images that appear further down the page, which will free up bandwidth for images required at the top of the page.

What you should do next

You can install Drupal modules and WordPress plugins allow you to specify what elements should be deferred when loading the page. Alternatively, you could switch to a theme that provides lazy loading functionality.

6. Preload Largest Contentful Paint image

The opposite of the last error, in this case, Google recommends that you tell the browser to prioritize loading essential images. Making this change will improve Largest Contentful Paint (LCP) by reducing the render time of the largest image or text block visible within the viewport.

What you should do next

If you know that a particular resource should be prioritized, use <link rel=”preload”> to tell the browser to fetch it sooner. Many types of resources can be preloaded, but you should first focus on preloading critical assets, such as fonts, above-the-fold images or videos.

Now that we’ve covered the six most common issues identified by Google’s Core Web Vitals, you are probably asking yourself, “How much effort should I put into addressing these issues?” We recommend prioritizing making changes that will also enhance your visitors’ experience and not prioritizing changes only to please Google or that remove value from your site.

Google has said they’ll begin considering Core Web Vitals as a factor in search rankings starting in mid-June 2021, and it will increase in importance gradually until the end of August. We recommend tracking changes in search traffic during the period and making additional changes if you see a substantial decrease. Currently, only 4 percent of websites achieve a good score for all three Core Web Vitals metrics. Google likely won’t be able to only send traffic to web pages that meet these new standings. We expect that fixing these issues will gradually continue to increase in importance even beyond August.