Tips for improving Google Core Web Vitals

How to improve CLS (Cumulative Layout Shift)

Cumulative Layout Shift measures unexpected shifts on your website which, among others, may lead to generating unwanted misclicks. Here is how you can avoid them:

• Save enough space for dynamic content, like ads (reserve it in containers); otherwise, it will surely lead to unexpected shifts. Additionally, when it comes to ads, images, and video elements – don’t forget to incorporate width and height size attributes; another option is to use CSS aspect ratio. This way, you will be sure that adequate space has been left;
• Make sure you meet the criteria for inclusion in the back/forward cache (bfcache). This is rather a half-measure, as it may still result in the first page load experiencing layout shifts, but users won’t see the same layout shifts when they navigate back through the pages;
• Sometimes, when the browser has already downloaded the HTML but has not yet downloaded the resources, two situations may occur: FOUT (Flash of Unstyled Text) and FOIT (Flash of Invisible Text). In the first scenario, the text is displayed using the default font; in the other, the text is hidden. In order to avoid both situations, use specific tools like the font-display property in CSS or the Font Loading API, thanks to which it is possible to determine the priority of loading fonts.

How to improve INP (Interaction to Next Paint)

INP is a relatively new metric that soon (in March 2024) will replace First Input Delay (FID). Both of them help you assess your web page responsiveness, but the new one from a broader perspective, as it tells the average duration of every click, tap, and keypress that leads to the next screen update. We prepared some tips to make your INP score satisfactory:

• Locate the problem in the lab environment using Console Logging (available in Web Vitals Chrome extension) or add an INP JavaScript snippet to your code in order to see the performance of each individual interaction in real time. This way, you can recognize the source of the issue – whether the problem lies in input delay, processing time, or presentation delay;
• Try to minimize input delay, for instance, by dividing long tasks into smaller ones or by steering clear of using repeating timers that initiate excessive work on the main thread;
• When it comes to event callbacks, try not to create extensive and intricate page layouts, and refrain from causing layout thrashing;
• Reduce presentation delay – it may vary according to the intricacy of the page. What’s important here is that by prioritizing above-the-fold content, crucial elements can be promptly rendered!

How to improve LCP (Largest Contentful Paint) and FID (First Input Delay)

To assess your website’s loading speed, consider utilizing the metric known as Largest Contentful Paint. First Input Delay, on the other hand, can help you measure your website’s responsiveness. Contrary to INP, FID only tells the time of delay in processing the first user interaction with a given page. So, it doesn’t take into account the entire event duration, from interaction to screen update. To optimize the LCP and FID metrics, you can take the following steps:

• First of all, reduce server response time by utilizing these methods:
  • Ensure that your server is not overloaded,
  • Direct user requests for web content to servers within the CDN’s (Content Delivery Networks) network instead of the origin server,
  • Keep copies of static HTML files in a cache, which is a temporary storage area,
  • Utilize service workers to cache web pages,
  • Initiate network connections in advance;

• Additionally, minimize JavaScript blocking time:
  • Remove unnecessary characters from the JavaScript code and reduce the file size,
  • Reduce unused JavaScript,
  • Use polyfills only when needed. Polyfill is a code that allows adding or modifying new functions in environments that don’t originally support these features,
  • Eliminate unused code,
  • Implement immediate loading using the PRPL pattern;

• You should also consider reducing CSS block time:
  • Remove unnecessary characters,
  • Use polyfills only when in need,
  • Delete unessential stylesheets,
  • Don’t use too large background images;

• Also, to improve your website’s LCP score, reduce the time of loading elements. Here are some helpful tips to improve it:
  • Optimize and compress images and text files,
  • Optimize loading speed by preloading essential assets,
  • Prioritize resources to let the browser know which resources to load first by using <link rel=”preload”>, <link rel=”preconnect”>, and <link rel=”prefetch”>,
  • Use Content Delivery Networks – it’s usually best that a higher proportion of your website content is distributed through your CDN, as it lets the user download files from the server closest to him, which shortens the page loading time,
  • Use Network Information API so your website adapts to different internet connection qualities,
  • Store and save web pages in a cache with the help of service workers,
  • Use server-side rendering instead of the standard request-response model,
  • Preload webpage elements for web crawlers;

• To get better FID scores, you have to reduce JavaSript execution time. Here is how:
  • Divide long tasks into smaller ones,
  • Enhance the page’s preparation for interactions, such as minimizing the influence of third-party code,
  • Store and save web pages in a cache – use service workers.

Core of your performance

Core Web Vitals are certainly metrics to consider when carrying for your digital content. But it’s worth considering CWV, also when it comes to digital advertising and monetization processes. After all, the better users’ experiences with your website, the higher the generated ad revenue! As a Premier Google Certified Publishing Partners, we can help you implement proven user-friendly tactics seamlessly to ensure your monetization efforts succeed. Our optAd360 AI Engine technology incorporates Core Web Vitals, so when creating or complementing the ad layout of your website, it will ensure that both crucial aims will be fulfilled: your website will provide a great User Experience while also generating impressive income for you to enjoy!