eliminate render-blocking resources shopify

This post was updated in 2018, 2019 and 2020 to reflect new features in the Google PageSpeed Insights tools and changes in technology.

One of the most popular tools for webmasters, including those using Shopify themes, is Google’s PageSpeed Insights service, which seeks out and identifies ways to improve your website’s page loading speed and related factors — but how much weight should you give to the advice this (or a similar) tool gives you?

Google is on record as being “obsessed” with speed on the Web and also has indicated that speed does play a role in Web rankings — so speed is obviously something that should be considered when developing any website.

That translates into the idea that sites that load faster will rank higher in search engine results.

However, it’s easy to take Google’s PageSpeed Insights advice on your Shopify theme a bit too much to heart while also ignoring some easier ways to improve your site performance.

In July 2018, Google rolled out significant updates to its PageSpeed Insights tool, including a new user interface and new ranking methodology. 

Render blocking resources

When running PageSpeed Insights, one of the first (and scariest) recommendations Google may give you is to “Eliminate render blocking resources.”

Without getting overly technical, this is referring to utilizing some advanced Web development techniques within the structure of the code to help improve speeds.

However, even for someone with intermediate CSS and JavaScript skills, meeting this suggestion can be tricky to implement since it can require some pretty extensive modifications to your Liquid files and CSS. Not only is this time-consuming and error-prone, but it also, like all customizations, makes it more difficult to update your theme down the road.

Minifying 

The same goes for Google’s recommendation to “minify” HTML, CSS and JavaScript.

Newer versions of Out of the Sandbox themes do “minimize” code wherever practical.

While these techniques certainly reduce load time, they also are something that only more advanced users should tackle. Further, many “minification” tools don’t recognize the unique Liquid tags used in many Shopify theme files, which can cause the entire theme to stop working.

More features, more time

Another important factor to keep in mind is that every feature or design element that’s added is likely to trigger issues with any page speed testing tool. Adding cool designs or highly interactive features can be great for user experience — but it’s important to keep in mind that it’s likely a trade-off with your site speed.

At the end of the day, it’s often a fine balance between features and speed — and typically it’s difficult to have the best of both.

‘Next generation’ image formats

Google’s PageSpeed Insights may also recommend that you “serve images in next-gen formats” including JPEG 2000, JPEG XR and WebP.

At this time, switching your image files to these formats, with the exception of WebP in some cases, is not fully supported by Shopify or Shopify themes, though advanced development work could be done to take advantage of these formats.

That said, not all browsers can correctly display all of these image formats (including WebP) at this time, so using them can cause image display problems or require you to use additional code to designate alternative image files to use, which can add to the complexity of development work.

Other common Google diagnostics

Google may also mark some of the following “diagnostic” elements in its PageSpeed Insight tool:

• User Timing marks and measures: Using this feature requires advanced development and integration with Google’s User Timing API, which is not supported by default by Shopify or Out of the Sandbox themes. 
• Serve static assets with an efficient cache policy: Because image files and other assets are served from Shopify’s servers, there’s no way to control this “policy” setting on a site-by-site basis. That said, Shopify’s servers do leverage caching technology that balances the need for performance and how Shopify images integrate with your store. 
• Avoid an excessive DOM size: This warning refers to the amount of HTML code needed to display your page. This is largely affected by the amount of content on your page. In addition, there are elements — both “nodes” and non-nodes — that Shopify adds automatically to all themes in order provide ecommerce functionality. These lines of code are required for your store to function and Out of the Sandbox does not have control over how these are formatted. 
  
• Minimize Critical Requests Depth: While theme CSS and JavaScript files do contribute some to this factor, third party apps, fonts and other integrations also can cause this warning. In these cases, if you are seeing files from third party fonts (including Google and Shopify’s built in font picker) and apps, it’s most likely not something that can be changed for your site without advanced development. 
• Defer unused CSS: In Shopify, this warning can be triggered by both core Shopify functionality and third party apps and often these files are loaded with the page in order to optimize performance of these features or apps.
• Defer offscreen images: The latest versions of Out of the Sandbox themes support lazy loading of image files. However, page speed tools are not always able to properly detect this.
• Minimize main-thread work: This diagnostic is related to JavaScript, which is required for both core Shopify functionality and apps and you likely cannot control or modify this. However, JavaScript optimization is a top priority for Out of the Sandbox and we’re always working hard to find the balance between providing the cool functionality it allows with maximum performance. 
• Reduce JavaScript execution time: JavaScript is an important part of delivering the functionality and features in your store. Like with “main thread” work, in most cases you will have limited to no control over this element.

All that said, however, it’s important to note that both Out of the Sandbox and Shopify are always exploring new ways to leverage the latest improvements in web technology, including the ones Google cites above.

However, it’s important to keep in mind that new technologies can take a while to become rolled out everywhere. Often this is because, as a new technology, elements aren’t fully supported or proven, so it can take time for the features to become more widespread. 

Things you can do

All that said, there are some solid, easy and fast ways that you can improve your site speed without needing advanced development.

• Compress your images: There are literally hundreds (if not thousands) of image compression tools out there that you can search for. These tools make minute changes to your JPEG images that can result in some significant speed improvements. However, keep in mind that if very high quality photography is a must for your site, this can be one of those areas that you’ll need to decided if speed or image quality is more important. You can also take advantage of the limited WebP support Shopify introduced in 2019 and that is supported by later versions of Out of the Sandbox themes.
• Cut down on the number of banner images: Rotating banner image slideshows on your homepage or other locations can look great, but these are also big time contributors to page load time. A good compromise is to restrict the number of slides to one or two — since many users will likely only be on the page long enough to see that many anyway.
• Number of images: Every image you add will make your page loading time slower. However, product images are also one of the most important aspects in selling most online goods. To help cut down on the number of images, carefully plan out how to maximize the view in each photo. In some cases a single shot can effectively do the job of two or more separate images. Another option is to create a standalone page for additional product photos that shoppers can click on if they need to see more visuals.
• Reduce and monitor apps: Most third party apps also add to page loading time, so it’s always good to avoid app overload. You may also want to compare speed tests before and after you add a particular app to see the true weight it adds to page load time and then re-evaluate if it’s worth that. If not, remove the app completely.
• Eliminate sections: Removing sections of information from the home page can be an effective way to improve load times as well. Instead, give shoppers a brief peek at the content and then link to a separate page that houses the actual content. Also consider removing social media feeds and widgets as these can add significant load time.
• Fonts: Standard, ubiquitous Web-safe fonts such as Arial and Times New Roman will work pretty much everywhere and with no page speed consequences at all; however they can be a little boring, so you may want to use a more interesting third party Web font from Google Fonts, for example. But because these fonts “live elsewhere,” using them can affect page speed because the browser often has to go and fetch these fonts before it can display them. The impact may only be slight, but it’s still a good idea to limit these third party font styles to one or two max on your site.

The Shopify platform itself also has some key advantages in regard to page speed. Your entire store is hosted on scalable, high tech servers that are optimized to handle the demands of ecommerce stores.

These servers are much more efficient and typically provide much better load times than other services you could find on your own.

Shopify also uses a CDN (or “content delivery network” comprised of high quality servers) to store all your shop’s image, CSS and JavaScript files. When a user visits your site, the images and other resources are downloaded from the server closest to him or her geographically — which reduces download time. In addition, CDNs also utilize caching — or storing copies of files that don’t change frequently, to help improve speed.

Though Google PageSpeed Insights does sometimes flag caching issues, controlling the cache settings for your site is not possible if you’re using Shopify’s servers for images or other assets. 

Shopify does take care of caching files as efficiently as it can while balancing how Shopify stores look and function. 

A common misconception

Finally, keep in mind that Google’s PageSpeed Insights is a great tool and can give you lots of great ideas, but often the recommendations can be very difficult to implement for an unknown return on investment. 

It’s a common misconception that fixing elements Google PageSpeed recommends will suddenly rocket you to the top of the search engine rankings — the reality is that page speed is just one of the many, many factors used to rank results.

Also keep in mind that many Shopify stores (take “handmade jewelry” for example) are in extremely competitive industries in terms of search engine rankings and it’s unlikely that a small, independent merchant could outrank the larger players in the space no matter how fast the site is.

If you’re truly concerned about search engine optimization, a great first place to start is by reviewing and rewriting your product descriptions.

Turbo and PageSpeed Insights

If you’re using the Turbo Shopify theme, it’s also important to note that many of the speed boosting techniques this theme uses are not detected by Google PageSpeed Insights or many other page speed tools.

Specifically, most page speed tools cannot detect Turbo’s advanced page preloading feature, which is one of the main ways to boost page loading times.

Mobile PageSpeed Insights

Google PageSpeeds also offers a completely separate test for how your site loads on mobile.

Many of the same issues will be flagged as on desktop and there’s often only so much you can do about them, as outlined above. 

It’s also worth noting that Google’s mobile scores depend on what are known as “emulators” — which are computer programs designed to mimic the behavior and performance of a page on a mobile device.

However, emulators are not always consistent or accurate — in fact you may notice that some speed tools give you different results each time you run the test.

PageSpeed Insights and other speed tests often do not detect Turbo’s intelligent preloading feature, for example, because this depends on user behavior. 

Go beyond the score

For both desktop and mobile, it’s important to keep in mind that the score Google gives you is just one factor that determines how your site is ranking and how well it performs for users and in search rankings. 

While it’s always a good idea to what you can to improve your site speed, chasing after a 100 is not a good use of your time as a business owner. 

Keep in mind that most, if not all, of the elements that page testing tools flag are necessary to make it possible for your customers to browse and buy on your site.

In short, you should focus on controlling elements of speed and SEO you can — such as optimizing images and writing quality content — rather than focusing too much on speed testing tools.