Page Speed Reports and SEO Ramifications

Overview

We take site speed and performance very seriously here at WeTheme.

All our themes are regularly tested and optimised and we ensure that any new features are built in-line with the most recent guidelines and best practices.

Common SEO Report Suggestions:

Resources

One of the most common reported recommendations Pagespeed Insights may give is to “Eliminate render blocking resources.”

Put simply, this is referring to utilizing some advanced techniques within the coding's format an structure to improve speed.

This is no east step even for developers with deep coding experience, as it can require some heavy modifications to both Liquid files and active CSS, making implementing this much more difficult than it may sound.

Additionally, this also creates a further tradeoff to consider - like all extensive customizations, this will create much wider difficulty in updating your current theme versions when it comes eventually becomes time to consider a theme version upgrade, and may also make coding more prone to errors and conflicts - reducing reliability to gain further speed.

Minification

You may also see a recommendation to “minify” HTML, CSS and JavaScript.

This is a way of compressing coding to make it much faster to load - to quote Google directly:

Minification refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser - e.g. code comments and formatting, removing unused code, using shorter variable and function names, and so on.

This has already been built into the theme, by our developers.

This too, however, comes with a tradeoff - minifying your coding makes the theme faster, but also makes the coding many degrees harder to customise, creating issues when integrating third-party plug-ins and Shopify apps. Additionally, this will impact how coding experts will be able to make simple edits to your theme coding when working on bespoke coding products for you, hence the creation of our Developer Editions above to help with this process.

The Functionality tradeoff

Another important factor to keep in mind is that for every additional complicated asset, element or function you add to the page, the more potential issues a checker like Google PageSpeed Insights may directly highlight.

Interactive elements are great for improving the user experience for a page — but every additional loading process the page must work through will directly add the load time, as a direct tradeoff, and higher quality images/video add a notable difference to how quickly the page can be loaded.

Whether you lean more into speed or user experience as a team will depend on your personal preferences, branding and site aims but it truly difficult to create a 'best of both worlds' situation, with the two aspects directly affecting each other.

Image formats

Next-generation formats such as JPEG 2000, JPEG XR and WebP are often highly recommended within SEO Reports, for their improved functionality.

These are, however, not yet fully supported by Shopify or Shopify themes, and would need extensive customisation support to add into your current Envy theme.

This may be a tolerable or unwanted additional cost, depending on the needs of your business.

This is further complicated by the issue of browser compatibility - these more advanced image formats are still not widely integrated by all browsers so using them can cause image display problems and affect your customer/user experience on certain devices and popular browsers.

Resolving this factor will require additional code workaround and alternative images, making an already custom project even more detailed and costly to successfully integrate.

Mobile View

Google PageSpeeds and other Report tools usually offer a completely separate test for how your site loads on Mobile View.

It is worth noting these are usually sourced from emulators — programs designed to mimic a mobile device without having the same software or hardware involved in the testing.

This same process of emulation reduces consistency or accuracy — the same SEO Report may give dramatically different results each time you run the test, due to emulator variances.

Less common suggestions

User Timing marks and measures

This relies heavily on Google's User Timing API, which is not supported by default by Shopify or most theme developers, including our WeTheme themes.

Serve static assets with an efficient cache policy

As Shopify's servers, there's no way for the theme to direct control this "policy" setting, which is solely platform-controlled.

However, Shopify has advised its servers are set up to be as efficient as possible with their internal cache policy, so this is a concern we'd say can be reasonably dismissed.

Avoid an excessive DOM size

This warning refers to the amount of HTML code needed to display your page - this can change significantly depending on the content present on the page in question.

Additionally, there are 'node' and other miscellaneous elements adds automatically by Shopify, to ensure that your theme can correctly offer eCommerce functionality.

These lines of code are added and controlled by the platform directly and are required for your store to correctly function.

Minimize Critical Requests Depth

These are present in a reduced way as part of the theme's necessary coding, and maybe expanded on by adding additional apps, plugins and custom elements,

It is very likely that these are not something that can be easily changed without compromising the source element's functionality, but it may be worth checking with the source developer for more guidance.

Defer offscreen images

WeTheme themes use a feature termed 'lazy-loading' on image files, to improve SEO reactions

However, SEO checkers are not always able to detect this.

Minimize main-thread work and reduce JavaScript execution time

This diagnostic is related to JavaScript, which is required for native Shopify, Theme and app functionality.

As you can see, JavaScript is an important part of delivering the functionality and features in your store and ideally should only be edited by experienced developers - in most cases, you will never be directly affecting this as the merchant user.

Additionally, both Shopify and ourselves here at WeTheme are continuously looking into ways to improve and streamline the active Javascript content when and wherever possible.

Our recommendations

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

Image number and compression

Every image added is an additional high time-cost element to load, makes pages load slower.

This, however, becomes another tradeoff - Product images are also one of the most important aspects in selling most online goods and if very high-quality photography is an absolute must for your site, this could be a concession you and your team are willing to make to keep images as high definition as possible.

To help cut down on the number of images, make the most of both individual image composition and page layout. To aid in this, image compression assistance is widely available in the former of tools which make minute changes to your JPEG images - these can result in significant speed improvements.

We can recommend one such tool below:

Similarly to the above, Slideshows elements, like our dedicated Section for the homepage Template and other elements, are known high contributors to load time.

Where possible, restrict the number of slides to the bare minimum of ideally one or two.

Reduce and monitor apps:

Every app added to the storefront is adding additional loading step, so we'd recommend experimenting and testing each app both in isolation and on the main store, and using only the necessary minimum.

Where possible, communicate with your app developers for their recommendations on keeping their app as efficient as possible.

Eliminate sections:

The more active Sections on the Homepage, the larger the initial load time your customers will be facing.

Where possible, link to a separate page that houses the actual content, and use a reduced content amount on the Home page directly.

Fonts:

When adding custom fonts to your theme, we would recommend limiting this to one or two maximum:

The load-time impact may only be slight but given the amount of text content on any given storefront, this can add up surprisingly quickly.

Dynamic Checkouts:

The Dynamic Checkout button is known to create a noticeably dip in page-speed performance, so if not strictly needed, it may be advisable to toggle these to off:

Social Media Sharing:

Just as above, these are known to add to the page speed load, so it may be advisable to toggle this off, if not strictly needed

Further thoughts:

You can see more from Shopify's side of the equation in the incredibly useful guide below:

For additional assistance with SEO and rankings, we would suggest reaching out to a specialist who can guide you on content and code changes that could help your store specifically, over our more generalised setup, that is designed to help the largest majority of merchants:

For more information on working with apps, please see the guide below: