This algorithm is part of the ranking factor - Page Experience, which is aimed at tracking the quality of user experience on the site. Core Web Vitals is one of the components of this factor. The set of signals in this group also includes:
- Mobile Friendly
- HTTPS
- Better Ads Standards
- User Expirence
Content:
- How to prepare a website for Core Web Vitals
- Why it is so important to accelerate the loading speed of website pages
- Key signals of Core Web Vitals
- How to measure indicators
- How to optimize a website for fast loading — Web Vitals signals
- Conclusions
Why is it so important to speed up website loading times?
With the advancement of technology, the internet, and mobile phones, people have also adapted to changes and increasingly surf the internet from mobile devices. The nature of mobile surfing is such that users are not willing to wait long for a page to load or to deal with an inconvenient interface and immediately leave it. The modern user is very spoiled, and this is quite justified by the fierce competition for customers. Understanding this, Google has decided to encourage website owners to improve their platforms and has created the Page Experience ranking factor. Core Web Vitals are the first pillar on which "Page Convenience" stands.
Here is a simple statistics supporting the optimization of your resources:
| Percentage of the Ukrainian population using mobile devices to access the internet: | In 2019, a study was conducted on traffic distribution across devices. The share amounted to 66% of the total population. |
| Fast vs Slow Websites: | Slow websites are abandoned 70% more often. |
| Percentage loss of conversions due to a 1-second delay: | 7% of conversions are lost. |
| Return of users to the website: | 79% of dissatisfied with loading speed will not return. 44% will leave a negative review. |
| Loading speed exceeding 5 seconds: | Traffic reduction by 50%. |
| Website speed and search engine ranking | Since loading speed is an official ranking factor, websites with low speed are ranked much lower than their competitors with good speed. As we remember, the first position has a CTR of 28.5%. The second has 15.7%, and so on in descending order. |
Core Web Vitals Key Signals
- LCP (Largest Contentful Paint) - evaluates the time it takes for the largest content on the page to be rendered for the user. This could be a banner or another prominent image.
- FID (First Input Delay) - evaluates the time it takes for a user to be able to start interacting with the page. For example, clicking a button or a link. If a user clicks on something and doesn't see any response, it's considered a poor user experience.
- CLS (Cumulative Layout Shift) - evaluates the cumulative layout shift during the page load. In simple terms, it measures how quickly elements on the page stop "jumping" around the screen. Ideally, such shifts should be unnoticeable to the user.
Website speed and search engine ranking
For checking performance indicators, there are numerous tools and services available. However, I recommend using official and verified tools provided directly by Google:
Page Speed Insight: It collects data from Lighthouse and CrUX and generates a comprehensive report with optimization recommendations. It evaluates specific pages.
Chrome DevTools (Lighthouse): Built into the console of the Chrome browser, this tool allows developers to check pages for loading speed indicators. It assesses the overall site's performance rather than individual pages.
Google Search Console: While not the most detailed report, it does show problematic pages on the site.
How to optimize a site for fast loading — Web Vitals signals
It should be understood that each specific website will have its own specific issues and solutions. You can rely on recommendations provided by the reports in the tools themselves. However, I will list the most common "pain points" and ways to address them:
- CSS is an important element of a page that should be loaded as quickly as possible. However, often a large portion of CSS is not used. Sometimes, more than 80% of styles are not used! Solution: Inline all used styles in the code, and load unused styles asynchronously.
- Preloading is a declarative request for fetching a resource, which tells the browser to fetch the resource as soon as possible. The browser sets a higher priority level for the resource to try to load it earlier without delaying the window.onload event. It is necessary to use <link rel="preload"> to prioritize resources that are currently requested later during page load.
- For the main page, this includes the banner image.
- For product cards, it's the main photo
- Eliminate render-blocking resources - If resources are blocking the initial rendering of the page. I recommend embedding critical JS/CSS data into the HTML code and deferring the loading of other resources.
- All CSS files need to be minified.
- Defer unused CSS files. You can use the Coverage report in Chrome DevTools for this.
- Unused CSS styles should either be completely removed or moved to a separate file if these instructions are used on other pages.
- For any CSS that is not needed for the initial rendering of the page, use loadCSS, which applies /rel="preload" and onload. <link rel="preload" href="stylesheet.css" as="style" onload="this.rel='stylesheet'">/
- All CSS styles needed for the initial rendering of the page should be embedded inline within the page's code in the head section.
- All JS files should be minified.
- Unused JS files loading should be deferred.
- Use width and height attributes for images - It is essential to always include width and height attributes in image and video elements on the website. This approach ensures that the browser can allocate the correct amount of space in the document during image loading. Additionally, the expected aspect ratio should be specified in the CSS file for all images.
- Fonts - Firstly, poor CLS performance may occur due to FOUT (Flash of Unstyled Text) where standard text is displayed before custom fonts load. To avoid this phenomenon, it is necessary to:
- Use font:display in font styles, for example font-display: swap;
- Simultaneously use preload for fonts <link rel="preload" as="font">
- Passive event listeners - To enhance performance during page scrolling, use the "passive" flag for touch and mouse wheel event listeners.
- Establish rules for effective cache utilization for static objects - Due to prolonged cache storage, a page can load faster upon subsequent visits.
Conclusions
Do not postpone optimizing the speed of website loading. Right now, you can begin improving your site's performance and reap significant benefits for your resource and your users.
