Kanmi Obasa
March 25th, 2023

Debugging Decathlon's Core Web Vitals Issues

Today, we take a look at one of my favorite places to pick up sporting gear in Ottawa, Ontario. This store has several locations across Canada and a huge store in the St.Laurent area. You can shop on their website here: https://www.decathlon.ca.

In September 2021, Decathlon's website was amongst the top 1000 websites visited in Canada by Chrome Users. We will be taking a closer look at their website's Core Web Vitals. According to the CRuX report for September, Decathlon's Website does not pass the Core Web Vitals Assessment.

Question: What does that mean for them and their competitors?

It depends, on what the goal is and other factors. However, Core Web Vitals plays a vital role in how website's are ranked on Google. Asides the ranking factor benefits, the Core Web Vitals are a set of metrics that help in giving visitors a good online experience.

Question: How is the website performing in terms of Core Web Vitals?

The website's origin has good Largest Contentful Paint (LCP) and First Input Delay (FID) on mobile while the CLS is poor, while on desktop it's Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) needs improvement.

Question: How can these issues be resolved?

On mobile, CLS seems to be an issue with the website's origin. When a user lands on the homepage, they can see from the image below, in the timeline you can see alerts/notifications get injecting into the viewport, pushing the hero image down. Resolving this could have proper benefits.

This image shows LCP and CLS issues on mobile

On Desktop, taking a look at the way the page loads in the network panel of Chrome DevTools, you'll be able to see the reasons why there are LCP and CLS issues. Please find attached picture.

This image shows LCP and CLS issues on desktop

To resolve this issue, the hero image will need fixed height and width attributes. This will pre-allocate a location for it to paint into and will also reduce the shift. Solving this could be a huge bonus. There may be other issues but solving this could make the website pass its Core Web Vitals assessment on Desktop.

Already interested!

Don‘t wait and start now !

Let's discuss ways to improve‘your business on the web.

Knfrmd is a web engineering consulting company with a team of highly skilled Software Engineers, Web Developers, SEO specialists, Graphic Designers, and Project Managers.

© 2024 Knfrmd Web Corp.