If you want strong conversion rates and high search rankings, you can’t afford to bog your site down with code. Every millisecond of page load time increases bounce rates and impacts visitor experience.
In general, page load speeds can be improved by minimizing third party scripts, compressing images and a number of other tactics. But if your underlying Shopify theme was not built with web performance in mind, it’s an uphill battle.
Choosing the right Shopify theme from the jump pays dividends (and it’s never too late to switch).
What makes a Shopify theme performant?
It’s Shopify 2.0 compatible
If you’re still on a vintage Shopify theme (pre-2.0) you’re missing out on the performance enhancements Shopify has built into the platform, including better code caching, asset optimization and support for app blocks.
There’s many more reasons to upgrade to a Shopify 2.0 theme if you haven’t yet!
But keep in mind, a Shopify theme is not speed-friendly just because it’s 2.0 compatible – many are still code heavy and slow.
Uses native browser features over JavaScript
JavaScript is a powerful coding language but puts a lot of burden on browsers when rendering your page content. Shopify themes that rely on JavaScript libraries (and jQuery in particular) suffer from “code bloat” that’s no longer necessary.
Highly performant Shopify themes like Clean Canvas’ Enterprise and Canopy have been architected to eliminate JavaScript libraries and leverage Shopify’s Liquid language for page structure and content. This content loads from the server side, freeing up the browser’s “main thread” to load pages faster.
But efficient coding (ironically) takes more time. Many theme developers and Shopify agency partners use jQuery (for example) to get their jobs done faster at the expense of your merchant (and customer) experience.
And keeping poorly architected themes up to date with Shopify and browser enhancements requires inefficient hacks over time, slowing your site even more.
Uses code splitting
Code splitting is a technique that breaks code into smaller bundles that can be loaded independent of each other, rather than in one lump.
This enables browsers to load only the code necessary for the current view or page, leading to faster perceived performance and faster interactivity for users. Your above-the-fold content can load before content further down the page that users may never even scroll to.
Code splitting also keeps code cleaner and more organized for theme developers, making it easier to add features and enhance the theme over time, which means more feature enhancements and better support for you!
Uses link preloading
Instant.page is a rare JavaScript library that actually enhances web performance by speeding up link interactivity.
For example, when enabled in the settings of a Clean Canvas theme, it detects when a user’s about to click something (tracking mouse and finger movements) and preloads the content, shaving 65 to 100ms off the actual interaction time, making it feel instant to users.
Offers native sections that replace third party apps
It’s always recommended to build functionality into your Shopify theme rather than use third party apps when you can. This reduces heavy JavaScript and ensures the majority of your files “live in one place.”
A feature-rich Premium Shopify theme provides sections you can’t find in free Shopify themes (all variants of the minimalist Dawn theme) such as breadcrumbs, mega menus, scrolling banners, media grids, product card enhancements and so much more.
Provides control over image lazy loading
Shopify reports that 82% of Shopify stores improperly “lazy load” their Largest Contentful Paint element (or the “main” above-the-fold content on a page).
This hurts your Core Web Vitals score with Google, which means you may rank lower in search engines. But it also leaves your visitors waiting longer than they need to for banners, product images, videos etc.
Because you can put your theme sections anywhere on your page – above the fold, below the fold or wayyyyy below the fold – you want additional controls to tell browsers if they should actually lazy load or “eager load” primary content.
Clean Canvas themes like Enterprise and Canopy provide “Load the section without animation” settings that remove lazy loading for specific above the fold content without a developer’s help.
Need help finding a fast performing Shopify theme?
Clean Canvas has invested thousands of hours into building the world’s fastest Shopify themes, including Canopy and Enterprise.
Their new theme framework ships with technical enhancements that save you tens of thousands in developer costs and provide white glove support throughout the life of your theme.
Check out Clean Canvas’ portfolio of Premium Shopify Themes in the Shopify Theme Store.