Marketing

Page Load Time "Sweet Spot"

If your site takes a long time to load, you’re going to lose out on way more potential customers and revenue!

Fancy themes look great. Fancy popups may capture a few more emails. But if your site takes a long time to load, you’re going to lose out on way more potential customers and revenue than if you keep your virtual storefront lean. We did a pseudo meta-analysis of various articles and blog posts [1] about page load times, and concluded that the page load time sweet spot is 3 seconds.

Of course, the lower you can get page load times the better, but if you need to shoot for a target then the 3 seconds range is ideal. Around 3 seconds is when user tolerance is still somewhat high — anything past this mark and you hit an inflection point for increasing marginal increase in bounce rate (aka users leaving your site!). With a higher bounce rate comes decreased page views, sessions, product browsing, add-to-carts, checkouts, and ultimately sales. Not to mention the intangible effect of “user happiness”. All around sadness.

But fear not! There are tons of tools online that can help you trim down and get back your site back in tip top blazing fast page loads shape. The following tools are the most popular free services we’ve found, and we include some screenshots to show you how to use them and what to look for.

We’re the founders behind Segments, the one-stop-shop for data science optimizations for your Shopify store. We would love it if you tried us out!

Google’s PageSpeed Insights

PageSpeed Insights gives you a single score to benchmark your site against their aggregate scale; 90-100 is “fast”, 50-89 is “average”, and 0-49 is “slow”. You simply pop in your store URL and get your score. Here’s ours (our mobile page speed needs work!):

In particular, the page load “sweet spot” number we’re measuring up against is under the “Lab Data” section, called “Speed Index". You’ll see we’re at 3.1s, so right around our target.

Based on your score, Google spits out various opportunities for improving and helpfully listing out the files that can be optimized.

A close cousin to PageSpeed is Google’s web.dev, a new product (still in “beta” at time of writing) that provides a more comprehensive report that includes three other facets “Accessibility”, “Best Practices”, and “SEO” in addition to “Performance”. They use the same scale and likely similar backend functions, but you’re going to get different results just by nature of using different tools on different checks.

web.dev gives you the same report as PageSpeed, and you can see here we get almost the same results but a little better in everything (this is because we’re running a [serverless architecture](https://tresl.co/building-a-serverless-on-demand-data-science-solution/) that favors subsequent hits).

WebPageTest

Originally developed by AOL (the guys that sent out CD-roms with free dialup internet offers, anyone?), WebPageTest is old-school but gives a fantastic in-depth look at all the key technical components of your store you can optimize. Again, you just punch in your store URL, and WebPageTest will execute three separate checks and return the median results.

They start out with A–F scores (we got an F on caching our static content… looks serious) and what looks like an X if you’re just straight up not doing something.

From the results section, the number we’re looking for is the “Load Time” or perhaps “Document Complete” Time, which for us is just under 3s (2.879s) and within the sweet spot target range.

Now if you want to get really practical you’ll see on one of the middle menu bars there’s an “Image Analysis” link that takes you to a different tool. We’ll go there and end up at Cloudinary.

Cloudinary

Since the majority of your store is presumably images, here we’re focusing on optimizing all of your image sizes and compression formats. Cloudinary itself looks like an image and video processing tool (no affiliation) but we haven’t used it. Their image analysis tool is pretty great however:

We got an overall C or “Mediocre” score for our landing page which is not great but pretty great if you consider we now know how to improve it! If you keep scrolling down the page you’ll see each and every image analyzed and, the best part, included with an optimized image for size and format.

What we can do now is simply take every single image that Cloudinary optimized for us, download it, and replace our original with our skinny-but-still-legible new one. Make sure to review each one however as in some places you actually do want a high-definition image for certain pages, such as product displays.

Conclusion

We reviewed a lot of the current page load time zeitgeist literature and determined that the sweet spot page load target is 3 seconds. We also reviewed a few key free tools that anyone can use, along with screenshots, to help check and tune up your pages. The biggest and lowest-hanging-fruit optimization for your site is probably images and Cloudinary provides a handy tool to do so.

We didn’t go in-depth in some of the other optimizations and checks you can (and should!) do, such as:

* Compressing and minifying static assets like HTML, CSS, and JS

* Async or deferring Javascript

* Setting browser cache timings

* Using a content distribution network (CDN)

* Testing on a 2G speed connection

But we can do so in another post. Hope you got some valuable info from this post! If you have any questions or comments, let us know in the comments.