87% of Ecommerce Websites Fail Core Web Vitals
FitForCommerce Sr. Consultant Kari Zanotto met with Siggy Gudbrandsson, CTO of Guide to Iceland, and Ajay Kapur, Co-Founder & CEO of Layer0 to discuss the importance of Google’s Core Web Vitals. The three discuss how companies can, and should, use these statistics to increase their website’s success.
Ajay sets the scene by mentioning an alarming fact: “In the world of ecommerce websites, only 13% pass [CWVs]. So, if you are passing, that’s phenomenal. If you aren’t passing, the purpose of us gathering here today is to help you pass.”
What Are the Core Web Vitals (CWVs) & How Can you Optimize Them?
CWVs are the three metrics Google has identified as the most important metrics related to the speed of webpages. The three metrics are broken down with tips on optimizing here:
Largest Contentful Paint (LCP)
- What is the largest image above the fold on the page and when does it show up completely?
- This metric is the most important.
- If people do not see this image, they do not feel the site has fully loaded.
- Ajay asks, and answers, “Why is this important?” He says, “There’s a survey out there that shows that the stress that someone feels while waiting for a website to load is equivalent to watching a horror movie.”
- Google says the end of that stress is the LCP
- Less than 2.5 seconds is green.
- How to Optimize LCP
- Full stack, holistic approach to solving:
- Optimizing your server is important. Ensuring content is cached at the edge through a content delivery network is recommended.
- It is difficult to cash API calls (data required for product page) and rendered HTML.
- Make sure images are optimized and text files are compressed.
- Ajay explains, “It’s a holistic problem as it expands to the server, the edge, and the stuff you do in the browser. It takes a lot of thought to optimize.”
- Full stack, holistic approach to solving:
Cumulative Layout Shift (CLS)
- Overall, the premise of this metric is that layout shifts are bad
- Ajay mentions that it is far too common for consumers to scroll through websites and click on a pop-up ad that shifts the layout. This causes stress when someone is trying to go through a page because there are a bunch of things just bouncing around-it’s distracting.
- Less than 0.1 shift is green.
- How to Optimize CLS
- For all things on the page (images, ads, iframes, etc.), try and set the heights of these elements before the content comes in. The goal is for this content to not fill up more than its designated spot or else it will cause a shift, which in turn will negatively affect your CLS score.
- Injected content and web fonts can cause issues, so be on the lookout.
First Input Delay (FID)
- The amount of time before you are able to interact with elements on a webpage (scrolling not included).
- The most straightforward to pass.
- This includes clicking on the search field, clicking ‘add to cart’, interacting with buttons, etc.
- Most sites pass this already.
- Faster than 0.1 seconds is green.
- How to Optimize FID
- It’s hard to fix if not passing, but most websites pass to begin with.
Why are the 3 CWVs Important?
- According to Google, if all 3 metrics are passed users are 24% less likely to abandon page loads.
- The key to these tests is that you can’t cheat – you have to earn it. The scores are aggregates from real customers visiting websites through the Chrome browser. Then, Google generates data to determine the 75th percentile for each of your scores.
Urgent Need for Speed
- Fixing the CWVs will not only improve conversionary revenue, but you will also rank higher – which in turn allows for more web traffic.
- As for many companies going headless, Ajay noted his company found that for the average headless website, their LCP was worse than the traditional website. Ajay says, “15-20% of websites in the IR500 are headless, but on average they are slower than non-headless websites.”
Siggy’s Experience at Guide to Iceland
- Kari asked Siggy, “Which of the three metrics did you start with, and which one did you find the most difficult?” Siggy answered, “When we first started, the CWVs were not a thing. We had a synthetic benchmark, which is great to get you started on your journey to creating a faster website, but when the CWVs went live, we were really excited about it. The most difficult one would be the LCP. The trickiest part was that usually, when you’re a developer, you have hardcore equipment. However, we needed to compare everything to a median mobile device that doesn’t have a fiber optic connection, but a 3G network. So, LCP is what we focused on first.”
- Finally, Kari asks Siggy for some advice he would give someone who wanted to start their journey to achieve similar metrics that Guide to Iceland has achieved. Siggy responds, “The first thing you probably want to take a look at is whether or not you are caching your HTML or rendering it on your server every time. If you have something like WordPress, the default behavior is that it is rendered everytime and takes more than a second. Then, I would use your own phone (try not to use the highest quality phone because that’s not usually the average customer) – count the seconds, have a timer – how many seconds are there until you see something? That will give you hints. I think the holy grail is the CWVs. Google is going to give you a lot of hints on what to improve.”