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. 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. 

Design for a mobile-first experience

A mobile commerce strategy has never been more critical. Over Black Friday Cyber Monday 2020, mobile accounted for 67% of all sales on Shopify.

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.  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. 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, the size and quality required for a hero slider to look good can increase load times. Cut down the number of 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.

 

Combine multiple CSS and javascript files into one

This is a quick win that allows for fewer HTTP round trips and has a much higher potential for gzip compression to work.

CSS: Each CSS file on your website adds time to your page load speed. In most cases you can combine two or more CSS files together using nothing more than “copy and paste”. Check how many CSS files you have with this CSS Delivery Tool so you can combine them. Here are instructions on how to combine external CSS files.

JavaScript: Collecting all JavaScript files into one will really reduce the amount of time it takes to load your web pages because you are reducing the amount of things the web browser has to request before displaying your page. Use this JavaScript Usage Tool to see how many JavaScript files you’re using. Here are instructions on how to combine external JavaScript files.

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. Here are instructions on how you can do all three.
• Render-blocking JavaScript: Google recommends removing or deferring scripts that interfere with loading above the fold content of your webpages. For example, if you have a JavaScript file that loads in your footer, consider delaying the load until (or if) the viewer gets to your footer. Read up on render blocking JavaScript and how to properly defer it.

Minimize DNS lookups

For any external resource to be downloaded for your page, the browser must “look it up”.  As a web page becomes more feature-rich it often uses more DNS lookups, which makes it render much slower. You can use this Page Requests Tool 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. Here are instructions on how to defer videos and how to defer images. 

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 this CSS Delivery Tool 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.

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.