Why is my site failing the Core Web Vitals Assessment on Pagespeed Insight?

Technical Q&A
1

Hello All,

I would like to find out why my site is failing the Core Web Vitals Assessment on Pagespeed Insight, both on Desktop and Mobile.

Core Web Vitals Mobile.png
Core Web Vitals Mobile.png973Ă—890 42.1 KB

Core Web Vitals Desktop.png
Core Web Vitals Desktop.png1050Ă—893 43.9 KB

After viewing on Google Lighthouse (after clearing browser cache), the results were worse, with some of the issues consisting of the images, particularly on the carousel/slideshow at the top of the sight taking up a lot of the loading time.

Furthermore, would anyone be able to confirm if Shopify automatically reduces image file sizes after they are uploaded on the back-end, even if they are PNG or JPEG?

Whenever I check on the inspect tool to download an image, it always provides a WEBP or an AVIF file, so I am wondering if the images really are causing an issue on site speed.

As a final part of helping site speed, I would like to minify the CSS on the back-end, but am cautious as I do not know which areas (particularly on theme.css) could be reduced, and if there is possibility of breaking the website.

Would anyone be able to give some information regarding the site speed and any ways to help improve it?

The site is here: https://toptoys2u.co.uk/

Many thanks to any help!

2

Hi @Toptoys2uHS

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

For the Shopify Speed Issues on your store, you need to Speed optimization.

Few Tips to Speed Up Shopify Site-

  1. Use compressed images
  2. Optimize use of Shopify apps
  3. Implement AMP
  4. Consider Professional Help
  5. Use a single Hero Image
  6. Minify Js/Css files

Regards,

San

1 Like
3

@Toptoys2uHS ,

I understand your concerns regarding the Core Web Vitals Assessment and site speed issues. Let’s break down your questions and concerns step by step:
Core Web Vitals Assessment:

  • To address why your site is failing the Core Web Vitals Assessment on Page speed Insight, you should first identify which specific metrics are causing problems. The Core Web Vitals include metrics like Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). Knowing which one is under-performing can help pinpoint the issue.
  • Since you mentioned that images, especially in the carousel/slideshow, are causing loading time issues, optimizing images should be a priority. Consider compressing and resizing images to reduce their file sizes while maintaining acceptable quality.
  • Shopify typically converts uploaded images to more efficient formats like WEBP or AVIF to enhance site performance. This format conversion helps save bandwidth and load pages faster. However, if the original images are too large, they can still affect loading times.

Image Optimization:

  • To optimize images further, ensure you’re using the appropriate image dimensions for your carousel/slideshow. Avoid using excessively large images and consider lazy loading for images that are not immediately visible on the screen.
  • Review and optimize any custom code or third-party apps/plugins that affect image loading, as they can impact performance.

CSS Minification:

  • Minifying CSS can help improve site speed. You can start by minifying the theme.css file, but be cautious and make backups before making changes.
  • Before minifying, remove any unused or redundant CSS rules. Tools like CSS minifiers and online services can help you minify the CSS safely.
  • After minification, thoroughly test your website’s functionality and appearance to ensure nothing breaks. Pay special attention to interactive elements and responsive design.

Other Performance Improvements:

  • Evaluate your Shopify theme and any third-party apps for their impact on site speed. Sometimes, certain themes or apps can be resource-intensive.
  • Monitor your website’s performance regularly and use tools like Google Page Speed Insights and Lighthouse to track improvements.
1 Like
4

Hi,

One of the warnings on the PageSpeed Insights Diagnostics section is to “Avoid an excessive DOM size”. Your site’s code shows that it’s using Flickity as the image slider, which could have to do with the warning. I would investigate that.

“Furthermore, would anyone be able to confirm if Shopify automatically reduces image file sizes after they are uploaded on the back-end, even if they are PNG or JPEG?”

Yes, Shopify automatically compresses images to improve page load time while keeping image quality.

However, JPEG (AKA JPG) images compress much more than PNGs. So, unless you need a transparent background, you should ensure your images are JPGs.

Your website’s code shows your slideshow images as being PNGs, you should consider changing them to JPG.

Also, check your code and make sure that your slideshow images, the ones above the fold, are not being lazy-loaded. Only images below the fold should be; otherwise, load speed is adversely affected.

“Whenever I check on the inspect tool to download an image, it always provides a WEBP or an AVIF file, so I am wondering if the images really are causing an issue on site speed.”

Shopify will convert images to WEBP and AVIF when your visitor’s browser supports modern image formats, which is what WEBP and AVIF are. Shopify does this in order to reduce file size, which improves site’s performance.

“As a final part of helping site speed, I would like to minify the CSS on the back-end, but am cautious as I do not know which areas (particularly on theme.css) could be reduced, and if there is possibility of breaking the website.”

I believe Shopify automatically minifies CSS now, though I’m not 100% sure if this is done by default or if there’s a setting that triggers it.

Hope that helps.

2 Likes
5

This video helped me understand this issue better: https://www.youtube.com/watch?v=27kDMnUtaXo&t=24s&ab_channel=Shopioso