Core Web Vitals recommendations for 2023
Vivek Tank
SEO Specialist | Google Search (Webmaster) Product Expert | Speaker | Noonies Award Winner | Backlink Experts | Blogger | Helping others understand their full potential
Core Web Vitals are factors that will be part of Google’s “page experience” score.
In 2020, core web vitals focus on user experience (loading,?interactivity, and?visual stability) and includes the following metrics:
LCP (Largest contentful paint): LCP measures?loading?performance. LCP is how long it takes a page to load from the point of view of an actual user. It mainly focuses on what really matters when it comes to page speed.
To provide great user experience, websites should try to have LCP of 2.5 seconds or less.
FID (First Input Delay): FID metric helps measure your user's first impression of your website's interactivity and responsiveness. In other words, FID technically measures how long it takes something to happen on a page.
To provide a good user experience, websites should try to have a FID of?100 milliseconds?or less.
CLS (Cumulative Layout Shift): CLS shows how stable a page is as it loads. CLS metric helps you measure how often it's occurring for real users. In other words, CLS measures visual stability.
To provide a good user experience, websites should strive to have a CLS score of?0.1?or less.
Core Web Vital are part of Google's overall evaluation of "Page Experience"
Why Core Web Vitals are Important?
Google make page experience?an official Google ranking factor .
Google also made page experience one of the factors that they use to rank sites in search.
Core web vitals help improve your website's visibility and ranking in browsers, as well as give your audience a hassle-free experience while browsing your page.
Recommendations to Improve?Core Web Vitals?metrics
Largest Contentful Paint (LCP)
As mentioned earlier, LCP measures loading performance. It's observed that most of the websites struggle with LCP issues. Let me share here how we can resolve LCP issues on the website.
Make sure the LCP resource is discoverable from the HTML source
Nowadays, most mobile pages have an image as their LCP element which means they'll need to load images quickly. One solution which we found is to use <link rel="preload" href="...">. It allows the browser to quickly discover & load them.
But if a page needs to wait for CSS or JavaScript to be fully downloaded before the image starts loading it may poor your LCP result.
Make sure LCP is prioritized
So what about non-Chromium-based browsers?
Optimize document and resource TTFB using a CDN
Now, we need to make sure the initial document response arrives as quickly as possible too. Browser can't start loading until it receives the first byte of HTML document response this time is know as Time to First Byte (TTFB).
领英推荐
Best ways to reduce TTFB are:
A CDN reserves website's static content on the server from one side to other side which helps to load pages quicker. Even HTML documents are dynamically generated, CDNs can serve and cache it as well.
According to one research, 29% HTML document requests were served from a CDN.
In short, if you can serve content directly from the edge the performance wins.
First Input Delay (FID)
As I mentioned above FID measures page responsiveness to user interactions. Google is its new Interaction to Next Paint (INP) (measuring clicks, tap, and keyboard interactions made with a page.) metric, possible successor to FID. All of the recommendations below apply equally well to both FID and INP.
Break up/ Avoid long tasks
For any tasks(rendering, parsing, compiling, executing scripts etc.) takes 50 milliseconds or longer, they block the main thread from being able to respond quickly to user inputs.
Always try to do as little work as possible in JavaScript, you can help the main thread quite a bit by?breaking up long tasks into smaller ones . Another option is to consider using APIs such as?isInputPending ?and the?Scheduler API .?
isInputPending?is a function that returns a boolean value. If it returns?true, you can produce to the main thread so it can handle the pending user input. The Scheduler API allows you to schedule work based on a system of priorities.
Avoid/ Remove unnecessary JavaScript
Nowadays, website owners use more JavaScript on their websites than before. This will directly affect responsiveness.
To find coverage tool, select the three dots on the far right of the developer tools window, select More Tools and then select Coverage.
Avoid large rendering updates
Large rendering updates may affect your website's ability to respond to user inputs. For non-visual work, don't use requestAnimationFrame(). It handled during the rendering phase and when too much work is done on this step, rendering updates can be delayed.
Therefore, It's necessary to reserve requestAnimationFrame() strictly for tasks that involve rendering updates.
A large DOM can also slow down your page performance. To avoid large DOM issues, improve rendering performance by simplifying CSS selector. For this, you can refer to Google's document .
The last and important approach is to use CSS containment. CSS containment depends upon CSS "contain" property. It gives instructions to the browser about how to do layout work for containers. Create isolation areas. By creating isolation areas, we can avoid complex layout & rendering work that is not necessary.
Cumulative Layout Shift (CLS)
CLS measures visual stability on web pages. Through CLS one can understand how stable a page is loading.
Set exact height & width on any content
CLS issues occur because of layout shifts. It was caused by unsized images. The best way to fix this issue is to set exact height & width for images.
It is obvious that on websites we can not apply equal size for all the images. Without clear size, the browser initially set height as 0px which may cause noticeable layout shift when the image is finally loaded & dimensions are discovered.
Layout shift is also caused by content that typically loads after the page is rendered. The aspect-ratio property will help you. It allows developers to set exact aspect ratio to images & non-image elements. Developer can set a dynamic width & browser automatically calculate the appropriate height.
What will you do when you don't know the exact size dynamic content?
Use min-height?attribute. It sets the minimum height of an element. If the content is smaller than the minimum height, the minimum height will be applied.
Use Back/ forward cache for all pages
Through back/ forward cache, a browser can load a page instantly. This will help to improve page load performance.
Avoid animations/transitions on CSS properties
Layout shifts occurs when we use animation. Pages that animate any CSS property that could affect layout. If you animate any layout including CSS property, layout shifts will occur. Page animates potentially slow CSS properties.
Absolutely positioned elements that animate top or left will cause layout shifts. So, instead of animating top or left you animate transform:translateX() or transform:translateY(). It won't produce any layout shifts.
Never animate CSS property that requires the browser to update the page layout. Like I mentioned above if you still want to use animation, use CSS "transform" property.
Conclusion
Improving page performance is a difficult task. By focusing on following recommendations you can improve your Core Web Vitals performance in 2023.