Core Web Vitals Update: Everything You Need to Know
By: Dileep Thekkethil
August 30, 2022
Table of Contents
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.
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
- 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.
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.
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.
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.
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.
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
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
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.
- Reduce Render Blocking
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.
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.