How can developers and partners prevent end users from wading through dozens of Shopify Theme options to improve site performance?
Publish Insights 30 October 2021
Shopify Merchant
Some more than others—Shopify themes offer great versatility. There is a growing marketplace of e-commerce website themes. For distinction, many tout large images, videos, social media integrations and other features. Ideally, we judiciously choose which options are best.
Often, we enable them all and risk slowing page loading to a crawl. Once Google flags your site as a sloth, it can take a month or more to recover ideal search engine positions.
As an early Shopify Merchant, you may endeavor to try out different themes to see which ones work best. Some are free. But others from third parties, with feature enhancements, require an initial outlay of cash.
Try to avoid adding third-party apps and code customizations until you are satisfied with your theme selection. You will still be able to change color schemes, fonts, and images. Because of the long relationship with your theme selection, you may decide to have a Shopify Partner make a recommendation.
Shopify Partners
A partner is able to test out a theme with all integrations prior to deployment. A developer can create and maintain a custom theme. Either can make at least some minor code optimizations.
Giving a website theme a turbo mode is a consideration for theme developers. It is not something I have yet seen. This requires any combination of Liquid, HTML, CSS, and JSON programming to implement. A programmer needs to add a global trigger that limits the following options:
- Image dimensions
- Product page elements
- Grid sizes
- Server calls within grids
- Animations
- Other non-essentials
Throughout a theme, you may have dozens of options for the home page, product pages, collection pages, and blog articles. Together, they can bring your overall site speed down. Hunting, disabling, and testing which ones to turn off can be time consuming. A single trigger within the settings schema can override options or best performance.
{
"type": "checkbox",
"id": "turbo",
"info": "Override global options to optimize performance",
"label": "Turbo mode",
"default": false
},Code includes hidden formatting characters that can interfere with operation. Paste into a text editor and reveal invisibles before pasting into Shopify theme. Replace non-breaking spaces ( ) with regular space and remove HTML line breaks (<br />).
Since underlying code for each theme varies, I cannot tell you exactly what to do where. Instead, I am offering suggestions for Shopify Partners.
The home page may use a full-width image or slide show. Many SEO experts recommend eliminating slides and carousels. However, I have specific optimizations for double slides. Consider using the turbo trigger to limit the number of slides and the maximum image dimensions. My current theme employs lazy loading for specific image widths. The turbo mode limits the image width.
Product pages on this site employ a third-party plugin to display a representative image for each option. While some can do this by overlaying a transparent png image, this one requires a separate image for each. (I have tried both.)
Reduce the image size (not dimensions) for best performance. Seven 150 KB images exceed 1 MB download plus the HTML and scripts. With such a multiple, compressing them to less than 70 KB each has a dramatic effect on page load time.
Do you really need product recommendations and recently viewed products on product pages? Your turbo trigger could eliminate one or both.
My theme has options for upper and lower collection page headers. The turbo mode disables the lower header, removes product recommendations, decreases the amount of grid items, scales down image dimensions, and disables some grid item overlay messages.
Blog articles include extra sections like the home page does. It is possible to display products on the bottom of the article, for example. A cross promotion is advantageous for monetizing a website.
Weigh how many visitors will scroll down far enough to see it. If they do, what is the maximum number of products they will scroll through? I decided not to override the display but to limit the number of products.
Should You Be Lazy?
LazyLoad works well for background images that are out of view Modern websites implement LazyLoad code. You can trigger the Chrome browser-specific tag (growing wider use by other browsers), loading="lazy", to appear between a href within blog articles (and elsewhere) with turbo mode activation.
Lazy image loading option within Safari 14.1 and Safari Technology Preview 125, Version 14.2, Debug menu: Experimental Features may speed up your browsing. The same option is available within iOS Settings: Safari: Advanced: Experimental Features.
This feature may interfere with local lazy loading and does not optimize your website for visitors who do not use this browser or do not have the option enabled. In personal tests, it has been necessary to Empty Cache (also under Debug menu) every 1–2 days for some pages to load. I assume this relates to the storage of extra images for lazy loading (hence this experimental feature is disabled by default).
As you develop or optimize a theme, there are many instances when you will say that this is a really great feature. However, ask is it worth the speed hit? Connect these options to the turbo flag so Shopify Merchants can see an instant speed boost without familiarity with the intricacies of underlying code.
