1. Google’s Core Web Vitals (CWV) Becomes a Ranking Decisive
On Google’s 20th Anniversary in 2018, Google released an article titled,Improving Search for the Next 20 Years, on increasing Page Searches for the Next 20 Years (Google, 2018).
First and foremost in the article, Google indicated a focus on providing for users information needs. Google strives to provide users with the most relevant and highest quality information as quickly as possible. In addition to relevant content, Google is also very concerned with the user experience on search pages. Google wants quality pages that load quickly on Google Search to provide the best user experience for users. To optimize content from SEO, Google suggests fellow publishers to present complete content with structured information and provide an engaging page experience.
Page experience is a set of metrics that Google measures to see if a publisher’s site provides a good experience when a user visits the site. For example, Google tries to understand whether a site can load pages quickly. In the previous article we covered 3 metrics related to page experience which include: LCP (page speed), FID (interactivity), CLS (visual stability).
2. Analyzing Indicators on Core Web Vitals
As we discussed in the previous article, we can use several tools to analyze indicators on Core Web Vitals, such as Google Search Console, Page Speed Insights and Lighthouse Report. In the analysis of the data report, there are several reasons for the lack of LCP, FID and CLS values at a site. This newsletter will cover the causes of missing values on all metrics one by one.
2.1. Most Common Causes of Low LCP Value
a. Slow Service Response Time
The longer the browser receives content from the server, the longer it takes to render on the user’s screen. This causes slow server response. A slow server will negatively impact all page load metrics across your website.
c. Page Load Time
Images, videos, and block text elements that render above the fold have an immediate effect on the LCP.
2.2. How to Optimize LCP
2.3. The Most Common Causes of Low First Input Delay (FID) Values
2.4. How to Optimize FID
a. Deciding or Avoiding Long Tasks
Any scripts that are more than 50ms will be called a long task. Site owners can identify long tasks using Chrome Dev Tools. If possible, avoid long tasks but if that’s not possible, site owners can separate them to reduce FID time. Long tasks can also affect other matrices such as TTI (Time to Interactive).
c. Web Worker Utilization
1. Comlink: Helper library that abstracts post messages and makes them easier to use
2. Workway: General web worker exporter
3. Workerize: Move module to web worker
2.5. Most Common Causes of Low CLS Score
a. Images and Videos without Dimensions
When site owners define image and video dimensions using width and height, the browser automatically allocates space for them during page load. However, with the shift to responsive web design, site owners started using CSS to measure images. If the image dimensions are not allocated, the browser will only know the dimensions of the image or video once it starts downloading the resources of the image. So every time an image or video finishes downloading, other elements will start moving (shifting).
b. Dynamic Ads and Embeds
Similar to images and videos, dynamic website ads contribute a lot to layout changes on web pages. Site owners tend to prefer dynamic ads. Why? because it is easy to install and can automatically run ads on websites. However, sometimes they forget that dynamic ad sizes can vary over time.
c. Injected Dynamic Contents
Dynamic content is common on most websites. They can come in the form of Click to Action (CTA) buttons, banners, forms, related articles, and more that appear within the content. Injected content also has the same problem with others that if no space is allocated, dynamically injected content can also move other elements after loading.
d. Custom Web Fonts
Images, videos, ads, and dynamic content affect CLS because they tend to take up a lot of space. But many site owners do not know that custom fonts can also affect CLS. Therefore we need web-safe fonts (default fonts) that can be read by any browser. However, if the site owner uses custom fonts, the browser must use a fallback or FOUT (flash of unstyled text) font when downloading the font used. Browsers can also use invisible text or FOIT (flash of invisible text) where the browser will not display anything until the font is fully loaded. Both will affect the elements on the web page because the font size can vary.
2.6. How to Optimize CLS
a. Define Image and Video Dimensions
Ensure that each time you add an image or video element, specify the width and height. Browsers will automatically use the height and width set by the site’s web developer as aspect ratios. The web developer can even set the width and the browser will automatically set the height. No layout changes will occur because the browser calculates the image’s aspect ratio using the width and height before loading.
b. Reserve Spaces Using CSS
Ad size may vary when reserve space for dynamic ads, So if a web developer allocates a large space for ads and small ads appear, there will be a lot of white space on the page, but it does not affect CLS as there is space allocated.
c. Optimize Font Loading
Utilize the font display. Browsers will temporarily load web-safe fonts in place of custom fonts while still loading and avoid FOIT (Flash of Invisible Text).
d. Avoid Dynamic Content Over Existing Content
Avoid placing dynamic content on top of existing content, especially above the fold section of the page. But if it’s unavoidable, make sure there’s enough space available or create one for space itself, so it can be run through user interaction.
How to Improve Site Performance
a. Use the Guide on Web.Dev
b. Cloudflare Service Product
Cloudflare is a web infrastructure and website security company that provides content delivery network services, DDoS mitigation, Internet security, and distributed domain name server services.
c. WP Rocket
WP Rocket caches your pages by creating static HTML files and making them easily available to future visitors. It also implements browser caching, asking the browser to store commonly used but infrequently updated files in the local cache memory. WP Rocket can also optimize your site by minifying and combining your site’s CSS and JS files, making them faster and lighter and reducing page sizes.
IMAGIFY plugin can make websites faster by optimizing JPEG and PNG images.
Solution for Core Web Vital Scheme with AnyMind Group
SCase Study from AnyMind Group
In this case study, we take a sample publisher who is working with AnyMind and using WordPress CMS. Before implementing AnyMind’s solution for CWV performance, publishers usually get red for their website’s page experience metrics in Lighthouse. Here are the results:
Total score of 23 with LCP 4.8s (good score under 2.5s), TBT 880ms (good score should be under 100ms) and CLS 0.44 (good score under 0.1).
After using the solution from AnyMind, their CWV increased to 91 scores on the same URL with LCP 1.5s, TBT 70ms and CLS 0.059s. Here it can be seen that there is a huge gap when AnyMind Group implements its solution to publishers, their lighthouse report score increased rapidly from 23 to 91. It has been proven that CWV solutions provide a good experience to their users.