How to improve Core Web Vitals for your cannabis site?
From the middle of June 2021, new ranking factors called Core Web Vitals have taken effect. Based on these metrics, the search engine will determine the level of user interaction with the site. According to these factors, if the site is of high quality, it means that it is convenient for the user to interact with it. And this influences the ranking of all the sites, including those in the cannabis niche. So, what is Core Web Vitals? How to find errors and bring the site to a state in which it will be convenient for the user to interact with it? Let’s figure it out in this article.
Definition & Indicators
Core Web Vitals include a set of factors by which the search engine evaluates the quality of user interaction with the site. They are three:
- Largest Contentful Paint — It is the time to complete the rendering of the largest element on the page.
- First Input Delay — The factor measures the time that elapses between the first interaction of the user with the site and its response to this interaction, or the delay of the first input.
- Cumulative Layout Shift — It is the amount of time to full stability of the page. Or the time before all page elements are loaded in the specified sizes and stop shifting each other.
Each of the parameters has 3 estimates, or, as they can also be called, zones. They are as follows:
- Good (green zone);
- Needs improvement (yellow zone);
- Bad (red zone).
For a perfect user experience, your cannabis site should be completely in the green zone as per all three metrics.
How to Check Core Web Vitals for Your Cannabis Site?
One of the fastest to check these metrics for your site is to order the audit of your cannabis site from one of the professional SEO agencies in the industries such as MjSeo. However, if you prefer a DIY approach, the convenient and easy way to check metrics for your site is by using Google Search Console. There, you will find the general statistics for your cannabis site. You can also check statistics for every separate page, or if some pages are combined into a group by some parameter, then statistics will be presented for the group.
The second way to learn more about Web Core Vital metrics for an individual page is Google Pagespeed Insights. For each of the parameters, a specific assessment is presented, and there is also additional data on the site loading speed. The tool also provides recommendations for actions that need to be taken to improve site performance.
Let’s take a closer look at each of the factors:
Largest Contentful Paint
It shows the time it takes to render the largest content on a site page. Ideally, it should take a maximum of 2.5 seconds. This will keep the page in the green for this factor. At the moment, the following elements on the page are considered within this factor:
- IMG elements;
- image elements inside SVG;
- video elements (video image is used);
- an element with a background image loaded with URL;
- block elements containing text nodes or child text blocks.
How to improve the LCP score for a cannabis site?
LCP is primarily influenced by the following factors:
- Slow server response;
- JS and CSS with render-blocking;
- Client-side rendering.
To improve this indicator, it is recommended to improve the site loading speed as a whole. In other words, you will need to optimize scripts, styles, and images.
First Input Delay
It is also called the delay before the first interaction, it shows the time that elapses between the first interaction of the user with the site and his response to this interaction. The ideal time for this is less than 100ms. To better understand this indicator, you first need to understand how the site page is loaded.
Usually, the browser makes a series of requests for some resources (often these are scripts or styles), after it has received these resources, it needs to process them in the main thread of the site loading. It is these moments that lead to the fact that the main thread is busy with certain tasks.
The longest delays occur between the first content rendering (First Contentful Paint metric) and the time to interactivity (Time To Interactive metric). The browser cannot give an answer to the user for the interaction while it is busy with some task, it will take some time to complete the task, and after that, there will be a response to the user’s interaction with the site.
Why is only the first input latency measured?
During the first interaction with the site, the user forms the first impression of the site, which has a huge impact on the overall impression of working with a particular cannabis site. The biggest problems with interactivity often occur during website loading. Information on improving this indicator for your site can be obtained from the same Pagespeed Insights, as well as Google Search Console.
To find out how to improve the FID for a specific site, you need to pay attention to all the possibilities offered by the Pagespeed Insights service, as they directly or indirectly relate to this parameter.
As general recommendations for improving FID, the following can be highlighted:
- Reduce the impact of third-party code;
- Reduce your JavaScript execution time;
- Reduce the number of requests and the size of transfers.
Cumulative Layout Shift
It is time to full page stability. The parameter shows the time it takes for elements on the page to load in the specified sizes and stop shifting each other. Ideally, this indicator should not exceed 0.1. This metric is called the Layout Shift Score.
To understand more precisely what we are talking about, let’s imagine the following situation. You have opened a cannabis site. On the homepage, there are several buttons located one by one. You want to quickly click on one of them, make a tap on the screen, and the button at this time shifts down because somewhere above the size of some element has changed. As a result, you tap on the wrong button or in the wrong place at all, and you waste time and are annoyed. This will negatively affect your first impression of the site.
Typically, the movement of elements on a page occurs due to the asynchronous loading of resources or the dynamic addition of elements in the DOM (Document Object Model) to the page above existing content. For example, shifting the layout can provoke the following:
- images or videos that are resized;
- the text on the page for which the font size is changed;
- some kind of module or widget that appears on the screen later than the elements below it.
If the image changes its size, but the rest of the page elements remain in place, then this is not considered a layout shift. What kinds of layout shifts exist?
User-driven shifts
The shift will be taken into account only if it is unexpected for the user. A shift is considered normal if it occurred no later than 500 ms after the user interacted with any element.
Shifts due to animation or transition
If there is some animation on the page or some element changes its position, then it is recommended to use the styles that are not changing the value, for example, width and height, but to apply the transforming property: scale (). And to move an element across the screen, it is better not to use the commands top, bottom, right, left, but to use transform: translate ().
How do you find elements that are causing layout shifts on your site?
The easiest way is Pagespeed Insights. The tool displays all the layout shifts that occur when the site is loaded. If you see any shifts that exceed the recommended value, it is better to eliminate them.
The second option is the Performance tab of the developer tools. You need to follow the same steps as before to get detailed information on page loading. Further, in the Experience section, you will be able to see how many layout shifts have occurred on the page.
How do I improve my CLS score on my cannabis site?
If you want to improve the results of your site according to this parameter, stick to the below recommendations:
- Always use sizing attributes for your images or videos to make room for every element of this type on the page so they don’t cause unexpected movements.
- Never insert content on top of existing content, except in response to user action. In most cases, this will cause the layout to shift.
- Use a transform animation instead of an aspect ratio animation that triggers a layout change.
Final Words
Soon, the Core Web Vitals metrics may play a paramount role in the ranking of sites in the search results. There is still time to get ahead of the competition in your niche. In any case, it is necessary to improve your cannabis site in terms of both content and user interaction with it, and the result will not be too long to come.
We've helped dozens of clients achieve remarkable results by increasing organic traffic and revenue for their online businesses. Let us put our expertise to work for you and help you reach new heights of success.
Andrew High is an experienced digital marketing expert. He specializes in helping businesses within the marijuana industry market their products and services online. With years of experience in creating marketing strategies for cannabis-related businesses, Andrew has a proven track record of success.
