This article is also available in:
! Key insights to take away

It’s impossible to have a perfect score in Shopify or PageSpeed Insights

Third-party apps and theme has very negative impact on your store

PageSpeed Insights is good for suggest optimization ideas

List of optimization opportunities you should focus to optimize

Chasing PageSpeed score is a waste of time

First, Shopify speed score is PageSpeed Insights score, they’re based on Google Lighthouse performance metrics. Your score is based on a weighted average of your store's home page, your product page, and your collection page. Shopify score report mobile versions of these pages

You cannot take too literally all of the suggestions from Google PageSpeed because sometimes they are unrealistic or impossible.
For example, it tell you to “Remove Unused Javascript or CSS” and this is very time consuming

You would need to analyze your CSS files, make sure the rules aren’t used on your storefront, edit your files, and do a lot of testing. The time of fixing them is very high but the benefits may not worth it.

If you build a site from scratch you might not have this problem, but if you’re on Shopify I can be pretty sure that you’re not using a customize theme and you’re using 3rd party apps.

Which factors has high impact on your speed score?

Third-party apps

Most third-party apps add additional JavaScript and CSS resources, which Google PageSpeed Insights will flag here as well. In these cases, you would need to contact the app developer for more assistance on how to optimize these files

Theme

Your theme is a key player in your page speed, Some themes are built for performance. Using a faster theme could be the biggest change you make. It’s also a chance to clean your store – leftover code from uninstalled apps could be remained in your current theme.

What PageSpeed Insights is good for?

PageSpeed Insights should be used to provides suggestions on how that page may be improved.

Sometimes it suggest you to optimize problem areas on your site that you can address. For example: Defer Offscreen Images. It means your store is not implemented Lazyloading technique properly.

It might also alert you have a heavy JS code comes from youtube video or third-party apps, which you need to consider whether they’re worth to keep.

What should you do to optimize your store speed?

Optimize image and video
Oversized images and images that are hidden from view can interfere with loading other, more important parts of a page. If users have to wait for large images to load, they might perceive your store to be slow.

Rather than use the default YouTube/Vimeo embed, which adds a huge of resources to a page whether the user plays the video or not, use the little tiny placeholder webpage that is just an image you can click that is linked to the YouTube embed.

Implement lazy loading
Lazy-loading is a technique that defers loading of non-critical resources at page load time.
This technique, while improving speed and performance, also makes the user think that the site is loading quicker than it actually is.

Theme or app features
Certain features, when enabled, might also affect your store speed. For example, some quick view pop-ups pre-load information from every product page when a collection page loads. Loading extra data your customers aren't using can impact your store speed without adding value.

If you think that a feature is slowing down your store, you can take the following steps:

Disable features if they are not being used.

Disable the feature if you don't need it. Consider the balance between online store features and speed.

Minify your JS/CSS
Minification refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser. You should minify your Javascript and CSS resources to improve your page load performance.

Do not use GIF
Animated GIFs are popular on the web for good reason. They provide more engagement than an ordinary image. However GIFs are a terrible format for storing video and are often huge in size leading to slow page load times and high data usage.

With HTML5 video, you can reduce the size of GIF content by up to 98% while still retaining the unique qualities of the GIF format in the browser

Font
Do not use a font that does not yet exist on your customer's computer, then the font has to be downloaded before your text can be displayed. This impacts the time that your store takes to load.

To avoid downloading a new font to your customer's computer, you can use a system font. A system font is a font that is already installed on most computers.

Hope this information would be helpful for you.

Should you need further support, please feel free to contact us via live chat or email us at support@perfectapps.io
Was this article helpful?
Cancel
Thank you!