Tech Readers
You are here as you value the online visibility of your business. You have probably already heard of Core Web Vitals from your digital marketing company.
Google suggests consumers are 24 percent less likely to leave a transaction on a website that has all the Core Web Vitals (CWV) in place. So, why not ensure the house is in order? Let’s quickly brush up on the basics of CWV.
Here are ways to track and fix related issues:
Three Core Web Vitals and their significance
The three Core Web Vitals used by Google as user-experience signals are First Input Delay (FID), Cumulative Layout Shift (CLS), and Largest Contentful Paint (LCP).
- LCP is a metric for the time taken by the website to load the initial page content crucial for users. Ideally, it has to be less than 2.5 seconds.
- FID measures the time taken by the website to respond to the user’s action. Google recommends developers ensure the FID remains below 100 milliseconds.
- CLS measures the number of layout shifts that the user might experience while visiting the site. Ideally, it should be 0.1 or less because it affects the visitor’s ability to read the content.
Keep track of vitals with these tools and extensions
Google has made things easy for developers by integrating CWV in several web admins and developers tools, including Search Console and PageSpeed Insights.
Now, you might wonder how Google gathers user-experience data? Well, besides crawlers, Google also retrieves data from Chrome browser elements. Developers get access to these insights and can make improvements accordingly.
- PageSpeed Insights
PageSpeed Insights allows administrators to check the performance of web pages and offers suggestions for improving page speed. With this tool, you can review CWV for mobile and desktop browsers.
- Google Search Console
Google Search Console has a dedicated section that displays CWV for web pages. The report highlights issues found in various areas of the website.
- Chrome Web Vitals
Chrome Web Vitals is an extension that offers a look into the web vitals of websites that you browse.
Administrators can use the same for monitoring changes on a real-time basis while making edits to web pages. The extension can help you analyze your competitors’ scores. It works on data retrieved from Chrome Experience Report and web-vitals library.
These Google tools allow you to keep track of your website’s CLS, FID, and LCP values. Please note that Google Search Console may not show metrics for websites that receive too little traffic.
Five quick ways to fix vitals
- Reducing visual load times by preloading key resource
For a visitor, the page loading is complete only when the main on-page elements are entirely loaded. LCP value is all about the same. The metric identifies the time taken by main page elements to load.
You can use any of your extensions or tools to find the LCP value. The best way to speed up things is using the option of preloading crucial assets.
Did you know? Even a text file can take a few extra seconds to load because the font needed for it is in an external stylesheet.
You must have read about using JavaScript to render pages, reducing initial server response time, CSS, and image optimization. But, do you know the benefits of preloading and pre-connecting?
Do you wish to know how it works? Here’s a simple explanation:
Attributes “rel=preload,” “rel=preconnect,” and “rel=dns-prefetch” can help the browser by showing resources that it can render in the first step.
- Use rel=preload to instruct the browser to prioritize the fold fonts, critical CSS, videos, and images.
- The attribute rel=preconnect instructs the browser to establish a domain connection immediately.
- Lastly, you can use rel=dns-prefetch to point out connections that aren’t significant. The attribute helps in saving DNS lookup time for connections. Digital marketing services firms can assist you in setting up preloading.
- Minimizing long tasks by optimizing main thread activity
FID is the metric that measures the time taken by the website to respond to a user’s click. Several factors can cause this delay. In most cases, long tasks happen to be the common factor.
Some basic steps can help in reducing the waiting times.
Pages often become unresponsive or freeze due to the main thread blockage by pieces of JavaScript.
You can open the Chrome DevTools, and click on Long tasks, highlighted in a red triangle under the Main tab. Open the Bottom-Up tab and take a look at activities that happened during the task. Here, you can track actions that block the main thread.
Depending on the problematic activity, you can choose the fix. Usually, serving scripts in small pieces and code splitting can prove to be common fixes.
- Reserving spaces for embedded resources and images
CLS focuses on the number of page shifts that visitors experience. Not reserving sufficient spaces for page components often causes elements to move around while it loads.
Users often end up accidentally clicking on a different area due to the page shift. Even a cookie consent banner without properly allocated space can end up pushing content down after three seconds from loading. Reserving space for embedded resources, images, and videos can keep CLS in control.
- Improve loading of third-party scripts
At times, the slowness can be due to third-party scripts, including ad scripts.
If you find third-party scripts as the source of the problem, you should consider choosing a different option. Try scripts that are less stressful for the server and more optimized.
- Serve embedded resources and forms over HTTPS
Using HTTP connection for serving content requiring user interaction poses a risk to website visitors. Their data-filled-in forms, as well as payment information on the checkout page, remains more vulnerable. Thus, using HTTPS has become crucial.
Google has incorporated HTTPS as one of the page experience signals. The search giant wishes to ensure user safety while browsing.
Use SEO tools that can crawl your web pages and find out page resources served on HTTP. Make a list, and immediately update the ones used for user interaction.
To sum it up:
Setting CWV in place can help in improving the website performance metrics. Unable to offer a smooth and seamless user experience? The time has come to get in touch with your SEO services provider to discuss CWV.
