Core Web Vitals Update: Everything You Need to Know

 

How to Improve Page Experience Score?

Don’t think that optimizing websites for better page speed experience is the task of the developer? 

SEOs have to be equipped with technical knowledge in order to keep pace with the changing trends.

If you’re not familiar with coding, you should try to understand how the fixes will improve the site speed and user experience. This is very critical if you want to give the right instructions to the developers. 

Installing a cache plugin, minimizing the CSS and JavaScript can all help in speeding up the site and these are some of the fixes that even a newbie SEO can do. But will all this improve the Web Vitals? 

The answer to this question is both Yes and No. The reason being that some of the fixings can help in making a little improvement, but when it comes to the goal of improving the web vitals, they have little impact. 

This is quite evident in the research done here at Stan Ventures. We analyzed the Web Vitals score of some of the in-house websites after making minor changes. 

  • Installed a Cache Plugin
  • Minimized the CSS
  • Minimized JavaScript
  • Used Defer Attribute
  • Enabled GZip
  • Enabled LazyLoad

The result was nothing impressive worth sharing. The GTMetrics and Pingdom tool said we were doing great, but the Google Web Vitals Extension said the page experience signals sucked. 

The bottom line of our research was that moving the elements from top to bottom and removing the render-blocking javascript will all help you only if you have the strong technical backing. 

Here is why: 

1. Server response time can be improved by installing a cache plugin, but it only works when the users revisit your site. This is very useful when your users browse through multiple pages. But let’s say that you haven’t set the right expiry for the resources, the whole purpose of adding the cache plugin may be futile. 

2. Making drastic changes to the load sequence of JavaScript and CSS can result in bad page experience. Those you may get a 90+ rating on third party tools, users may experience volatile changes as the page unfolds in the browser. 

3. There is no one panacea for all the fixes for page speed. If you are running a WordPress site, or any other CMS, you need to install multiple plugins for optimization. This can further deteriorate the speed of the site. 

Optimizing Images for Page Speed

One of the prime reasons for bad page experience is the heavy payload of images that are rendered by browsers as page loads. 

Better image optimization will speed up the site and help you to achieve the perfect Web Vitals score. Here are a few quirky ways to optimize images:

Use Image CDN: If you have an image-heavy design, your server is already stressed out when delivering the resources to the user’s browser. It also provides other resources within the payload simultaneously to the browser, making the user wait long for the whole page to load.CDN delivery of content

Using the image CDN servers, you take the pressure off from your server as the images are served using CDN servers in the closest proximity to the user’s location. Currently, AWS and CloudFlare are the best Image CDN providers in the market. 

WebP Format: Ever tried using the WebP format for your images? This is a Google-approved image format that reduces the image size by at least 36% compared to JPEG.webp format for images

Most of the modern-day CDNs deliver images in WebP format as it supports transparency, and typically provide 3× smaller file sizes compared to PNG.

LazyLoad: LazyLoad has been there for a long time, and this is a tried and tested strategy to reduce the load speed.

We found that lazy loading images will improve the web vitals score as the server is not loaded with image requests all of a sudden.LazyLoad for images

With LazyLoad enabled, only the initial set of images are rendered while users land on the page, giving them a seamless user experience. 

The other images load only when the users reach the particular viewpoint. 

Optimizing Java and CSS

  • GZIP Compressiongzip for speed

When you enable GZIP compression, it can reduce the size of the transferred resource significantly, and hence reduces the time to download the resources as well. GZIP compression has become a standard practice for the majority of websites. 

  • Minifying Resources

minify scripts

Minification is the process of removing redundant data from your JS and CSS files. It is done to reduce load time on websites and bandwidth usage. 

To minify JS, CSS and HTML files, comments and extra spaces need to be removed. This can be done with the help of most optimization plugins. 

  • Combine Javascript and CSS

Combine Java CSS scripts

When you combine Javascript and CSS files, it reduces the number of requests and speeds up the process of rendering. For example, if your page loads 5 external Javascript and CSS files each, combining them will result in 8 lesser requests. 

Moreover, CSS files are all rendered blocking, which means the more CSS files are loaded, the more likely it is to interrupt a page’s critical path. Multiple Javascript files can also limit the parsing of your HTML document when deferred improperly.

  • Reduce Render Blocking

reduce render blocking resources

Slow PageSpeed is often the result of excessive use of Javascript and CSS. Before eliminating render-blocking scripts, you need to identify which scripts are causing the problem. You can use the PageSpeed Insights tool to analyze which scripts are slowing down your site.

You can force JS files to wait to load until other elements of the page are ready. One of the most sought after ways to defer JS is through asynchronous loading.

  • Deliver Javascript and CSS using CDN

Unless you use CDN, you are using your server bandwidth for loading Javascript and CSS files. It is possible to reduce the load on your server without the CDN, but only to a certain extent.

We’ve analyzed that websites that have enabled the below features successfully reduced the server load and allowed faster rendering.

  • Optimizing the Font

Custom fonts may make your site look really attractive, but such font rendering behavior can increase the load on servers and slow down your site. 

To fix this issue, ensure that your CDN can override font rendering behavior.

By doing so, your CDN can swap the rendered text and display the original text as it loads on the CSS. Since both resources are delivered simultaneously from the same server, the actions occur in a few microseconds. 

  • Embed Codes

Embedded images and videos can slow down the speed of a website. Many businesses cannot choose to ignore these features on their site. For them, Google recommends lazy loading, which means that these media files will load only when promoted by the users. 

Implementing this technique has shown a 70% performance improvement in LightHouse.

 

Author

Dileep Thekkethil

Dileep Thekkethil, a Journalism Postgraduate, was formerly with a US-based online magazine, is the Associate Director, Digital Content at Stan Ventures. He is a frequent blogger who keeps a tab on the latest updates in SEO and technology arena. Reach me @Mail | LinkedIn | Twitter | Facebook or View all posts by Dileep

Comments

Leave a Reply

Your email address will not be published.