10 Tips for Optimizing Core Web Vitals

From Experts
Yevhen Lukianiuk
147
February 2, 2023
2Like
Comments
Share
10 Tips for Optimizing Core Web Vitals

Core Web Vitals (CWV) is a set of metrics that Google uses to determine how user-friendly or inconvenient a website is for visitors. CWV belongs to the website quality assessment algorithm and directly affects the site’s position in search results. Therefore, websites with poor Core Web Vitals scores may rank significantly lower than websites with better scores.

As a review, learn about what Core Web Vitals are and how to check them on all website pages in our previous article on the subject.

In this article, we will give 10 tips for optimizing Core Web Vitals on your website.

Tip 1: Shrink the DOM tree

The DOM tree is a diagram of the relationships between HTML tags that form the framework of a website page. The more HTML tags there are in the page code and the deeper their nesting relative to each other, the larger the DOM tree. Accordingly, the more succinct the HTML structure of the page, the smaller the DOM tree will be.

The browser needs some time to establish relationships between all HTML tags and to build the DOM tree. Therefore, a large DOM tree negatively affects page loading speed and worsens Core Web Vitals indicators, while a small DOM tree has a positive effect and improves indicators.

An example of a simple DOM tree: 

<html>
  <head>
  </head>
  <body>
    <div class="block-1">  </div>
    <div class="block-2">  </div>
    <div class="block-3">  </div>
  </body>
</html>

An example of a complex DOM tree: 

<html>
  <head>
  </head>
  <body>
    <div class="block-1">
      <div class="block-1-1">
        <div class="block-1-1-1">  </div>
        <div class="block-1-1-2">  </div>
      </div>
    </div>
    <div class="block-2">
      <div class="block-2-1">
        <div class="block-2-1-1">  </div>
        <div class="block-2-1-2">  </div>
      </div>
    </div>
    <div class="block-3">
      <div class="block-3-1">
        <div class="block-3-1-1">  </div>
        <div class="block-3-1-2">  </div>
      </div>
    </div>
  </body>
</html>

If the pages of your website have a sprawling and complex DOM tree, it’s wise to reduce it. This will speed up the website loading process and have a positive impact on CWV.

Tip 2: Use images that are the right size

The larger the image, the longer it takes to load, which tends to have a negative effect on the Largest Contentful Paint (LCP) score. Sometimes, a long load time for an oversized image provokes shifts of neighboring layouts, which has a negative effect on the Cumulative Layout Shift (CLS) indicator.

If a 600 x 400 px image is enough for a website page, then it’s best to avoid uploading an image that is 900 x 600 px, 1200 x 800 px, or larger. Visually, such an image will appear in the required size in the website interface, but it will take more time to load. Example:

image size

Tip 3: Be specific about image sizes

In order for the browser to understand what size image should be loaded and to reserve enough space for it on the page, it is necessary to clearly indicate the image’s size through the width="" and height="" attributes. Example: 

<img src="image.jpg" width="800" height="600">

Tip 4: Use responsive images

Responsive images are images that load based on screen sizes. The srcset attribute is used to display responsive images. Example: 

<picture>
<source srcset="small-image.jpg" media="(max-width: 360px)">
<noscript><img src="big-image.jpg"></noscript>
<img src="big-image.jpg" data-src="big-image.jpg" >
</picture>

Small-image.jpg will be loaded on mobile devices with a screen width of 360px or less. In all other cases, the image big-image.jpg will be loaded.

The use of responsive images allows you to significantly speed up the loading of the website and improve the LCP indicator.

Tip 5: Set up delayed loading of images

Delayed image loading is a method that allows you to delay the loading of images on a page until a later time. Images are not loaded immediately when the page is opened, but only when they fall into the visible area of the screen. In this way, the first screen will load faster, which will have a positive effect on all CWV indicators.

For delayed loading of images, the <img> tag must be assigned the loading="lazy" attribute. Example: 

<img src="image.png" loading="lazy">

Tip 6: Configure server-side gzip content compression

Most servers have software that allows you to compress content 'on the fly' (fonts, JS and CSS files, images, video, audio, etc.) and transfer them to the browser in an already-compressed form. Compressed content loads faster because it requires less traffic and therefore has a positive impact on Core Web Vitals.

In order to enable server content compression on the Apache server, add the code to the .htaccess file (located at the root of the website): 

<IfModule mod_headers.c>
    RewriteCond "%{HTTP:Accept-encoding}" "gzip"
    RewriteCond "%{REQUEST_FILENAME}\.gz" -s
    RewriteRule "^(.*)\.(css|js)"         "$1\.$2\.gz" [QSA]
    RewriteRule "\.css\.gz$" "-" [T=text/css,E=no-gzip:1]
    RewriteRule "\.js\.gz$"  "-" [T=text/javascript,E=no-gzip:1]
    <FilesMatch "(\.js\.gz|\.css\.gz)$">
      Header append Content-Encoding gzip
      Header append Vary Accept-Encoding
    </FilesMatch>
</IfModule>

In order to enable server content compression on the Nginx server, add the following code to the nginx.conf file: 

 gzip on;
 gzip_min_length 1000;
 gzip_proxied expired no-cache no-store private auth;
 gzip_types text/plain application/xml;
 gzip_buffers 32 4k;
 gzip_comp_level 9;
 gzip_disable "msie6";
 gzip_http_version 1.1;
 gzip_static on;
 gzip_vary on;
 gzip_types text/css text/javascript text/xml text/plain text/x-component application/javascript application/x-javascript application/json application/xml application/rss+xml font/truetype application/x-font-ttf font/opentype application/vnd.ms-fontobject image/svg+xml;

Important! Before making any changes, make a backup copy of all files. In some cases, it may be necessary to consult the technical support provider of the server.

Tip 7: Establish a preliminary connection with the DNS of third-party resources

If your website downloads files or scripts from third-party sources, it may take some time to establish a connection between your server and another's server, which will negatively affect Core Web Vitals.

To avoid this, it is worth establishing a preliminary connection with the DNS of a third-party server for the most requested third-party files. This is done using the rel="dns-prefetch" attribute. Between <head> and </head> of all pages of your website, add the following code: 

<link rel="dns-prefetch" href="[url]" />

Replace [url] with the URL of the website (not the file, but the website).

Example: 

<link rel="dns-prefetch" href="https://domain-1.com" />
<link rel="dns-prefetch" href="https://domain-2.com" />
<link rel="dns-prefetch" href="https://domain-3.com" />

Tip 8: Preload important objects

Some files are necessary for the website to display correctly, so it is best to download them as soon as possible, leaving less important files to be downloaded later. For example, it is recommended to preload font files (without which the text will be displayed incorrectly) as well as CSS and JS files (without which the visual part will not be loaded correctly).

Objects can be preloaded using the rel="preload" attribute. Between <head> and </head> of all pages of your website, add the following code: 

<link rel="preload" href="[url]" />

Replace [url] with the URL of the desired website.

Example: 

<link rel="preload" href="https://domain.com/image.jpg" />
<link rel="preload" href="https://domain.com/style.css" />
<link rel="preload" href="https://domain.com/script.js" />

It is recommended to preload the largest image on the page, which will help speed up its loading process and positively affect the LCP indicator.

Tip 9: Don't use an image as a background

Using an image is used to create a gradient on the background of a block or the entire page increases page load times, which negatively impacts Core Web Vitals. To prevent this, remove background images and use CSS tools instead.

For example, if the CSS background style used to look like this: 

background: url("https://domain.com/image.jpg")

For optimization, it can be rewritten as follows: 

background: linear-gradient(135deg, #fbc6ff 20%, #bdfff9 90%);

Tip 10: Compress images

Images can be compressed to speed up page loading and thereby improve Core Web Vitals. There are many free online services for this. The size difference between a compressed and uncompressed image can be seen in the screenshot below:

compress images

With the help of compression, it was possible to reduce the size of the image by 21%.

Conclusion

To improve Core Web Vitals (CWV), it is necessary to optimize the loading process of all website components:

  • CSS and JS files
  • fonts
  • images, video, audio, and other media files

The tips above can greatly improve your website's Core Web Vitals.