Optimizing speed is crucial for both online and offline events. In today’s fast-paced world, even a slight delay in messaging, responding, or browsing can negatively impact user experience and result in decreased sales, orders, and conversions. Speed not only affects user experience, but it also impacts SEO.
We are familiar with the elements that impact website speed and how to optimize them. However, some factors such as the user’s network, browser cache, and server cache are beyond our control and play a role in determining a website builder’s speed quality.
As we can see from the graph every delay in the second of loading there has been tremendous growth in the bounce rate. So that’s why optimizing the website is crucial. Shopify has provided the best services that can respond quickly from its side.
Shopify is known for its quick response to user requests. On average, when a user accesses a website hosted on Shopify, it takes around 300-400 milliseconds for the first byte of information to be displayed on their device. However, the loading of scripts, such as themes, apps, and iframes, can slow down the display of main content. The speed at which these scripts load plays a crucial role in determining the overall speed of the website.
Things which can make Shopify website Slow & How to Improve them.
Themes
Themes are the first things added while setting up a store. Themes are made of code elements such as HTML, CSS, JS, and Liquid code. After installing the theme, users can access its files and make edits.
If you lack technical knowledge, it is advisable not to edit the code. Instead, consider hiring a developer or contacting the theme developer for advice on improving speed.
If you are already using a theme, perform a speed audit. This audit will provide information about unused CSS/JavaScript, etc. that can be removed or minified. The following screenshot was obtained after conducting a speed test on a desktop using Google Page Speed Insights. The screenshot shows opportunities for improvement in speed.
Speed test for desktop
Images/Videos
After setting the theme, the next step is to add products to the store. If the product has many variants, more images are required, which can slow down the site. Videos with larger sizes will also decrease speed.
To add a video to the product page, it’s better to embed it instead of uploading it for faster loading. Embedding options from YouTube/Vimeo can offer many options to reduce quality and speed. High-quality images take up more space and compromise speed. If high-quality images are necessary, consider using JPG/WebP formats for smaller file sizes with good quality.
Fonts/Gif
After uploading product images/videos next step is to write about the product. While writing about products, users may use fonts, animations, gifs, images, videos, and tables.
It’s not recommended to use a new font as it requires downloading on the user’s device hence will load slowly. Instead, use a commonly used web font which might be already downloaded on the customer’s device and will display faster. Shopify has system-generated fonts that are commonly present on most of users’ computers.
Avoiding unnecessary animations, sections, repetitive images and videos is crucial for improved performance.
APPS
After writing descriptions, the next step for users on Shopify is to add features to the store by installing apps. These apps add code to the theme to provide these features, causing the file size to increase with each additional app.
It’s advisable to remove infrequently used apps, and if an app offers many features, disable those that aren’t needed. Uninstalling an app should be followed by removing its code from the files. For help, consult the app developers or hire Shopify experts.
Using apps that perform multiple tasks reduces the need for multiple apps. Examples include:
One – it’s an app that provides 18 features like social proof, Upsell, Pop Ups, cart recovery, email marketing, SMS marketing, etc. The best thing about this app is that it is free of cost.
Vitals – This is an app that offers plenty of features like product reviews, Visitor replays, Upsell, Related products, a Sticky cart, etc.
Lazy Load
A website with large content or files takes longer to load and creates a poor browsing experience. Lazy loading can solve this problem by loading only the first content the visitor sees on the website, and as they scroll, further content is loaded. The full content is not loaded until the user scrolls down.
Lazy loading is an effective way to keep visitors engaged from the start and improve their experience by increasing their time on the website.
Mobile Speed
After analyzing thousands of Shopify websites on both desktop and mobile, the average Google Page Speed score was found to be 73 for desktop and 35 for mobile. Thus, websites should be optimized for mobile devices for best performance.
To improve mobile speed, installing AMP (Accelerated Mobile Pages) pages is recommended. AMP pages were launched by Google and other companies to speed up websites on mobile devices and AMP pages be accessed via Shopify apps.
The Shopify website was tested on desktop/mobile and more red lines were shown as unresolved issues on mobile compared to when it was tested on desktop devices.
Speed test for mobile
Auditing & Testing speed tests
Regular auditing and testing of websites is crucial for optimizing website speed. Each new feature added or removed can result in unused files, so regularly removing them helps maintain speed.
Yes, regular auditing and testing is important for optimizing website speed and removing unused files from new or removed features helps maintain speed.
Shopify provides reports on the speed of online stores, including metrics on how the speed is calculated and how the store performance compares to other Shopify stores.
There are Shopify apps that help perform auditing & help optimize the store speed. Again look for those apps which have multi features.
Shopify speed apps
Note: If you have plenty of URL redirection on the websites. It will take more time to get the first byte as it needs to go through many servers to fetch the information.
Declan Kingston mainly works around strong Data to create powerful visuals, complex graphs to make the right decision for companies. He has been working in this field for over 8 years, has a strong knowledge of eCommerce platforms and website builders. He has worked with Ethereum and Looker Data Sciences, Inc. (now part of Google Cloud).
