Update to the Fastest BigCommerce Theme Across All Devices with Cornerstone 4.0
This month, we’re excited to announce the release of the latest major version of Cornerstone, version 4.0. As our flagship Stencil theme and the base theme for developers, we’re on a mission to make Cornerstone the fastest ecommerce theme available. Over the last year, we’ve merged a number of enhancements focused on performance, but the updates bundled with the Cornerstone 4.0 release represent a significant leap forward.
Our biggest performance gains came from improvements to image. Historically, the large, high quality images that create the most impactful brand experiences were also the biggest culprits in slowing down page load. Merchants and developers needed to compress and resize images before uploading to avoid sabotaging page performance. With Cornerstone 4.0, we’ve added support for srcset and low quality image placeholders (LQIP). Users can now upload their largest format, highest resolution photography and BigCommerce will optimize the images for each device and network condition automatically.
Why Speed Matters
You’ve probably heard that every second counts when it comes to page load times, but it’s not always easy to quantify how much. Google’s Impact Tool lets you estimate the effect performance optimization can have on an internet retailer’s bottom line. Even a one second improvement can add up to significant gains. Let’s keep our example fairly conservative and imagine our store takes 3 seconds to load on mobile, has an average of 25,000 visitors per month, and a 2% conversion rate. If we were to shave off just one second, we could add about $23,000 to our annual revenue.
Start with a slower beginning speed, more traffic, or a higher conversion rate, and the effects are even more dramatic.
Why speed matters for developers
For developers, building themes that make merchants successful is a concern, but improving the underlying performance of the base theme also translates to a better developer experience.
Building a custom ecommerce theme involves layering technology onto the base theme, most notably JavaScript, that tends to affect performance. Because of this, it’s important to start with the fastest baseline possible before making customizations. We can think of this as a “performance budget” — basically, breathing room to customize the theme without noticeably impacting page load. The end result is a fast custom theme because you started with a very fast base theme.
What’s New?
Let’s dive into the technical details. You can review the full release notes on GitHub, but in this section we’ll highlight a few of the biggest updates in Cornerstone 4.0.
Srcset
Srcset is a technique for handling responsive images. When we talk about responsive images, we mean images that scale to fit devices with different screen sizes and resolutions. In terms of performance, this means that we’re never serving more image than the device needs. There are times when we need to supply a large, high resolution image — for example, a carousel image viewed on a large, retina display — but supplying a 4000px high resolution image on mobile would drag down page load. Responsive images ensure that the image provided is appropriate for the size and resolution of the screen.
The srcset attribute works by defining a set of images the browser can choose from along with hints that help the browser decide which image size to select. The browser decides which image to download based on the viewport size of the device being used.
CDNs like Akamai Image Manager can also detect the type of device being used and select the right image size and format, but the difference is that Akamai is performing this detection from the server. The philosophy behind shifting this responsibility to the browser is that the browser is best equipped to decide which image is needed because it’s closer to the user agent.
We’ve added a new {{getImageSrcset}} Handlebars Helper to Stencil that outputs a srcset string for an image. The helper accepts optional image size arguments to allow developers to more control over the images sizes being served, but if omitted, the helper uses a default set of sizes. Here’s what that looks like:
<img src=”{{getImage image “default”}}” srcset=”{{getImageSrcset image 100w=”100w” 200w=”200w” 300w=”300w”}}” />
Would output:
https://cdn00.bigcommerce.com/s-abc123/images/stencil/100w/l/my-huge-image.original.jpg 100w, https://cdn00.bigcommerce.com/s-abc123/images/stencil/200w/l/my-huge-image.original.jpg 200w, https://cdn00.bigcommerce.com/s-abc123/images/stencil/300w/l/my-huge-image.original.jpg 300wFor more information on srcset, check out Responsive images (MDN) and Responsive Images: If you’re just changing resolutions, use srcset (CSS-Tricks).
LQIP
LQIP stands for low quality image placeholders. It’s a strategy for making sure users have a good experience with image loading, even on a poor connection. If the user is on a fast network connection, the highest quality version of the image loads right away. But if the user is on a slower network, say a 3g mobile connection, we first load a lower quality placeholder image and swap to the higher quality image once it’s fully downloaded. From the perspective of the user, they’re able to see content right away that helps them understand what the page is about. When the higher quality image finishes downloading and replaces the low quality placeholder, the transition is pretty seamless — the user might not notice it at all.
For more info on LQIP, check out Low Quality Image Placeholders, Explained (Cloudinary blog).
Metrics
These changes, plus the improvements we’ve made over the last year, add up to our fastest theme ever, on desktop and on mobile.
Using Google Lighthouse, we’re recording load speeds that put Cornerstone in the top tier of performance:
How to Update
If you’re using a custom theme based on Cornerstone and it’s been some time since you’ve updated, we’d encourage you to update to 4.0. The improvements to frontend performance and shopper experience make this upgrade a worthwhile investment.
If you’re working with an uncustomized version of Cornerstone, you can upgrade to version 4.0 by following the prompts in your control panel.
If you’re upgrading a custom theme, the process is essentially the same git workflow you would use to maintain a forked project. Review our guide to Theme Updates and Version Control as well as external resources like GitHub’s guide to keeping a fork synced.
Developers using Stencil CLI with Cornerstone 4.0 should update to the latest CLI version (1.20.0) for compatibility.
Conclusion
We think that exceptional front end performance and a snappy storefront experience should be the default for merchants and developers building on Stencil. As web technologies become more complex and shopper expectations become more sophisticated, that’s not always easy. By bringing the latest industry best practices into our base theme, we hope to absorb some of that complexity so developers can focus on building a first-class brand experience instead of optimizing images.
Stay up-to-date on the latest Cornerstone releases by following the BigCommerce Developer Changelog and Cornerstone GitHub repository. Have questions? Reach out in the comments or by tweeting @BigCommerceDevs.
