Optimizing themes for performance

Introduction 

In today’s competitive environment, brand image and the buying experience are extremely important to attract online buyers. With buyer attention spans decreasing, page speed and site performance can have a significant impact on your customer’s satisfaction with the buying experience. To ensure that your customers can move through your site quickly and efficiently, you pay special attention to your site’s performance.

By the end of this guide you’ll know:

• Why site speed is important and how theme speed influences overall site performance
• What Shopify does to improve site speed
• How to measure and optimize your site for performance

Why Does Site Performance Matter? 

Shopify prioritizes site speed optimization for merchants, and for good reason. Site speed can be an indicator of how your site is performing overall. Speed scores are generated by services like Google PageSpeed Insights, which weigh several factors that affect load times on your site. 

Site speed also impacts Google rankings, user experience, and ultimately conversion rates. A 1-second delay in page load time has been found to yield 11% fewer page views, 16% decrease in customer satisfaction, and a 7% loss in conversion. Even Walmart backs up this data: in a study, they found that every 1 second of speed improvement led to a 2% increase in conversions.

Optimizing your online store speed can improve the shopping experience for your customers, make your store more discoverable, and increase conversion. Learn how your store performs against industry standards and other Shopify stores like yours by viewing your Online store speed report.

How Does Theme Speed Factor into Overall Site Speed? 

Overall, site speed is dictated by two main factors: server-side efforts and client-side efforts. Shopify will handle the server-side efforts for your website, so the most impactful thing you can do to improve your site speed is to look critically at your theme. Page rendering times (how quickly the page displays) can be largely affected by the structure of your theme.

Themes developed by Shopify are already optimized for site speed. They render quickly and prioritize minimizing the amount of data required to display the page. Adding functionalities to themes can improve the overall brand image, but can often impact the performance of the theme. When modifying your theme or adding apps for greater functionality, each addition should be reviewed carefully to ensure that the performance trade-off doesn’t negatively impact the shopper experience. 

What Does Shopify Do to Improve Page Speed?

To ensure server-side performance, Shopify adopts the following tactics. 

Browser Caching

When you visit a website, the elements on the page are stored on your hard drive in a cache, or temporary storage. The next time you visit the site, your browser can load the page without having to send another HTTP request to the server.

We set our browser caching for resources hosted on your store (JS and CSS files, image files, media files, PDFs) to one year for each file – the maximum possible.

Content Delivery Network 

Shopify provides all merchants with a world class Content Delivery Network (CDN) at no additional charge. A CDN is a collection of web servers distributed across multiple locations to deliver content more efficiently to users. This means that your shop will be fast regardless of where your buyer is located. Requests use HTTP/3 and TLS 1.3 to further enhance request performance and security.

Gzip Compression

As web pages become more complex, they also become bulky and slow to download. The best way to speed their load time is to compress them using a technique called Gzip. Gzipping reduces the bandwidth of your pages, thereby reducing HTTP response.

Shopify employs this compression technique on CSS, JavaScript, any documents (for example, PDFs), and the page itself. We also enable keep-alive, which allows the browser to grab more than one file at a time.

Image Optimization

Shopify automatically optimizes your images through our compression algorithm. Keeping image sizes to a minimum can help users on slow connections. For supported browsers, Shopify will automatically serve up your images in WebP format, which is up to 30% smaller than traditional image formats.

Note:  In order to minimize quality losses during compression, save your images in the proper format and size from your graphics program. We recommend viewing Theme Images documentation, particularly the Formats section, which covers proper use of JPG, PNG files, and compression rates.

Optimizing and Testing for Performance

Metrics for Theme Performance

There are several tools that help to test your theme’s performance. All the tools target five main criteria for measuring performance:

Device Simulation: Simulate different desktop and mobile device performance on loading a website

Location: Test different locations across the world as starting points for where customers may be accessing the website

Load Speed: The total time it takes to to load all visual aspects of the page prior to a customer taking action

Page Weight: This is also referred to as Page Size. It’s the total size of all files used to create the web page which are required to download to display the page

Number of Requests: The total number of requests made to website servers to retrieve each piece of data

Visit our Developer website for tools and best practices for theme performance.

 

Optimization Best Practices

Best Practices During Planning and Design

Specify a Character Set

To display an HTML page correctly, a web browser must know which character set to use to display the text output. The charset attribute specifies the character encoding for the HTML document. Shopify requires all content to use the charset with UTF-8 encoding. Most theme developers already include the UTF-8 character set at the top of the theme.liquid file. Specifying a character set in HTTP headers speeds up browser rendering. Double check this code is added in your theme.liquid file: <meta charset=“UTF-8”>

Design for a Mobile-First Experience

A mobile commerce strategy has never been more critical. Over Black Friday Cyber Monday 2021, mobile accounted for 71% of all sales on Shopify. The overall U.S. ecommerce market was only at 39%. The discrepancy was likely due to better mobile-first experiences with Shopify stores. 

For more information on designing for mobile commerce, check out this blog post.

Use Popups Sparingly

Quick view pop-up implementations, either built into a theme or from an app, can sometimes pre-load the information from an entire product page when a visitor clicks the Quick View button.

That’s a lot of data to load, especially on a collection page with 20 or 30 product thumbnails. Click mapping—a JavaScript-based tool that tracks where users scroll or move their cursor to click on your site pages—can help you see whether your customers are even using a quick view.

We recommend removing quick view if your customers aren’t using it, or there’s no other critical reason for having it.

Beware of Excessive Liquid Loops

Liquid is a powerful Shopify coding language. There are certain cases, however, when you need to weigh the added benefits versus the tradeoffs.

Forloop iteration is one of those instances. Forloop means the system has to loop (that is, crawl, or search through) all the products in a collection and happens when it’s looking for a specific condition (for example, price, or a tag). 

If you have a large product catalog, looping will take a long time. The issue happens in the following cases:

• Advanced collection filtering and mega-navigation implementations: they use nested forloops to go over all products and find the applicable ones to serve
• Swatches: for each product on the collection page, the code loops through all of the variants, then all of the images, finally rendering the specific image color
• Paginating collections with thousands of products: instead of keeping to a more sensible number of products on each page, sites show everything at once, and then use JavaScript to progressively load the page on demand

Review your theme code to make sure you aren’t running Liquid “for” loops multiple times looking for the same information. This can happen when multiple developers work on a theme and may duplicate tasks or introduce conflicting code. Remove these duplications to make your page loads faster.

Reduce the Number of Homepage Carousels/Hero Slides

Huge, multi-hero-image slideshows are great for showing off your products. Unfortunately, there’s a downside to using them. The size and quality required for a hero slider to look good can increase load times—especially if you have four to five slides.

Cut down the number of homepage slides—or eliminate them. A single, high-quality hero image with a clear call to action helps draw your customers in quickly.

Best Practices During Implementation

Optimize your Images

Images are often the largest assets on your page. Ensure they are optimized to reduce page size.

Choose the correct file format

Use JPGs for most images, including photographs and complex images for a compressed but visually appealing image. Shopify automatically compresses your JPG images for you through our compression algorithm. Shopify will also serve up your images as WebP (up to 30% smaller) by default to supported browsers. Use PNGs sparingly as it is a lossless format (which causes a larger file size), but can be useful for images that require transparencies or detailed images (such as an app screenshot). For small graphics such as buttons or icons, GIFs or SVGs (a scalable vector-graphic) are best.

Upload correct image sizes

Oversized images take longer to load, so it’s important that you keep your images as small as possible. Be sure to crop your images to the correct size. For instance, if the space for an image is 300px wide, resize the image to that width. Use the following techniques:

Specify image size using URL filters: Your browser begins to render a page before images are loaded. If no dimensions are specified, your browser will download the original size and will reflow once the images are downloaded. To skip this extra step, use Shopify’s URL size parameters to specify image size in the code. This way an image is never downloaded larger than needed.

Use CSS sprites or Base64 encoded images: Both of these methods save load time by reducing server requests, and are commonly used for smaller images that are loaded often, such as buttons or icons. CSS sprites combine your images into one large image that loads all at once (which means fewer HTTP requests) and then display only the sections that you want to show. Base64 encoded images are commonly used for images under 10kb and become a part of the HTML and display without actually downloading the image.

 

Make the most of HTTP/3

An important difference in HTTP/3 is that it runs on QUIC, a new transport protocol. QUIC is designed for mobile-heavy Internet usage in which people carry smartphones that constantly switch from one network to another as they move about their day. This was not the case when the first Internet protocols were developed: devices were less portable and did not switch networks very often.

Note: It’s common to include external JavaScript and CSS files into your theme - these are usually related to any apps you’ve installed. Shopify apps live independently of one another, so it’s not possible to combine these external files.

Minify HTML, CSS, and JS Files

Removing HTML comments, CDATA sections, whitespace, and empty elements will decrease your page size, reduce network latency, and speed up load time. For the non-external files you have access to, you can minify these resources with a tool like Refresh-SF.

Most Shopify theme developers minify their CSS and JS theme files already. If you’re using a custom-built theme, have your developer check if the theme’s CSS and JS files are minified.

Note: For any external assets referenced in your theme, namely any related to apps you’ve installed, it’s the responsibility of the app developer to minify them.

Be Conscious of Render-Blocking Elements

Render means loading, so if something is render-blocking, it means that it is keeping the page from loading as quickly as it could.

Render-blocking CSS: CSS loads first before any visible content. Be sure to properly call your CSS files, lessen the amount of CSS files in your critical rendering path, and use less CSS overall. You can read more on eliminating render blocking assets on web.dev.

Minimize DNS Lookups

For any external resource to be downloaded for your page, the browser must “look it up”. The browser must do this at least once for each domain your webpage is receiving resources from. As a web page becomes more feature-rich it often uses more DNS lookups, which makes it render much slower. You can use Google Chrome Developer Tools to see how many external resources your page is referring and where you can cut them down. The good news is any Shopify-hosted assets won’t have this issue as they’re all under our CDN domain, reducing the calls from different hostnames drastically.

Defer videos, images, or other assets to load as you need them

A video or image can be deferred (also known as lazy loading) until after your initial page load. This will allow your page to load quickly without having to gather all the files and resources that aren’t in view yet. For example, load product images in a “quick view” pop-up only after the customer requests them, or load videos as they scroll into view. Here are instructions on how to defer videos and how to defer images.

You can even defer Social Share buttons (Facebook, Twitter) and just about anything else. 

Avoid repeat inline CSS

CSS holds the style requirements for your page. Generally, your website accesses this information in one of two ways: in an external file, which loads before your page renders, and inline, which is inserted in the HTML document itself.

You can use Google Chrome Developer Tools to see how many external stylesheets you have, and how many times you have inline CSS referenced.

Best Practices Post-Launch

Reduce the Number of Apps, Plug-ins, and Scripts

Apps, plug-ins, and scripts slow your site, create a larger security footprint, and often cause crashes and other technical difficulties. Deactivate, delete, or remove any unnecessary apps, plug-ins, or tracking scripts. Try selectively uninstalling problem apps (being sure to remove app code from your theme when necessary), then measuring page load time. This way you can identify any that harm your site speed.

Minimize Redirects and Fix Mixed Content Errors

Sometimes to indicate the new location of a URL you need to redirect the browser from one URL to another. Redirects trigger an extra HTTP request and add latency. Only keep redirects which are technically necessary and you can’t find any other solution for it. For example, use short-term redirects as an SEO tactic when moving your store to a new platform. Long-term permanent redirects are okay, but they shouldn’t be used on the entry point for visitors (usually your homepage). You can use this redirect mapper tool to see what redirects are present on a specific page.

If you’ve activated your SSL certificate, there may be some content that is still linking to HTTP resources, causing a redirect to the equivalent HTTPS link. It’s important to fix your mixed content errors as, according to Google, mixed content degrades the security and user experience of your HTTPS site.

Avoid Bad Requests and Broken Links

Broken links result in 404 and 410 errors. These cause wasteful requests. Fix your broken URLs (pay special attention to images). Use this free Broken Link Checker to see your broken links so you can fix them.

Get Speed Optimization Help

We’ve put together some insightful blog content and help documents to guide you to faster page speeds. You can find more information on some items discussed in this document at the following pages:

• Improve Your Ecommerce Site Performance & Speed to 2X Conversions 
• Improving your Online Store Speed

While these resources provide some great recommendations, some of the items and specific actions you can take may require you to be familiar with Shopify’s infrastructure or general theme code (Liquid). 

If your team isn’t comfortable making these changes, or you prefer to hire professional help in this area, Shopify Plus has many Partners who specialize in website audits and optimization. If you’d like to work with a Partner, feel free to reach out to them via their listing on the partner portal.