Category: E-Commerce / WooCommerce / WordPress
Everything you should know about Core Web Vitals
Performance and security of WordPress projects – how to plan a secure and Core Web Vitals compatible project?
Since 2021 Google has been announcing many changes and this is not the first time when we deal with the subject of website performance and accessibility. In 2018 Google introduced the Page Speed Update which put more focus on the subject of website performance and the Mobile Indexing Update which made webmasters focus on “mobile-friendliness”. Since then, we all need to remember that when it comes to our website performance the mobile one is the one that matters.
Both the Page Speed Update and the Mobile Indexing Update had some impact on the web, but to be honest not everyone treates them as significant game changers. How about Core Web Vitals? This is the first such powerful tool developed by Google that might impose changes on every creator on the web. Google informed us that Core Web Vitals will gradually become part of ranking factors. The gradual rollout started in June 2021.
Table of Contents:
- What are Core Web Vitals?
- Core Web Vitals explained
- What measurements did Google choose to determine Core Web Vitals?
- How to measure Core Web Vitals?
- Performance and security of WordPress projects – how to plan a secure and Core Web Vitals-compatible project?
- How do Core Web Vitals impact SEO?
- Why should you care about Core Web Vitals?
What are Core Web Vitals?
It’s simply the mathematical or numerical representation of user experience. For those wondering what a good user experience is: it’s a complex idea that embraces website performance and content presentation. Core Web Vitals focus on three basic experiences describing how a user interacts with your website:
- Page loading speed
- Interactivity
- Visual stability
These three factors have correlating indicators:
- LCP (Largest Contentful Paint)
- FID (First Input Delay)
- CLS (Cumulative Layout Shift)
Schedule free online consultation for your project!
Status definitions according to Google
You should evaluate status metrics against the following boundaries:
These norms are pretty strict. Google will certainly evaluate these basic metrics over time and possibly there will be more to add in the future that reflects technology updates and user expectations.
Core Web Vitals explained
CWV report shows how your website performs based on real-world usage data which is the data that comes from the CrUX report. Before we go further let’s now focus on each metric separately to understand better what they are and how Google defines them.
Largest Contentful Paint (LCP)
LCP is the time it takes to render the largest content element visible in the viewport. The clock starts ticking when the user requests the URL. The visible element is the one that has been defined in the viewport in the <HEAD> section of the page. The largest element is typically an image or video, or a large block-level text element. It matters as it tells the reader that the URL is loading.
To make it simple, the LCP scoring is when the largest visible element is loaded on the screen. To calculate the metrics, use Google Chrome Dev Tools or Google Page Speed Insights. These tools take the following elements into account:
- <img> elements
- <image> elements inside an <svg> element
- <video> elements (the poster image is used)
- An element with a background image loaded via the URL() function (as opposed to a CSS gradient)
- Block-level elements that contain text nodes or other inline-level text elements children.
It’s important to remember that images that occupy the entire viewport are not considered LCP candidates. Group LCP presented in the report is the time it takes for 75% of the visits to a URL in the group to reach the LCP state.
First Input Delay
FID is the time from when a user first interacts with your page (whatever interactive element that the user first clicks) to the time when the browser responds to that interaction. The longer it takes for the user to interact with the page the worse the FID level is. Focusing on First Input Delay is vital for e-commerce shops, as it is necessary to load all the cookies that follow the user in action. It is also crucial on pages where the user needs to do something – interact – because this is when the page has become interactive.
Everybody knows the importance of the first impression we make, it’s equally important when we meet people as well as when we build our users’ first impression when they enter our website or shop. When it comes to the web it helps us to get loyal, returning users who become our clients or even brand advocates. What makes for a good first impression then? What to measure and how?
It can take different forms on the web from website design and speed to website responsiveness. It might be harder to measure how visual aspects appeal to our users than to measure speed and responsiveness. First Contentful Paint metrics help to understand how a site’s interactivity and responsiveness add to users’ first impressions.
What is a good FID score?
According to Google, to provide a good user experience, sites should strive to have a First Input Delay of 100 milliseconds or less. To make sure you achieve that for most of your users, you should stick to a 75th percentile of page loads measurement, segmented across mobile and desktop devices.
Cumulative Layout Shift
CLS is the metric that measures the changes of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page. A layout shift occurs every time a visible element changes its position from one rendered frame to the next. In other words, it’s all these cases when you enter a web page and suddenly the content you are watching scrolls down the visible part of the screen because the ad appears above the fold. The text moves without warning and you get lost. Sometimes you want to hit a button and you end up clicking something different and the link moves you somewhere else. Isn’t that annoying?
Google recommends that a good CLS should not extend 0.1 points. How is that calculated:
layout shift score = impact fraction * distance fraction
What are the elements of the Layout Shift Score?
To calculate the layout shift score, the browser looks at the viewport size and the movement of unstable elements in the viewport between two rendered frames. The CLS score is calculated based on two measures of that movement: the impact fraction and the distance fraction. See the definitions below:
- Impact fraction: it measures how unstable elements impact the viewport area between two frames. For example, because of loading additional assets, a visible element moved by 25%, therefore it now takes 75% of the accessible area within a frame. The Impact Fraction is 0.75.
- Distance Fraction: it measures how far a given element moved because of loading additional assets. If an element moved by 25% within a given viewport, it means that the Distance fraction for this element is 0.25.
That is 0.75 x 0.25 = 0.18 – let’s make it 0.2 for easier classification of CLS. 0.2 means that the page Needs Improvement.
CLS significantly differs from other Core Web Vitals as it shows if a page is aggressive, meaning full of ads above the fold. In the recent past, Google punished web pages that were overloaded with adverts – now we have an official measurement that helps to verify when a given website allows for too much advertising.
What measurements did Google choose to determine Core Web Vitals?
In order to determine whether a page passes the Core Web Vitals evaluation, Google declares to only use field data. This means using only real user data. Together with mobile-friendliness and whether the site offers HTTPS or doesn’t have intrusive interstitials, Core Web Vitals have become the basic factors that determine how Google ranks the page experience a website has to offer. The score is a factor in the algorithms deciding how high your webpage gets ranked in search results.
The Core Web Vitals metrics are being constantly tested and improved. E.g., CLS was updated to be more neutral to the time on the page. FID is going to be reworked to become a better responsiveness metric, as well as a new smoothness metric that will measure animations. To make the process of implementing changes tailored to requirements much easier, Google updated its tools for developers to make it more convenient to view basic website metrics and analyze recommended areas for improvement. They updated Lighthouse and PageSpeed Insights, and Google Search Console was enriched by a new special report.
Set up a call to discuss your metrics
How to measure Core Web Vitals
- Dev Tools in Google Chrome
The easiest way to measure Core Web Vitals is to make use of the developer tools built into the Google Chrome web browser. You just need to go to the Performance tab in the dev tools by pressing F12 or right-clicking on the page and selecting Inspect. Once you are in the Performance tab, you click on the Record button to start profiling. It should only take a few seconds to get a timeline with marked the most important points. You can use this data to identify performance bottlenecks and optimize the performance of your site.
- PageSpeed Insights powered by CrUX
Another useful tool from Google is the CrUX. The CrUX is the acronym for Chrome User Experience Report. The main benefit of this tool is that the results are based on real user traffic. Google Chrome users who allow Google to collect anonymous data become the source of information used to create the reports. In the intuitive dashboard, you can see real-time and historical charts. Historical reports are what make the tool more powerful than the Chrome Console itself as you can quickly and easily compare the data every time you make changes on your website.
- Google Search Console reports
Google Search Console reports are also based on field data from CrUX. The tool groups pages by similarity and offers an interesting insight into how performance improvements impact entire categories of websites. You cans asses both here search and page performance in ways other Google tools don’t. It is a popular tool among marketers and developers. There are two Core Web Vitals reports – one for mobile and one for desktop. Each of them provides you with information about the field data for groups of URLs and their performance. A great thing is that you can get information about your entire website instead of just one page.
Performance and security of WordPress projects – how to plan a secure and Core Web Vitals-compatible project?
Now, time to answer the critical question – how to properly optimize your WordPress project to improve your Core Vitals scores? There are various strategies you should consider if you want to plan a secure and Core Web Vitals-compatible website.
The Time to First byte & Time to Interactive
- TTFB (The Time to First byte). It’s the amount of time it takes for a server to receive and process a request from a browser and send the first byte of data in response. TTFB is affected by the speed of the server so it’s crucial to choose wisely where your website is hosted. Also, the metric can be affected by the quality and efficiency of the server-side – PHP code. The lower TTFB, the better the user experience.
- TTI (Time to Interactive). It’s the amount of time it takes for a web page to become fully interactive and responsive to user input. Simply speaking, it’s the time a user needs to actually start interacting with your web page and performing tasks. According to Google, a fast TTI is below 3.8 seconds. To achieve a low TTI you should optimize the performance of your web page so that it loads fast and becomes interactive as quickly as possible. Among the others, removing unnecessary JavaScript code might be helpful – loading unnecessary JS or CSS files before your main content slows down the loading time. You can also try using a CDN (content delivery network) for third-party scripts. This will speed up your LCP time for visitors around the world and reduce TTFB.
Chaching
- HTTP caching. It allows a browser to store a copy of a web resource locally. Therefore, the browser doesn’t need to send a request to the server every time it’s accessed. Using HTTP caching results in reducing the number of round trips needed to load the page. It speeds up how quickly your server can respond which improves the Core Web Vitals of your WordPress project.
- Browser caching optimization. This will address the Serve static assets with an efficient cache policy PageSpeed Insights recommendation. Browser caching optimization means setting the right option for the static files that your browser keeps in its cache.
Images
- Image optimization. Large-size images slow down the page loading speed. If you want to optimize the CWV, you should consider compressing images and using formats that support compression. Keeping your image sizes optimized will speed up your site and address PageSpeed Insights recommendations such as Properly size images and Defer offscreen images.
How do Core Web Vitals impact SEO?
Since 2021, Google has considered Core Web Vitals a ranking signal in its search algorithms. This means that websites with good performance on these metrics (together with safe browsing, mobile-friendliness, HTTPS-security, and intrusive interstitial guidelines) may rank higher in search results compared to websites with poor performance. Core Web Vitals affect both mobile and desktop organic results and their score for no-indexed pages may matter, too. So, if you care about your SEO performance, improving your Core Web Vitals is nothing but mandatory.
Summary: Why should you care about Core Web Vitals?
As explained above, Core Web Vitals may have an impact on your conversion rate, time on site, and bounce rate. They look at how your website performs on a range of web metrics like speed, responsiveness, and the page’s loading time. Although different stakeholders in your company may have different priorities, CWV can bring them all on the same page by focusing on optimizing user-centric metrics and the resulting business growth. If the website isn’t up to speed with regards to its Core Web Vitals it may give priority to your competitors’ offers. The path to good CWV will vary depending on where you are in the performance journey – it may mean grabbing the low-hanging fruit and getting nice results or implementing complex solutions that fix challenging issues. Regardless of the scope, taking care of Core Web Vitals is a long-term investment in the growth of your business.
Are you ready for a Core Web Vitals challenge?
