Shopify Speed Optimization Service

Shopify Store Speed Optimization

This is a complete guide to Shopify speed optimization service that includes

  • Factors Affecting Loading of Your Shopify Page
  • Enhancing the UI/UX Code/Logic of Your Shopify Site
  • Why do you require a Shopify store speed optimization service?
  • What are the factors to consider to improve the site speed?
  • How to diagnose if your site has a problem?
  • How Google Analytics helps?
Shopify - Image Banner

Does your Shopify Store take time to open?

Don't wait!

There are various Shopify speed optimization techniques that can be applied to speed up a Shopify site. But when we talk about optimization, at HulkApps, we focus on both desktop and mobile views of your pages. We help speed up a Shopify store by working on below major aspects of your pages, to name a few:

  • Tools like GTMetrix, Google Pagespeed Insights, Lighthouse score
  • Resizing and compression of images.
  • Minifying the JS, CSS, and HTML calls, wherever applicable. Identification of buggy CSS and JS elements for render-blocking. Controlling and reducing the number of HTTP calls while the page loads.
  • Minimizing the unnecessary apps installed on the Shopify store.
  • And many more…

At HulkApps, we generally focus on two main factors:

Factors Affecting Loading of Your Shopify Page

If you are aware of certain webpage optimization metrics, then you must have definitely heard about a website's bounce rate (the rate at which your website visitors leave after visiting the first page itself) and the conversion rate (the rate of visitors who complete an intended workflow, like purchasing a product, wishlist items, signing up to create an account, etc.).

A low bounce or conversion rate of your Shopify store generally reflects the poor load speed of your pages, which should be worked upon immediately.

Enhancing the UI/UX Code/Logic of Your Shopify Site:

Mobile devices are everywhere! And that's why you must optimize your Shopify store to render a UI/UX similar to that of the web. Some of the popular techniques include - minimizing the usage of texts on your product showcase pages, putting up the ‘add to cart’ button consciously visible every time on the pages, having a fixed navigation bar, and so on.

Cart coders help professionally to every store owner in optimizing their Shopify pages across both desktop and mobile UIs, and below parameters are worked upon a priority:

  • Optimizing the sliders/pop-ups for touch screens and smaller devices.
  • Identification and conversion of a web page are ‘clickable’ events into ‘tappable’ events for mobile devices.
  • Effective handling of layouts and grids on devices with different screen resolutions.
  • Impact analysis of usage of vector icons over icon fonts.
  • Optimizing the banners and high-resolution image rendering over mobile devices.
  • But, how do we diagnose if your site has a problem?

    People are always in a jiffy, are restless, and don’t like to wait - even a blink of an eye is too much wait time for them. Understanding this fact in mind, one of the computer scientist and speed specialist at Microsoft, Harry Shum, has said via an NYTimes article:

    “Two hundred fifty milliseconds, either slower or faster, is close to the magic number now for competitive advantage on the web.”

    So, the answer may be ‘Yes’ :)

    We have analyzed more than 18+ different factors:

    Defer Parsing Of Javascript

    Using GT Metrix and Google’s Page Speed insights usually mean better websites, but while working with Shopify, we take to go a step further with ‘Defer loading of JavaScript’ warning and place JavaScript between the tags for quicker and better working.

    Browser Cache

    Page speed with browser caching is an important factor for higher Google ranking and we use a special technique that notifies browsers about files to change patterns e.g. every month, every week, etc. This avoids unnecessary browser caching and hence fasten up your Shopify website.

    Image Optimization

    We implement the required PHP accelerators (e.g op-cache) and usage of the optimized web server (e.g Nginx).

    Image CSS Sprites

    We merge all uploaded images with image sprites to lower picture size and cancel out extra space used by repetitive images for better page loading time.

    Usage Of Content Delivery Network (Cdn)

    CDN is the key to faster server-side loading so we use CDN service such as cloud-flare for Shopify stores to bring more visitors to your site and make them stay and explore the website. CDN will also lower the bandwidth of your primary server and save it from DDOS attacks for a safer platform.

    Removal Of Unused Code

    Junking out unwanted codes surely saves bytes worth of space on the server and minimizes the bandwidth used on every page load for optimum and error-free functioning.

    Other Factors…

    • Removable query strings
    • Check bad requests
    • Check characters set in the meta tag
    • Minimize request size
    • Optimize the order of styles and scripts
    • Check CSS @import
    • And more...

    But, how do we diagnose if your site has a problem?

    Before doing anything it's probably wise to do some speed testing and get a baseline measure of your site speed as it stands today. There are hundreds of valuable resources out there but we have no time to think about them all. So here are our favorites!

    PageSpeed Insights

    Google's newly revamped PageSpeed Insights is the first resource to see if there are any problems to address. Now, don't get too overwhelmed from my experience with multiple pages, if you score below 70.

    When it comes to measuring your website’s page speed, Google provides a perfect plan of attack from within the PageSpeed Insights tool.

    Performance indicators

    At the top of the report, PageSpeed provides an estimate that summarizes page performance.

    • 90+ points – this speed is considered fast
    • 50-90 points – shows an average speed
    • Less than 50 – illustrates that you need to optimize the Shopify speed as soon as possible

    Mobile

    Shopify - mobile-image

    As marked in the screenshot above, the Pagespeed score for the mobile device is 17. Similarly, we check the Desktop tab for the Pagespeed score on Desktop.

    Desktop

    Shopify - desktop-image

    No place I've ever reviewed has rated above 80. Google's bar is set very high these days, so a score above 90 is nearly impossible, particularly if you've never done any speed optimization before.

    Just because you've got 60-70 on the test, there isn't really a usability problem that needs to be fixed urgently.

    Now we place the scores as shown below in an Excel sheet. This will help us use these scores as the guideline when once again checking the scores after optimization.

    Not only the scores, but Google Pagespeed tools also point out possible areas of improvement.

    Shopify - Possible Optimizations

    Possible Optimizations suggested by Google PageSpeed insight tool.

    Pingdom

    There are several other resources to evaluate page speed factors but Pingdom is one of our favorites. It offers a relatively quick and easy measurement of the pace of your website. A helpful waterfall of all the user requests will give you some pretty good hints as to what causes such a slow load time.

    Once you put an URL in Pingdom and analyze, you get a result page similar to this:

    Before Speed Optimization

    Shopify - Before Speed Optimization

    After Speed Optimization

    Shopify - After Speed Optimization

    The factors with the least score and highest priorities will be on the top. These are the factors you need to focus on.

    GTmetrix Performance Report

    GTmetrix also offers a quick waterfall analysis of what is being loaded and contributes to the speed of your page. Clicking on each element will give you additional feedback about what needs to be improved.

    You just need to enter the website URL to use the GTmetrix, click the Start button, and wait a few seconds. After that, you can see the score for Page Speed and YSlow Score (a separate service that analyzes 23 different parameters) and comprehensive feedback with suggestions for page optimization measures for Shopify.

    As well as in other similar tools, the test result is displayed in a table with recommendations.

    Pingdom and GTmetrix are non-Google products or non-Google tools, but super helpful as well.

    Before Page Speed Optimization

    Shopify - Before Speed Optimization

    After Page Speed Optimization

    Shopify - After Speed Optimization

    Lighthouse

    Lighthouse, a favorite of mine, is available right in Chrome Dev Tools. You can run a Lighthouse report right in your browser if you are on a web page and you click Inspect Item and open Chrome Dev Tools, to the far right tab where it says Audit.

    Shopify - Lighthouse

    What I love about it is that it gives you some very concrete examples and changes you can make. A fun fact to know is that it will automatically be on the simulated fast 3G, and notice that mobile users are focused on 3G. I like switching that quick 3G too applied because Lighthouse has to do a proper run of that load. It takes a little longer but it seems a little more accurate. Good to know.

    Here’s a visual of Lighthouse with HulkApps:

    Shopify - Lighthouse

    Google Analytics – Site Speed Suggestions

    Google Analytics will provide some extra support to improve your page speed, again. Actually all it does is show the score and suggestions for PageSpeed Insights inside your GA dashboard. This is not necessarily a different speed device on the web page, but it is helpful to see it differently.

    Shopify - Lighthouse

    A great way to use this tool is to filter by time of load or view of the tab. Then you can see which of your pages may require the most support or view frequently visited pages which might need to be enhanced. Analyzing your highly visited pages can quickly show you how you can gain a higher conversion rate when you speed up load times.

    Now to check the scores, first, we identify the store pages where most (more than 90%) of your visitors land. We easily find the data in your Google Analytics’ Behavior >Site Content > Landing Pages report as shown below.

    Shopify - Lighthouse

    For most of the Shopify stores, it will be the home page and collection pages where most of the visitors land. Identify these landing pages for your store and put their URLs on an Excel sheet.

    This will help us to focus only on the important pages of your store.

    We make sure, the speed of all pages matters!

    When you’re testing your site remember, the speed of all pages matters! We so often see people obsessed with achieving a particular Pagespeed score or load time who completely miss the fact that the speed of all your pages matters!

    Depending on the site of your site it may not be practical to test every individual page on the site but at a minimum, we suggest testing at least the top 10 pages of your site as that is where speed improvements will have the biggest impact.

    We speed up your Shopify store to increase conversion

    We are specialized in optimizing Shopify Store and improving page load time. Once you will hire us you will get a very good score in Google page insight and GTmetrix. As you know your sales will depend on how fast your website will load. You have only 3 to 4 seconds to hold your customers on your site.

    Ready to talk?

    We have got a dynamic solution for you. Choose one of our Site Speed Optimization services and we'll take your site from frustratingly slow, to under 2 second load times (and even faster on high quality hosting) with our done-for-you Shopify speed optimization service.

    Do you require a Shopify store speed optimization service?

    To be very honest, in the beginning, when you are all excited to launch your web store with the Shopify platform, everything works great. The pages load blazingly fast, the page transitions are smooth as the Shopify site speed is at its peak. But as your business grows, you tend to add more products, ‘good looking’ themes, tools, high-resolution images, etc. - ultimately eats up all your resources and results in low or poor Shopify page speed.

    According to data published by ‘think with Google’, a pioneer in digital marketing research and trends:

    The neural net, which had a 90% prediction accuracy, found that as page load time goes from one second to 10 seconds, the probability of a mobile site visitor bouncing increases 123%. Similarly, as the number of elements—text, titles, images—on a page goes from 400 to 6,000, the probability of conversion drops 95%.

    Shopify - Benefits Image Banner

    People are always in a jiffy, are restless, and don’t like to wait - even a blink of an eye is too much wait time for them. Understanding this fact in mind, one of the computer scientist and speed specialist at Microsoft, Harry Shum, has said via an NYTimes article:

    “Two hundred fifty milliseconds, either slower or faster, is close to the magic number now for competitive advantage on the web.”

    So, the answer may be ‘Yes’ :)

    We have analyzed more than 18+ different factors:

    Defer Parsing Of Javascript

    Using GT Metrix and Google’s Page Speed insights usually mean better websites, but while working with Shopify, we take to go a step further with ‘Defer loading of JavaScript’ warning and place JavaScript between the tags for quicker and better working.

    Browser Cache

    Page speed with browser caching is an important factor for higher Google ranking and we use a special technique that notifies browsers about files to change patterns e.g. every month, every week, etc. This avoids unnecessary browser caching and hence fasten up your Shopify website.

    Image Optimization

    We implement the required PHP accelerators (e.g op-cache) and usage of the optimized web server (e.g Nginx).

    Image CSS Sprites

    We merge all uploaded images with image sprites to lower picture size and cancel out extra space used by repetitive images for better page loading time.

    Usage Of Content Delivery Network (Cdn)

    CDN is the key to faster server-side loading so we use CDN service such as cloud-flare for Shopify stores to bring more visitors to your site and make them stay and explore the website. CDN will also lower the bandwidth of your primary server and save it from DDOS attacks for a safer platform.

    Removal Of Unused Code

    Junking out unwanted codes surely saves bytes worth of space on the server and minimizes the bandwidth used on every page load for optimum and error-free functioning.

    Other Factors…

    • Removable query strings
    • Check bad requests
    • Check characters set in the meta tag
    • Minimize request size
    • Optimize the order of styles and scripts
    • Check CSS @import
    • And more...

    But, how do we diagnose if your site has a problem?

    Before doing anything it's probably wise to do some speed testing and get a baseline measure of your site speed as it stands today. There are hundreds of valuable resources out there but we have no time to think about them all. So here are our favorites!

    Leave a comment

    Please note, comments must be approved before they are published.

    Cart

    Cart

    Close

    Your cart is currently empty.

    Total