Monitoring your Shopify page speed just got 10x easier

Monitoring your Shopify page speed just got 10x easier New app allows you to monitor your Google PageSpeed Insights hourly and send alerts based on key targets. Faster page speed is one of the most underrated optimizations a brand can make to their e-commerce shop. that page speed is a factor in mobile search rankings. , a 1-second decrease in page load time can increase conversion rate by over . A 1-second page load increase can increase bounce rate by over . These gems should be enough to keep you up at night — well at least until you’ve done everything you can do to optimize your page speed. Google openly states According to Akamai 20% 50% Many popular Shopify e-commerce stores are dreadfully slow. Let’s start with a simple list of best practices to use when considering our page speed optimizations, then let’s analyze the performance of some very popular shops. I just launched my second Shopify app called . allows you to track your Google PageSpeed Insights over time. Google’s PageSpeed Insights is a great tool for marketers and developers alike. However, it is cumbersome to use and can be very difficult to digest the complex data that they provide. improves the experience with Google’s PageSpeed Insights in the following ways: PageSpeed Monitor PageSpeed Monitor My new Shopify app Just add a url and start monitoring. So easy. Google’s PageSpeed Insights is a massive pain to use manually. Their service takes time (usually 10+ seconds), and you have to paste one url at a time. Not fun if you want to monitor a handful of pages that you want to monitor continuously. Makes it easy to use. The language used in Google PageSpeed Insights is confusing. They use ‘developer speak’—I might even argue that their labeling language is too technical for most developers. Greatly simplifies the interface and language used to describe different factors of performance. super You can check your page performance every hour. This is great for teams who push a lot of code, or update imagery very often. Sometimes things can get out of control without your knowledge. Provides hourly monitoring. If you are monitoring your Google Score, or page load speed, or making mobile optimizations, you can set alerts per device type and we will email you all the latest data every hour. Provides conditional alerting on all of your important performance measures. You are probably spending a lot of money on digital marketing, so it’s essential that you monitor the page speed of your competitors. Page speed influences bounce rate, time on site, engagement and conversion—so if your page speed is faster than your competitors, you have an immediate competitive advantage before the complicated marketing and branding games begin. Keep an eye on what your competitors are doing. Shopify Optimization Checklist Always use to generate your images and always explicitly specify the smallest file size possible. This is important to remember on content pages and blog articles where you use the Shopify admin to add images. *Do not select “Original” size unless you know your image has already been optimized to a maximum file size. Shopify’s URL Filters Always optimize images before you upload to Shopify using JPG file format with 50–70% quality compression. This can result in massive savings. PNG is by far the least efficient file format for photographic images. This is a silent killer on many Shopify stores. Compression and resizing are two completely different things. Shopify does not compress your images, they only resize your images. If you have a homepage carousel with full-page images, limit the number of slides to 2–3. Every full page image will cost you big on page load, so be careful. Lately I have been questioning the utility of slideshows altogether. 1) They are annoying to wait for, 2) they usually cost the visitor clicks instead of scrolls, because the visitor gets very impatient, and 3) they bloat the total page transfer size. Finding, clicking and waiting for a slideshow image is a more expensive transaction than a scroll. We also see many of the slideshow libraries preloading all images on page load, which can be very problematic for page speed performance. much Do not design for the 2% of users with huge monitors! Your users are most likely on their phones, or on an average sized laptop (“most likely” means 95%+ likely). Just because your creative director and brand owner have 27" monitors, please resist the temptation to increase the resolution of all your images because they look a little pixelated on a giant monitor. Remember that you don’t buy your own products, you just look at them every day! Lazy loading images can be a good strategy for page load optimization. However, the SEO impact of the various lazy loading libraries is not entirely known. Make sure you do your research. There is good information out there, just need to search deep. Minify your Javascript only when it’s convenient. Generally speaking this doesn’t save much. Most of what we see with slow Shopify stores is usually improperly optimized images, or extremely bloated Javascript files (regardless of minification). Check the network panel in your browser to see if there are any duplicate Javascript requests. This is more common than you might think. For example, Shopify has built-in Google Analytics support. Many shops enable this and also paste duplicate code into the head of their theme. I see this a lot with Facebook scripts as well. Only load Javascript files on the pages where specific scripts are used. For example, if you use a slideshow on your homepage, don’t load that script on every page. Likewise, if you use a zoom feature on your product detail pages, don’t load that script on all pages. Let’s look at some popular Shopify stores. Disclaimer: The data below is from the time of writing. Allbirds ~ Mobile: Google Score 5-20 ~ Mobile: All Page Elements Loaded And Visible 14 seconds ~ Mobile: Page Is Fully Interactive With All Javascript Initialized 24 seconds ~ Mobile: Total Page Size 5 MB ~ Desktop: Total Page Size 2.8 MB You can see that four of the six largest payloads on their mobile homepage represent 3.8 MB of javascript. This is pretty staggering. I suspect they are doing something fancy with their slideshow that skews this a bit, but with a total page payload of ~ 5.2 MB, there is a lot of room for improvement. Interestingly enough, their total desktop payload is only ~ 2.7 MB. Smells like something is a bit rotten in the back of the fridge. Allbirds top network requests Also you can see that their mobile page load speed is VERY unpredictable. Could it be that one of their service providers has issues with server latency? Allbirds unpredictable mobile page load speed Parachute Home ~ Mobile: Google Score 10 ~ Mobile: All Page Elements Loaded And Visible 13 seconds ~ Mobile: Total Page Size 3.6 MB ~ Mobile: Page Is Fully Interactive With All Javascript Initialized 25 seconds Like Allbirds, Parachute Home has very unpredictable page load performance. Parachute Home mobile page load very unpredictable The most concerning component of their page load is how long it takes for all javascript to be completed and initialized on mobile. At an average of almost 25 seconds, this could be due to a slideshow carousel with inefficient code or perhaps a service provider that has a faulty or slow endpoint. Parachute Home slow mobile page initialization October’s Very Own ~ Mobile: Google Score 60 ~ Mobile: All Page Elements Loaded And Visible 3.8 seconds ~ Mobile: Total Page Size 1 MB ~ Mobile: Page Is Fully Interactive With All Javascript Initialized 8 seconds By far the best performing Shopify store on our list. Across the board, October’s Very Own should serve as a model for page load speed on Shopify. Their site is dead simple—likely too simple for the taste of most brand owners or creative directors. However, their page load speed is really great, and the data seems to indicate that they have a supreme competitive advantage before the marketing and branding games have even started. They load only ~ 1MB of data on their homepage. This is fantastic and very rare for a popular e-commerce shop. October’s Very Own only loads 1MB of page data All of their mobile page elements are loaded and visible in ~ 4 seconds. This puts them in the top 15% of all sites. October’s Very Own mobile pages speed is in top 15% of all sites Tanner Goods ~ Mobile: Google Score 14 ~ Mobile: All Page Elements Loaded And Visible 20 seconds ~ Mobile: Total Page Size 5.1 MB ~ Mobile: Page Is Fully Interactive With All Javascript Initialized 33 seconds Tanner Goods is on the very low end of page load performance for all measures. The two components that are particularly worrying are the total page size in MB and the time to fully loaded and initialized javascript. They load more than 4.5MB of javascript on their homepage. This is something they would want to look at very seriously. Tanner Goods loads 4.5MB of javascript on their homepage If we look at how long it takes to load and initialize all mobile javascript at ~ 33 seconds, again this is something to look at very seriously. Maybe they are lazy loading continuously in the background. Maybe some of their scripts are still consuming resources and ‘listening’ instead being triggered based on explicit events. Tanner Goods mobile javascript loading performance So there you have it — r, to help you monitor and optimize your Shopify page speed, and a simple list that can help point you in the right direction with your upcoming optimizations. a new Shopify app, PageSpeed Monito Please take a moment to check out my other Shopify app as well, —the only Shopify app of its kind that compiles and submits comprehensive image sitemaps in realtime and provides true reporting for Google Image Search indexing. Image Sitemap Follow me on Twitter . Find me on LinkedIn .