Page Load Time "Sweet Spot"

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 (as in, stay under this time!).

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. In this post we will go over a few of the most popular free tools we’ve found to measure and optimize page load speeds, including some screenshots to show you how to use them and what to look for.

We’re the founders behind Segments, your 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!):

pagespeed score

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.

pagespeed lab data

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

pagespeed opportunities

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

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 that favors subsequent hits).

webdev speed



GTmetrix

GTmetrix provides another simple yet comprehensive UI that combines Google’s PageSpeed and Yahoo’s YSlow to give you both views and recommendations. You’ll see below we scored quite high on both measures with a 1.5s page load time (though this test was actually run after we optimized some images.. more on that later). They also provide a nice visualization of the “Waterfall” of sequential calls when a user first hits your site, and how long each call takes. If any look like they’re taking a particularly long time, it’s a good place to start trimming.

gtmetrix overview

gtmetrix waterfall



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.

wpt score

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.

wpt results

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.

wpt image



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:

cloudinary image analysis

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.

cloudinary image example

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.

References



We’re the founders behind Segments, the best customer analytics app for your Shopify store. Our mission is to democratize data science access to the millions of online stores and give ecommerce back to the people. We'd love for you to check us out to see how we can help you optimize your store and grow sales!