15 Feb
Shopify speed depends on many factors. Without a doubt Shopify makes it easy to build a website. In the starting all new Shopify themes look shiny with super amazing loading time. But once you start customization, the speed starts to drop down.
If you remove those extra customizations for increased speed, you will not able to get all features that Shopify provides. Then, your store will look like a plain store but with a better speed which is not desirable. Hence, we need some strategical techniques, by which you can get both speed and features.
1. Compressing Images
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. Shopify allows you to add the following image formats:
- JPEG or JPG
- Progressive JPEG
- PNG
- GIF
Image compression is important and a necessity for faster loading web pages. While doing image optimization, make sure your images are an acceptable size and do not add too many images on a single page. While performing image compression, don’t forget the quality of the image.
Also, remember to optimize your images. There are lots of free tools to optimize images. Once all the images are optimized, the page load time automatically improves.
2. Theme
Use a fast responsive theme for your website. Because, website’s speed mainly depends on the theme you are using, so before you install a theme it is always recommended to check the following:
· Look for a fast and responsive theme.
· Check for an up-to-date copy of your theme and check the live preview of the theme. Run theme preview page through Google PageSpeed Insight and see the suggestions to make that page faster.
Once you have chosen a theme, remember to keep it up to date.
3. Manage the installed apps
When you install an app to your store, the app adds some code to the theme. Some code can be removed or reordered to improve your online store’s performance. Also, you can disable app features that you don’t use.
Majority of the apps that are downloaded through Shopify app store add some JavaScript/CSS files to your store. Even if you are not using the app, the JavaScript/CSS files are running in the background, and make your site performance slower.
Moreover, there might be some apps you just tried out and forget to delete. Hence, you should go through your store and remove the apps that you are not using. Doing this will boost the speed of your Shopify website.
4. 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:
· Use a heatmap tool to see if customers are using certain features. 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.
· Consult your theme and app developers and ask if they are preloading data.
· Hire a Shopify expert for further assistance.
5. Reduce the HTTP Requests
Use HTTP Requests Checker tool by GiftOfSpeed to find out how many total HTTPS requests your page makes. You can reduce HTTP requests by doing the following:
- Combine & inline your CSS scripts.
- Inline smaller JavaScript’s.
- Combine all JavaScript’s.
- Minimize the use of design & functional images.
- CSS image sprites.
- Convert images to Base64 code.
- Limit the number of social buttons.
Note: Some JavaScript files depend on others to load first. So, copy and paste them in the order in which they were included in your theme. Make a backup of your theme first, so if things break after merging all files into one, you can revert to the old version.
6. Don’t use sliders
Sliders have been popular for a while, and people typically add 5-6 high-quality images to the slider, which increases the overall load time of the website. Research has shown its time to ignore them completely.
Some interesting Stats why we should ignore Sliders
- Users do not click on sliders, only 1% of people actually click on a slider. – Source
- Sliders/Carousels Annoy Users and Reduce Visibility. – Source
- Sliders/ Carousels are bad for SEO. – Search Engine Land
- Sliders are not good for mobile. – Source
- Slider push down your content (Page layout algorithm improvement). – Source
- Sliders can Hurt SEO. – Source
Instead of a slider, use a single, high-quality Hero Layout image with a clear call to action. Hero image layout means a large web banner image, prominently placed on a web page, generally in the front and center which gives an overview of site’s most important content.
7. Fonts
You can choose from several fonts available for the text in your online store. However, if you 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 will impact time that your store takes to load.
Therefore, 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.
You can select a mono, serif, or sans-serif font family. You can still use font styles, such as bold or italic, when you use any of these font families. The font that displays on your customer’s computer depends on their operating system. Below are some examples of the fonts that might be used to render text when you select a system font family:
- Mono: Menlo, Consolas, Monaco, Liberation Mono, or Lucida Console
- Sans-serif: BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, or Helvetica Neue
- Serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, or Source Serif Pro
8. Make your page lightning fast with AMP
Accelerated Mobile Pages (AMP) is an open standard framework designed for any publisher to create fast-loading web pages on mobile devices.
More than 50% of shoppers buy from mobile devices, so it is important to make sure your website is mobile-ready and load quickly. Hence, with AMP (Mobile Accelerated Pages) technology users can access your website quickly on mobile devices.
In Shopify, you can easily generate AMP pages for your site quickly and efficiently with FireAMP or RocketAmp Apps. Both these Apps have an over four-star rating on the Shopify App Store and improve your page loading time on mobile. Otherwise, you could consider creating the Shopify API to develop these AMP pages.
Tools to investigate your Shopify website speed
Below are tools you can use to investigate your online store’s speed
Lighthouse
Shopify’s Online store speed report uses Lighthouse to measure the speed of your store. You can run your own Lighthouse report using Google PageSpeed Insights to view more detailed metrics for pages in your store. To learn about what these metrics mean, refer to the Google Lighthouse performance scoring documentation. You can also hire a Shopify expert to help you understand the metrics and suggest improvements.
Shopify theme inspector for chrome
The Shopify Theme Inspector for Chrome is a profiling tool that uses a flame graph to display Liquid render performance. This tool helps you to identify the lines of code that slow down pages in your online store.
Wrap up
For anyone looking to succeed with an online store, Shopify site is for you. However, like every other website, a Shopify site needs to be optimized for high page load speeds. A slow Shopify site will repel users and severely hamper traffic, revenue potential, and credibility.
Start with these easy and practical tips for immediate improvements in page loading speed for your website. If still facing issues contact us to get an optimized version of your website.