Why is Shopify Speed Score Low?

Why is Shopify Speed Score Low?

Good businesses are fast. There are three big reasons to speed up your website: reduce bounce rate, increase conversion rate and improve your Google ranking.

Here is a list of places where you can improve your load speed on Shopify, from app selection, to coding standards, to image optimization.

The theme engine (that translates your themes liquid files into html) has been rewritten and this “accounts for a 40 to 200 percent improvement in load times on live stores.”

Shopify is an extremely popular ecommerce platform, but Shopify sites often struggle with speed. Shoppers are less likely to make a purchase when a site loads slower than expected, and they are less likely to return to the site.

Have you ever thought Why is Shopify Speed Score Low?

Understanding Page Speed Metrics

Google prefer faster websites hence page speed matters a lot. Even customers also prefer sites that load faster – faster sites have lower bounce rates, fewer exits, and higher conversion rates.

There are several metrics for page speed, including:

• Time to First Byte is how quickly the server responds, with Shopify this is largely beyond your control without a full liquid code audit.
• First Paint is the point where the first pixel renders on the users page.
• First Contentful Paint is when the first page elements appear, like navigation and footer. This one isn’t as important in e-commerce.
• First Meaningful Paint is when the main content is visible. Content further down the page may still be loading, but overall the page looks ready.
• Page Loaded means that all assets including images are present. Deferred JavaScript will begin executing.
• Time to Interactive is important if the page has lots of DOM processing on-load because this slows down the browser and delays user interaction. Generally in e-commerce this should not be an issue until checkout.

Now, it’s really the time to make sure your page speed is faster because Google has announced that various user engagement signals will become official ranking factors in 2021.

How to Measure Speed

Here are some of the tools that you’ll need to measure the speed of your page:

• Pingdom Speed Test
• Google PageSpeed Insights
• Lighthouse in Google Chrome Dev Tools

How to Speed your Shopify Store

Content Speed Improvements

• Images should be size optimized before uploading.
• Use single image on your homepage instead of using carousel.
• Host video on a specialist platform like Vimeo who will optimize the video in the correct format for the device and connection viewing the video.

Shopify and App Theme

• Choose a fast theme or start from scratch with a custom theme built by an agency.
• Combine JavaScript and CSS files and ensure they are minified.
• Keep all marketing tracking code in Google Tag Manager.
• Remove unnecessary apps and audit your theme files to ensure all legacy code added with each app has been removed.
• Audit how apps install themselves. Often there are speed improvements you can make here, conditionally include apps and their JavaScript so they only load when they are needed.
• Be careful with UGC apps, some will load the images at full unoptimised size from the social platform.
• Avoid apps for features that can be easily implemented directly in your theme by a developer. 
• Make a backup of your theme before installing any app so you can quickly roll back if the app impacts your performance.

Code Improvements

• Quick views on PLPs should not be pre-loaded – lazy load these as needed when the user clicks quick view.
• Use Shopify’s Theme Inspector to profile and audit your liquid code to find ways to optimize and speed up your code
• Watch out for liquid loops. Lots of loops will make your code slower, especially with large catalogues. The Theme Inspector will help you identify these. Use the break command to step out of a loop when you have the data you need.
• Use responsive images that make use Shopify’s image-size URL parameters to request suitably sized images.
• Use lazy load so that pages are ready to use, this will speed up your Time to Interactive. Use Shopify Liquids image size properties to let the browser know the height and width of the images to avoid Content Reflow.
• Remove links to assets that are 404ing. Pingdom speed test shows you this, as well as other assets that are slowing the page.
• When using iconography and images to structure your site, utilise CSS image sprites so that only one image file is downloaded.
• Audit unneeded features and CSS. Purchased themes come with several feature options, may you will never use. Aim to remove the overall size of page DOM and CSS.

Bespoke Themes are Faster

The Shopify Theme Store provides a wide variety of impressive themes which are customizable for bulk use. Additionally, they come with additional code and configurations that you will not use, due to which your CSS and Theme files bloats and in result your site speed will be affected. Custom designed theme is what makes your business attractive and standout.

Nothing is going to compete with a custom designed theme for your business. That’s what Xperteria do, have a look at some of our recent work and get in touch to discuss further.

Wrap up

Now you must have understood Why is Shopify Speed Score Low?. Page speed optimization is a continuous process. You need to regularly check the page’s speed scores and note them to keep track of your page’s performance. Start with these easy and practical tips for immediate improvements in page loading speed for your website.