A snappy, fast-loading, site can be such a standout, remarkable experience - we're seeing it pay off in a very big way for McMaster-Carr on Twitter this week.
It all started when Kenneth Cassel, founder of rmfg.com, an automated sheet metal manufacturing company, remarked on how a 100-year-old industrial supplies company had such a stand-out snappy online shopping experience.
// Detect dark theme
var iframe = document.getElementById('tweet-1847034096062710087-590');
if (document.body.className.includes('dark-theme')) {
iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1847034096062710087&theme=dark"
}
This tweet got tens of millions of views at the time of writing, which is the kind of marketing companies would pay top dollar for.
Who is McMaster-Carr?
If you're like me, you've probably never heard of them until now. Turns out, this industrial supplies company was ranked third after Amazon and Barnes and Noble way back in 2002. So they've always had a core audience of users that have been using this site on the regular. What's incredible is how fast the site experience is, how quickly it lets you drill down a catalog of hundreds of thousands of parts.
Studies have shown that a slow-loading site can lead to frustrated customers and lost sales. That's why companies invest heavily in the latest technologies and frameworks to keep their websites blazing fast. So, it might raise an eyebrow or two to learn that McMaster-Carr achieves this feat with what some might consider "legacy" technology.
They utilize ASP.NET for server-side rendering, a framework that, while robust, is often associated with older web applications. Their JavaScript relies on jQuery and even the now somewhat obscure and vintage YUI (Yahoo! User Interface Library).
Hat Tip to Wes Bos for this break-down into their technology stack.
// Detect dark theme
var iframe = document.getElementById('tweet-1847047872770199647-82');
if (document.body.className.includes('dark-theme')) {
iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1847047872770199647&theme=dark"
}
The McMaster-Carr website feels incredibly fast due to a combination of clever performance optimizations. While it might appear like a simple, old-school website, there's a lot happening behind the scenes to ensure a smooth and responsive user experience. Here's a breakdown of the key techniques:
Server-Side Rendering: The website primarily relies on server-rendered HTML. This means that the server generates the complete HTML for each page before sending it to the browser. This avoids the need for client-side JavaScript to construct the page, resulting in faster initial load times.
Prefetching: When you hover over a link, McMaster-Carr cleverly prefetches the HTML for that page in the background. This way, if you do click the link, the content is already available, leading to almost instantaneous page transitions.
CDN Caching: McMaster-Carr utilizes Akamai, a CDN (Content Delivery Network) to cache its pre-rendered HTML around the world. This ensures that users can access the content from the server closest to them, reducing latency and load times.
Client-Side Caching (Service Workers): They also employ service workers, which act like a browser-level cache. Once a page is loaded, the service worker can intercept subsequent requests and serve the cached version, making repeat visits lightning fast.
Preloading Assets: The website preloads critical assets like fonts and images, instructing the browser to download them early in the loading process. This prevents delays caused by the browser having to discover and request these assets later on.
Critical CSS: McMaster-Carr inlines the most important CSS styles directly into the HTML, ensuring that the initial layout and styling of the page are applied immediately without waiting for external CSS files to download.
Optimized JavaScript Delivery: They practice intelligent JavaScript bundling, loading only the necessary JavaScript code for each specific page. This reduces the amount of JavaScript that needs to be parsed and executed, contributing to a snappier experience.
Fixed-Size Images and Sprites: McMaster-Carr uses fixed dimensions for images to prevent layout shifts during loading. Additionally, they utilize image sprites, combining multiple images into a single file. This reduces the number of HTTP requests, optimizing page load times.
Speed by Design
If you're in a boring old space with lots of players, this is always a good reminder of how important speed optimizations can be for the overall user experience. It's a reminder that effective web engineering is not always about chasing the latest design trends and frameworks.