Errors and Obstacles

How do I resolve Google PageSpeed Insight errors?

When using Google PageSpeed Insights, you may receive one or more of these errors:

  1. Eliminate render-blocking JavaScript and CSS in above-the-fold content: Your page has 1 blocking CSS resource. This causes a delay in rendering your page. None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
  2. Leverage browser caching: Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network.
  3. Minify JavaScript or CSS: Compacting JavaScript code can save many bytes of data and speed up downloading, parsing, and execution time.
  4. Optimize images: Properly formatting and compressing images can save many bytes of data.
  5. Defer offscreen images: Consider lazy-loading offscreen and hidden images after all critical resources have finished loading to lower time to interactive.

Google PageSpeed Insights, although a popular tool, is not the best source for optimizing Shopify sites: 

  • Google PSI is not specific to Shopify sites, it’s used for more general sites.
  • The addition of third-party apps will lower your score.
  • Google PSI score does not correlate to actual site speed.
  • Some warnings can’t or shouldn’t be fixed.

With that said, here are some explanations for some of the common warnings you may receive: 

While it is possible to resolve issues 1 and 3, it takes extensive custom code modifications due to how Shopify works and handles external resources and is typically not recommended. Things are more complicated for Shopify sites because you have various page templates with different above-the-fold content, and possibly third-party apps contributing resources and dependencies.

While the changes can slightly improve your page load times, you would need to analyze your CSS files, make sure the CSS you’re removing isn’t used on your storefront, edit your files, and do a ton of testing. So, the cost of changing them compared to the benefits is typically minimal, as outlined in this blog post.

Please note that if you do elect to customize code to resolve issues 1 and 3, this is considered an advanced customization and Out of the Sandbox is unable to provide support or troubleshooting for this process. If you want to move forward with such changes, you will need to hire a third-party developer to help.

Once these types of code changes are made to your theme, this also limits how much additional support that Out of the Sandbox can offer if you run into future issues and we may refer you back to your developer to resolve any issues.

Finally, please note that most third-party apps add additional JavaScript and CSS resources, which Google PageSpeed Insights will flag here as well. In these cases, you would need to contact the app developer for more assistance on how to optimize these files. Preferably, these third-party apps are efficient, but even in the best cases, each additional store-facing app you add to your shop will add DOM elements, server requests, and page weight.

Issue 2 cannot be resolved because it requires a change in how the Shopify servers are configured and Shopify is unable to make changes to server configurations. 

Issue 4 is one area you can sometimes improve upon by using an image compression tool. There are numerous free and paid resources that you can locate by searching online.

Issue 5 produced by Google isn't directly saying that the theme doesn't have lazy-loading implemented. It's just suggesting a generic solution for improving load times (which as an example, they are suggesting lazy-loading) however, it hasn't actually checked to see if LazyLoading is implemented. 

Some additional articles on Shopify sites and Google PageSpeed Insights

Related articles