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.
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:
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.
Compressing the code through minification makes your pages load much faster.
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.
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.
HTTP caching can speed up your page load time on repeat visits.
There is no way for your theme to control this 'policy' setting directly, as the servers are controlled by the Shopify platform.
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.
Embedded compression information allows pages to load faster.
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.
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.
Eliminating these render-blocking resources improves speed by altering the structure of your theme's script call-outs.
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.
The User Timing API allows you to identify where time is being spent, and therefore use this data to improve your page speed.
Allows you to extract detailed timing data, which you can then use to optimize your code.
Requires advanced development and integration with Google's User Timing API.
Not supported by Shopify, Shopify theme developers, or WeTheme.
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.
Can improve your page speed by reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources.
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.
Reducing the execution time, by definition, would reduce your page's loading time.
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.
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.
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.
Minimizing the main-thread work speeds up the browser's renderer process.
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.
All our themes at WeTheme support the lazy-loading feature.
SEO checkers are not always able to detect lazy-loading.