Google announced in July 2018 a new ranking algorithm designed for mobile search. Google called it the “Speed Update,” so the online stores that delivers the slowest experience to users will be drastically impacted by this update.

Beyond speed optimization is now one of the most important factors in SEO, it’s also important for the following :

  • Reduce Bounce Rate (the percentage of visitors to a particular website who navigate away from the site after viewing only one page)
  • Better user Experience. 
  • Improve Conversion Rate
  • Mobile responsive.

That’s to say ! if you’re a Shopify store owner and you didn’t optimize your website yet, it’s time to react immediately by following these advises to get better score

1- Reduce The Number Of Apps Installed

Although apps are important for marketing, advertisement, design, new features,… they have a down side; THEY SLOW YOUR WEBSITE SPEED. The issue is that apps load external JavaScript and CSS files, this add more HTTPS requests, moreover those files are in general not minified.

So, it is recommended to uninstall undesired apps for improving your store’s performance, and insure to remove their remaining codes in your theme.

2- Image Optimization:

Images constitute in most of cases more than 50% of a website file size, specially for e-commerce stores.

Not scaled and Heavy PNG format images take much muche space than JPG or JPEG images format, by consequence they take a long time to load up… Read more How to compress images to improve your Shopify loading time?

2.1- Use CSS sprites


Sprites are two-dimensional images which are made up of combining small images (generally footer and payment icons) into one image at defined X and Y coordinates, this will reduce HTTPS requests as well as your website size… Read more How to use CSS sprites To Speed up Shopify loading time?

2.2- Specify image dimensions

Specifying a width and height for all images allows for faster rendering by eliminating the need for unnecessary reflows and repaints as follow :

<img src="https://cdn.shopify.com/s/files/1/2662/1520/files/YOUR-IMAGE.jpg" width="200" height="40" alt="YOUR IMAGE">

3- Minifying JavaScript and CSS files

Minifying Javascript & CSS codes is used to describe the method of removing unnecessary characters, white spaces, line codes, theme developer comments. This reduces the size of the file and helps to load the website faster.
One another method to reduce HTTPS requests is to merge all the CSS in only one file, the same thing for Javascript files…Read More How to Minify CSS to improve Shopify Website Speed?


Tips : Always place Javascript codes after CSS to not to let users seeing blank pages while browser download Javascript

4- Reduce HTTPS requests


Shopify uses a CDN in order to reduce the load on it’s own servers and also to provide the fasted content delivery depending on the users location. However, some themes uses external Javascript & CSS external files to serve their features like (twitter widgets, fonts, sticky elements, …), then your browser has to load the files from external servers which add more HTTPS requests and reduce by consequence your Shopify loading speed.
The solution is literally easy :

  1. Look in your theme codes for the external files
  2.  
  3. Minify and Download the files in Shopify Asset
  4. Replace the external file calling code with the internal calling code

Example :

Step 1: Search for external file

search code
External Javascript file

Step 2: Open the link in a new window and save it in your Shopify asset

open in a new window
Copy the external file
copy the text
Past the content into a TEXT editor like notepad and save the file “button.js”

Step 3: Upload the file into Shopify Asset

upload the file
Online store => Action => Edit code => Assets => Upload a file

Step 4 : Minify the file

If the file isn’t already minified, you can use an online tool like https://www.minifier.org to minify the CSS or/and the Javascript code.
In this case, a minified code has been copied and pasted into “button.js” file

paste the file

Step 5: Replace external HTTPS code with internal one

remove the external code
Replace external “button.js” file with internal file

shopify theme

 

speed up shopify store

Hitting the 98% in gtmetrix tool, the PLAK Shopify theme is the speediest one to boost your sales. DOWNLOAD NOW

Conclusion

When it comes to optimizing your mobile and desktop website speed, there is a lot of technical stuff to consider.

The basic Technics shared in this article should be enough to have a good speed score and to improve ecommerce site performance.

even if you don’t have programming skills, you’ll be able to do many of these optimizations yourself. When it isn’t possible, you can order from a Shopify expert a SPEED OPTIMIZATION SERVICE HERE.


If you have questions or need additional support, please share your requests in the comments below.

Related Posts

  • Minifying codes is literally used to describe the method of removing white spaces between characters, line codes, developer comments, repeated scripts and other unnecessary characters from the source code. This reduces the size of the file and helps to load the website faster. Minifying is applied to almost all the…
    Tags: css, minify, website, speed, codes, file, code, shopify
  • When using speed tools like Gtmetrix, you certainly came across "The following images served from shopify.com should be combined into as few images as possible using CSS sprites." In this article we'll show the advantage of using CSS sprites and how to fix this speed problem. What is the advantage…
    Tags: css, speed, images, image, website, shopify, codes, reduce, theme, loading
  • Images are one of the most important components of every online store and website., and they constitute in most of cases more than 50% of a website file size, especially for e-commerce stores. image optimization is then important to give more speed to your Shopify store, but how to do…
    Tags: images, image, shopify, time, store, load, speed, website