PageSpeed Insight Warnings

Overview

PageSpeed Insights (PSI) offers many suggestions of ways you can improve your page's loading performance.

These can be found under Opportunities and Diagnostics on your PSI breakdown.

Pros & Cons for Every Suggestion

While these suggestions can be helpful for improving your store's page speed, it's important to recognize that these are suggestions, not instructions.

It will not be realistic to address all of these suggestions within your store - there are ✅ Pros and ❌ Cons for every option, and deciding which suggestions to implement is completely at your discretion as the merchant.

For WeTheme the most common suggestions that PSI offer are:

Common PageSpeed Insight Suggestions

Minify CSS & Minify JavaScript

Minification is the process in which redundant data is removed from your theme's code without affecting how the resource is processed by the browser.

✅Pros

  • Compressing the code through minification makes your pages load much faster.

Cons

  • Makes the coding much harder to customize, which could be both risky and costly when hiring bespoke coding customization experts.

  • Can create issues when integrating third-party services, such as plug-ins and Shopify apps.

To learn more about minification, please click here.

Serve Static Assets with an Efficient Cache Policy

When a browser requests a resource, the server providing the resource can tell the browser how long it should temporarily store - or cache - the resource.

This means that the next time that resource is requested, the browser will use its local copy rather than getting it from the network, therefore loading the page faster than before.

✅Pros

  • HTTP caching can speed up your page load time on repeat visits.

Cons

  • There is no way for your theme to control this 'policy' setting directly, as the servers are controlled by the Shopify platform.

To learn more about serving state assets with an efficient cache policy, please click here.

Serve Images in Next-Gen Formats

Next-generation image formats - such as JPEG 2000, JPEG XR, and WebP - often include compression information embedded in modern browsers.

All images hosted through the theme on Shopify will be served as WebP files. However, you may see warnings related to the map section, as this is hosted by Google and is therefore outside the theme's control.

✅Pros

  • Embedded compression information allows pages to load faster.

Cons

  • Not fully supported by Shopify or Shopify themes (including WeTheme).

  • Requires extensive customization support to add into your current theme, which could be costly.

  • Not widely integrated by all browsers, which could cause image display problems and impact user experience.

To learn more abouts serving next-generation image formats, please click here.

Eliminate Render-Blocking Resources

When a website loads in the browser, it sends out calls to every script in a queue in a specific order. Due to this order, some scripts aren't necessary in order for your customer to view your store right away - and these scripts can be long, therefore making the customer wait longer to access your site.

✅Pros

  • Eliminating these render-blocking resources improves speed by altering the structure of your theme's script call-outs.

Cons

  • Difficult to make initial heavy modifications to Liquid files and active CSS, even for developers with deep coding experience.

  • Difficult to update your current theme versions later down the line, like all extensive customizations - even increasing the risk of making coding more prone to errors and conflicts.

To learn more about eliminating render-blocking resources, please click here.

User Timing Marks and Measures

The User Timing API allows you to identify where time is being spent, and therefore use this data to improve your page speed.

✅Pros

  • Allows you to extract detailed timing data, which you can then use to optimize your code.

Cons

  • Requires advanced development and integration with Google's User Timing API.

  • Not supported by Shopify, Shopify theme developers, or WeTheme.

To learn more about user timing marks and measures, please click here.

Avoid Chaining Critical Requests

Critical Request Chains refer to a list of resources which are loaded with a high priority on a page. Optimizing and reducing the weight of these chains can make your webpages load faster.

✅Pros

  • Can improve your page speed by reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources.

Cons

  • This warning can often be present as a result of using third-party apps, fonts, and other plug-ins - in this case, it's usually necessary to hire a specialist or consult the source developer.

To learn more about avoiding chaining critical requests, click here.

Reduce JavaScript Execution Time

A warning will show when your page's JavaScript execution takes longer than 2 seconds, as this affects your page's network cost, parse & compile cost, execution cost, and memory cost.

✅Pros

  • Reducing the execution time, by definition, would reduce your page's loading time.

Cons

  • JavaScript is required for core Shopify functionality with both themes and apps, and therefore modifying it is generally not a reasonable measure to take - in most cases you will have limited to no control over this, and you should consult a specialist if you wish to attempt it.

To learn more about reducing JavaScript execution time, please click here.

Avoid an Excessive DOM Size

An excessive DOM (Document Object Model) can slow down your network efficiency and load performance, your runtime performance, and your memory performance.

Google PSI recommends that your webpage should have less than 1500 nodes, be less than 32 nested levels deep, and have fewer than 60 parent/child elements.

✅Pros

  • Reducing the DOM size will reduce how long it takes to render the page and run JavaScript on the page.

Cons

  • You cannot resolve this warning without completely redesigning your web page from scratch.

  • There are some node and non-node elements that are intrinsic to all Shopify themes (including WeTheme) and cannot be altered - these lines of code are controlled by the platform directly in order for your store to function correctly.

To learn more about avoiding an excessive DOM size, please click here.

Minimize Main Thread Work

Every browser has a renderer process that transforms code into a page that can be interacted with, and the main thread is where most of this is processed. A warning is raised when the main thread is busy for longer than 4 seconds during load.

✅Pros

  • Minimizing the main-thread work speeds up the browser's renderer process.

Cons

  • JavaScript is required for core Shopify functionality with both themes and apps, and therefore modifying it is generally not a reasonable measure to take - in most cases you will have limited to no control over this, and you should consult a specialist if you wish to attempt it.

To learn more about minimizing main-thread work, please click here.

Defer Offscreen Images

Deferring offscreen images - or 'lazy loading' - allows you to optimize your page's performance by loading images as the user scrolls down the page, instead of during the initial page load.

✅Pros

  • All our themes at WeTheme support the lazy-loading feature.

Cons

  • SEO checkers are not always able to detect lazy-loading.

To learn more about deferring offscreen images, please click here.