Speed up page loading for your entire blog without editing each image or sacrificing quality.
Publish Insights 10 December 2022
Load Webpages Faster
Through countless articles, you should be aware that speeding up web page loading times improves visitor experience and Google ranking. One of the most common reasons for slow pages is the use of large images.
Infrequently viewed pages can suffer temporary speed performance hits when a visitor with a poor internet connection visits. I should note that Shopify employs many algorithms to optimize images based on device—even changing the file type, when appropriate. But Shopify recommends JPEG images without color profiles.
There are several ways to reduce image file size. You can blur them to remove details or save them as progressive JPEG files with lower-quality settings. With these techniques, I strive to get 2048x820 pixels below 70 KB. An optimum page goal is to keep the total of all images for one page under 300 KB.
When inserting an article image into a Shopify blog post, you can choose from several standard image sizes. Typically, you may select a Banner image (600px) or Wallpaper (1024px). When doing so, Shopify scales the image to the maximum dimension you specify in that menu. The HTML image code will include 600×600 or 1024×1024.
Based on the page width of your Shopify theme, 600x600 may satisfy most needs. On average, my full-size 70 KB images scale down to less than 15 KB at 600×600 or less than 25 KB at 800×800.
When including the code: style="width: 100%; height: auto;" within your HTML image attributes, smaller images proportionally scale to full width. So <img src="shop.url/image-path/file_600x600.jpg" style="width: 100%; height: auto;" /> can fill an 800px page width with slight image quality degradation.
Reward Registered Users
Google caches images without logging into your website. If you have pages with many images, you can reduce their file size until visitors log in. It just requires a few lines of code. The best way to work on Shopify Liquid code is to duplicate the current theme; edit the copy; preview it; and then publish it.
Caution: Modifying Liquid code may invalidate your theme for future updates by the developer. Anything you add will require manual migration to a different theme, with possible incompatibility.
Within the article template, likely beneath the list of files within Sections. (Older themes may instead have it beneath Templates. If it’s in both places, edit the one under Sections.) The name of the main body of the blog post text is article.content. We want to assign it a new name and perform a string replacement unless the visitor is logged in.
{%- assign article_text = article.content -%}
{% unless shop.customer_accounts_enabled and customer %}
{% assign article_text = article_text | replace: '600x600', '500x500' | replace: '600x600', '500x500' %}
{% endunless %}
{{ article_text }}Depending on what image sizes you routinely select, you may need to change the string replacement to replace: '1024x1024', '600x600' if more appropriate. (This site reduces 800 down to 600 pixels unless logged in.) Make certain that {{ article_text }} is wherever the {{ article.content }} previously appeared.
By reducing image sizes until users login, the majority of page views will be much faster. For such performance all the time, remove the login condition. You might also consider replacing external videos with a link, like those from YouTube. They can slow page loads, particularly in countries with slow Internet connectivity. Do these suggestions work for you? Let me know in the comments below.
