Introduction:
In the competitive eCommerce market, site performance is crucial for maximising conversion rates and providing a superior customer experience. Monitoring technical performance is especially important due to Google's CWV ranking factors. Shopify's success is based on a robust app community and low entry hurdle for theme creation, but these factors can negatively affect a site's speed performance. Despite server-related updates and a focus on SEO and product data design, slow-loading pages remain a daily issue.
The Guide to Using the Tool and Metrics for Customising Theme
Before looking at how to execute this, it's important to understand what success looks like and how best to measure it. However, there are a few problems that we find on the topic of page speed and making actionable progress: (For Example - GTmetrix)
Numerous metrics can be reported on, and multiple tools are available to track and report on them. These metrics aren’t all completely independent, as some stats are incorporated into others, so it’s important not to get blinded by the amount of numbers.
Different tools may produce conflicting results or interpret them differently. Factors such as measurement methods, server locations, and the time of day can contribute to disparities. Tools, metrics, and techniques
It's crucial to comprehend what a successful outcome looks like and the most effective ways to quantify it before looking at Lines to Liftoff: Maximising the Potential of Special Features in Theme Code at how to carry this out. Nonetheless, we discover a few issues with page speed and achieve meaningful progress:
There are numerous tools offered to track & report on a multitude of parameters. Don't let the sheer volume of the information fool you—some measures are integrated into others, so some metrics aren't entirely independent.
Multiple instruments may produce conflicting outcomes or interpret them in disparate ways. Disparities may be caused by variables including the time of day, server locations, and measuring methods.
To improve your site's performance, avoid using a scattergun strategy by changing red numbers to green. Google's Lighthouse score may change, wasting development time and resources. Set a goal for success and create a plan. Focus on user experience and engagement rather than page performance. Google's research on user expertise reveals that First Input Delay, Interface to Next Paint, and Cumulative Layout Shift are more relevant indicators.
Yes, Time to the First Byte (TTFB) is also a crucial factor. But that measure is considerably more complex (provided that it encompasses more than just the server time it takes to respond) and is already heavily integrated into LCP. Then, using TTFB is one method to enhance your Largest Contentful Paint (LCP), in the same way that you shouldn't load the primary item image and hero image carelessly. Largest Contentful Paint (LCP) is the metric we suggest measuring as the "site speed" metric.
We recommend applying the scientific method outlined here to measure to improve site speed. Basically, you just need to take these actions:
- For a particular page (like LCP), verify the speed of your website right now.
- Make an educated guess as to what changes could speed up the site.
- Make a handful of those modifications to a separate theme.
- Reassess to figure out if the web page's speed has increased.
In addition, we suggest focusing on seeing pages initially: pages for products and collections
- The most susceptible sites in which you can lose customers are the browsing pages.
- Customers are already ready to make a purchase at that point in time, thus the cart and check are the least significant.
Page load, Last Byte Time, Last Contentful Painting (LCP), Cumulative Layout Shift (CLS), and Interface to Next Paint (INP) are the parameters that we usually monitor. These cover each significant component of the web page loading process.
To maximise them, one first needs to tackle each of the page elements, such as how quickly the site loads from the server, the number of pictures that load rapidly or slowly, how many apps and third parties are integrated, whether or not all product and content loads first, and which elements had an impact on LCP and CLS. Next, one must concentrate on a single page to start making an impression. A few things to remember from the previous section are:
- Although there are many potential metrics to examine and track, Google has done a superb job of choosing evaluates within its CWVs that encompass every aspect of site experience; therefore, concentrate on those as the primary areas for development.
- There are small variations in which other measures people prioritise, as well as justifications for monitoring a particular measure above another. The most important part is to keep an organised and regular eye on both.
Tools:
Although some of the other metrics measured change slightly across these alternatives, they all essentially do the same thing: provide a short scan for an instantaneous summary of the status on the specified URL. Most people have probably used a minimum of one of them to monitor pagespeed. One of them will suffice to finish the task; testing them all at once and combining the results is counterproductive. To truly improve continuously, the best course of action is to regularly test and report.
Tools designed for real user monitoring offer valuable insights into how consumers are affected by site speed. These tools require paid memberships to function effectively and provide immediate insight into issues. They are particularly useful for brands with a global reach, as they can provide information on how different markets use the site, helping in content and theme modifications.
User monitoring should be done first, using a browser plugin like Shopify Theme Inspector for Chrome.
Shopify Theme Inspector: Shopify liquid flame graph checker:
To run the Shopify Template Inspector on a store, you need staff permission from Themes and collaborator account permission.
Verify access to the theme's setup page in the shop admin. Open the store using your Partner Dashboard with collaborator permission. Select the Shopify Template Inspector for the Chrome icon, sign in, and use your Shopify login information.
Open Chrome DevTools, choose the Shopify tab and use the >> button to check availability. Add the store page to your profile by pressing on it.
The Shopify Theme Inspector generates a flame graph displaying the time and duration of liquid node operations. The page node, at the top, shows the server's total time for producing the page. It ignores application and network overhead.
To see more information about any node, select its associated bar inside the flame graph. When readily available, the information listed below is displayed:
- The total time, including any child nodes, that the server takes to render the code
- Sample of code: the code that the web server had the ability to resolve. To view the sample in the online store's code editor, select the link.
- File: The code-containing file.
- Line: The code's actual position on the line.
What to look for while debugging:
The Shopify Theme Inspector flame graphs display various patterns, which you will see below, along with how they can impact the functionality of your template.
The render time of the The liquid node and overhead from the network combine to create the page's time for the first byte (TTFB). Render time is increased, and total TTFB rises with every node that the shop has to load.]
Your code may not be optimised if the number of layers of nested nodes in your flame graph is large. The most prevalent causes of layered nodes are listed below. One or more of these factors may be combined in your code.
- There are too many conditionals.
- Nested loops
- Nested includes
Complex operations performed inside of a loop adversely influence the render time of liquid. Liquid performance may occasionally be substantially improved by reorganising the code and simplifying the template logic.
An assign tag appears inside a for loop in the example below. Every time the code iterates through the items in the collection, an array of products by price is produced. Because products by price's value is constant across products, the code is overly recurrent
As seen in the example below, users may modify the code such that it only generates products_by_price once. In this particular case, prices are organised just once and are still available within the loop as needed.
- Non-visual sections:
These sections may cover a variety of subjects, such as analytics, SEO, scripts, and much more. Determine whether these parts are required, and rework them to make them more efficient.
Key contributing factors:
Although it is unlikely to work for every brand, selecting a theme is a good place to begin. Even though many "off-the-shelf" templates available at theme stores incorporate considerable technology advancements, their primary goal is to appeal to a broad consumer base rather than to suit specific criteria. As a case study, they often arrive with three distinct styles and a variety of toggleable features.
When choosing the proper tune, it is important to compare the theme performance scores. When this is your primary goal, you should begin by removing any unnecessary code and bloat from the design you purchased, since this can dramatically improve performance.
Fixing fatigued picture loading on CWVs is crucial, but not all locally produced graphics should use the "lazy" tag. Avoid lazy loading of LCP images and above-the-fold images, as it negatively affects LCP score and CWVs. Shopify has eliminated the need for human labor by implementing native handling for image location, maximizing efficiency.
Two relatively new (in the larger scheme of things) properties called Async and Defer tell the browser when and how to download external JavaScript files.
- Async: While navigating the rest of the HTML on the page, download this JavaScript file, and when it's available, execute it.
- Defer: Do not download this JavaScript file after the remaining HTML has been parsed. Do not use it right away.
These qualities do, however, come with specific challenges. If they are used excessively, several scripts may be backed up to load at the end, which could cause page loads to be slower. In addition, there may be situations where the JavaScript on a page needs to be active before any HTML or CSS loads, depending on the function.
As with the previous subsection, it is equally important to strategically manage the video material on the website. While making improvements might not be as simple as with photos, the first step is to make sure the video asset has been altered as little as possible (by whoever made it).
One common debate issue is whether to host the video file and use an embed from Vimeo and YouTube. Using these websites and embedding has obvious advantages. They are easy to use, fairly adjustable under settings, and more discoverable when made publicly available. But, given Shopify's latest changes this year regarding how it handles video, it is suggested to upload to Shopify and, whenever possible, load the content on the site using Shopify's CDN.
What next:
Following an in-depth review of the above and once the theme and setup are in a decent place, a few additional things ought to be kept in mind to continue the creation of your Shopify theme:
Although it won't become more effective, this is essential for making sure the website retains current functionality and doesn't deteriorate with time. Having daily alerts and running tracking is the ideal balance for this. But in order to add more depth, the monthly hygiene process needs to include additional reporting and checks. This should consist of:
- Check that none of the sites that are being tracked have changed negatively by checking Google Search Console.
- a shared monthly report that includes the key performance indicators you're keeping an eye on as well as any shifts in trends during the month.
- Use the tools listed above to ensure that there wasn't a surge in file sizes or page weights, and that imported photos and videos haven't been optimised, etc.
Ongoing checks are necessary because the previously stated factors may be affected by a number of distinct things: updates from your developers, modifications made by the teams that are when uploading and editing material all through the month, globally updates from Shopify regarding the server configuration and CDN, and adjustments made by Google.
Third-party technologies are essential for improving native Shopify solutions due to locked-down server infrastructure. These solutions are particularly suitable for high-traffic brands, as they increase conversion rates. Render Better, a Shopify tool, has significantly improved CWV metrics and user experience by importing external materials and caching images using a single domain. Yottaa, another tool, has been used to achieve faster page load times by considering servers and server response speed. Both tools are designed to optimize user experience.
Shopify's Content Delivery Network (CDN) is a versatile solution for businesses, providing faster response times worldwide. 98% of retailers use it for balanced optimization of photos and videos. However, for larger managers, options like Cloudinary and SpeedSize can be used for extreme asset optimization. While restricting external calls for resources is ideal, Shopify may eventually improve its features to match these optimizations.
Conclusion:
Shopify's advancements have reduced technological obstacles, allowing for better performance. Async and DeferJS properties help load external JavaScript scripts, but heavy usage can slow pages. Vimeo and YouTube are popular video asset management options. Shopify's Content Delivery Network (CDN) is recommended for content loading. Third-party platforms like Speed Size and Cloudinary can optimise assets.
