Drupal is Well Optimized for Web Core Vitals

Posted on 17 Oct 2021 by Alexei Raiu
alexrayu.com excellent lighthouse ranks

Google has recently increased attention to Web Core Vitals (WCV) - a set of website parameters that reflect user interaction with the site, which measures not only server time, but also render time, visual consistency and visual stability of the page. Some sites have seen as much as 50% hit due to issues with Web Core Vitals! The era when you could build huge and slow pages as long as your server responds fast enough, is gone. Now it takes more than that to optimize the site. As you can see, this site running on Drupal, is close to top scores.

Overall, Drupal is very friendly for WCV out of the box. However, some additional modules can help you to optimize the site even further.

1. Lazy Loading.

Lazy Loading only loads the images when they are viewed. This alleviates the initial hit on performance, if all images get loaded and rendered at once, even though they may not be needed. For lazy loading, I use the Lazy module for Drupal. Lazy module has lots of helpful settings and integrates with the lazysizes script.

2. WebP Support.

Overall, a WebP image is twice lighter than a jpg image. WebP allows saving traffic. To enable WebP for responsive images, I use the ImageAPI Optimize WebP support module. It pulls ImageCache API as a dependency. It allows you to create "optimization pipes" for image styles. Creating a WebP optimization pipe and enabling it for every image style will make sure you have WebP alternatives created for each image style. Enabling the WebP support for responsive images will automatically add WebP to responsive images.

3. Cleanup!

This is not a module. This is a need to clean up your site, remove frivolous CSS and JavaScript, effects and images. A few years ago, it looked right if you had a web site with all the bells and whistles - large background images, slideshows, JavaScript animations, things popping and sliding, blocking announcements and cookie settings, advertisements. A few years ago, you could throw in anything on the site, as long as the initial response goes fast enough. Now, this is all different. Lazyloading, WebP support will never be enough unless you through away all garbage and optimize the site semantically and structurally.