In May 2020, Google announced Web Vitals. These are a new set of metrics to measure the speed and user experience of websites.
Within these Web Vitals, there is a subset of metrics called Core Web Vitals. These are a set of real-world and user-centred metrics. Each of the Core Web Vitals represents a distinct facet of the user experience.
In 2021, Google is likely to use these new metrics to help with ranking a page.
Despite having high-quality content and countless backlinks, a site may not rank on the first page if it provides a subpar page experience.
Here are the top five ways to improve Core Web Vitals:
Optimize Images For Page Speed
For any given site, large images are often the largest contentful paint.
As per HTTP Archive, images make up on average 21% of a total webpage’s weight.
Image optimization leads to a better user experience, faster page load times, and additional ranking opportunities.
Related: Best WordPress Plugins For Image Optimization
Here are a few ways to optimize images:
1. Image CDN: An image CDN specializes in the optimization, transformation, and delivery of images. Image CDNs use image URLs to indicate which images to load. It conveys image information, such as size, format, and quality.
Some of the leading image CDNs that you can use are AWS CloudFront, Akamai, and Fastly.
2. WebP Format: It is a Google-approved image format that contains image data with both lossless and lossy compression.
It can reduce the image size up to 34% smaller than JPEG and PNG images.
You can convert images to WebP format through the cwebp tool or the Imagemin WebP plugin.
3. LazyLoad: It is a practice to delay the load and initialization of objects to improve performance and save system resources.
Display a lightweight placeholder image and replace it with the real full-size image on scroll to lazyLoad an image.
Enabling LazyLoad renders only the initial set of images while users land on the page. Thus, it gives them a seamless user experience.
Optimize JavaScript And CSS
Reducing your JavaScript and CSS stylesheet’s file size has a considerable effect on your page load time.
Here are three ways to optimize JavaScript and CSS for faster websites.
1. Minifying Resources: It is the process of removing spaces and other characters that are redundant from your JS and CSS files. Removing them reduces load time on websites and bandwidth usage.
You can manually minify JS and CSS files by combing through them and removing spaces, comments, and new line characters. However, a large site with long files requires optimization plugins. The two powerful plugins for WordPress users are Fast Velocity Minify and Autoptimize.
2. Reduce Render-Blocking: Render-blocking JavaScript and CSS scripts slow down your web pages. Browsers try to load everything at once, including the render-blocking scripts.
Therefore, you need to eliminate render-blocking scripts. First, use PageSpeed Insights to identify which scripts are causing problems. It gives you a list of render-blocking JavaScript and CSS scripts. Use plugins such as WP Rocket, JCH Optimize, or Speed Booster Pack to remove render-blocking JavaScript and CSS.
3. Put CSS at Top and JS at The Bottom: It is good practice to put your JavaScript at the bottom and CSS at the top in the <head> section. It allows the browser to load your CSS first before the rest of the page. Thus, it ensures that users can see the content on your site load.
Related: Best Ways To Increase Site Speed
If you do vice-a-versa, users will see a blank white page until the JavaScript finishes loading. It means that the visual elements of your site will not appear until the JavaScript finishes downloading first.
Optimize Your Key Page Templates For Mobile
As per Statista, in Q3 2020, mobile devices generated 50.81% of global website traffic.
Here are two main ways to assess the usability of your website on mobile devices.
- Mobile Usability Report: It monitors the Mobile Usability report in Google Search Console. This report will flag issues such as content not fitting the screen and text being too small, as well as showing you a list of affected URLs for each issue.
- Google’s Mobile-Friendly Test: Check your key page templates by using Google’s Mobile-Friendly Test. It is a good way of spot-checking individual pages.
Related: Page Experience Update: Optimization Guide
Your site often fails the mobile-friendliness test when links are too close together, the text is too small to read, and the mobile viewport is not set.
Optimize Your Site For Security Issues
Along with load performance and mobile usability, website security also plays a part in determining page experience.
Google focuses a lot on security and weeding out potentially harmful sites from its search results.
Related: SSL Certificate: Secure Your Website
The main security issues arise from sites that contain any malicious or deceptive content. These can be malware, spyware, social engineering scams, phishing, and false information.
Pages with security issues appear with a warning label in search results when a user tries to visit them.
Related: How to Make Website Trustworthy?
One of the best ways to check whether your website has issues that could put your users at risk is to use the Security issues report in Google Search Console. It also provides instructions on how to fix the problem.
Optimize Font
Fonts are large files that take time to load. Delayed loading of fonts leads to a delay in the display of the text. Thus, it increases the LCP metric.
To fix this issue, you can adopt the below steps:
- Avoid Invisible Text During Font Loading: You can also use font-display. It is a swap CSS property that informs the browser that text using this font should be displayed immediately using a system font.
- Preload Your WebFont: A preload of web fonts for above-the-fold content. Use <link rel= “preload”> to trigger a request for the WebFont early in the critical rendering path without waiting for the CSSOM to be created.
Bonus: Which Are The Three Elements of Core Web Vitals?
For the current set of Core Web Vitals, Google has identified three specific focal points:
- Loading
- Interactivity
- Visual stability
Related: Core Web Vitals For Google SEO
There are three new corresponding metrics to measure these focal points:
1- Largest Contentful Paint (LCP): LCP measures the perceived load speed of the page. It means how quickly a page loads and renders all the content to the screen.
The ideal threshold is to keep the Largest Contentful Paint below 2.5 seconds. LCP above 4 seconds is considered poor that will impact the rankings in 2021.
Related: How To Fix LCP Issue: Longer Than 4s (Desktop) or (Mobile)
2- First Input Delay (FID): FID measures the time taken by a browser to respond to an interaction first triggered by the user.
It measures the site’s interactivity and responsiveness. A low FID ensures that the page is usable. The ideal FID is less than 100ms.
Related: How To Fix FCP Issue Longer Than 3 Seconds
3- Cumulative Layout Shift (CLS): CLS measures visual stability. Layout shifts occur when page elements move after being presented to the user. CLS checks the percentage of the screen affected by movement.
The ideal CLS is less than 0.1.
Final Thoughts
Google has announced that the page experience update will roll out in May 2021. By incorporating Core Web Vitals as new metrics, Google will measure speed and website performance with the focus to improve user experience.
Therefore, it is important to start preparing your site for upcoming changes. Use the above five steps to improve those Core Web Vitals scores to offer your visitors a better experience.
