Sometimes our Shopify App Analysis service uncovers some dirty code.

We recently found this site taking almost a minute to fully load on mobile… because there were 1,687 server requests ๐Ÿ˜ฑ

For reference: under 100 requests is good for a Shopify site with apps loading. A lot of sites are in the 100 – 200 range. Anything over 200 I’d consider too many.

The Stats

BEFORE AFTER % IMPROVEMENT
Load time (document complete) 11.65 3.67 68%
Fully loaded 51.32 9.45 82%
Server requests (fully loaded) 1687 144 91%

Massive gains all around! ๐Ÿ’ช

Document complete = Time from start of page load until the window load event fires.

Fully Loaded = Time from start of page load until there are 2 seconds of no network activity.

Taking load time from 11.65 seconds to 3.67 seconds on mobile is a huge win for usability.

I included the “Fully loaded” requests because at 1,687 there was clearly a problem, and solving this problem improved all other metrics.

*Usually the site becomes interactive at document complete, while fully loaded is the time after all the extra javascript and app code fills in.

The Screenshots

Before

Tested using webpagetest.org with mobile LTE 12Mbs connection speed.

After

Notes from Paul, the developer on this project

Here are some snippets from Paul’s report, to give you an idea of the process and how he was able to make such huge improvements:

We conducted a very thorough app analysis and didnโ€™t notice any errors coming through on the console or any network traffic containing errors, but app content currently takes up a total of ~38% of your entire site…

A leftover image swap code was loading a lot of additional scripts (this may have been from a previous version). This only seemed to be an issue on the collections pages, which were sometimes taking almost a minute to finish loading [referenced above] but this seemed pretty consistent.

We also removed additional app code from the Pixel perfect app that may not have been properly uninstalled and changed scripted events so that they no longer block the rest of the page from rendering.

To see a sample report and our optimization process check out this post: Speed Boostr Optimization Services โ€“ What to Expect.

How can we make your site faster?

You can run your site through our Shopify Analyzer to see how you’re doing, and learn about optimization opportunities.

If you want us to optimize your site, take a look at our Shopify optimization services.

If you have any questions or comments, drop em below or give us a shout.

May your site load fast and pages convert well ๐Ÿ™