Optimizing web for maximum perf
Ever stumbled upon a website that feels like it loads before you even click? It’s McMaster-Carr’s website.
Ever stumbled upon a website that feels like it loads before you even click? It’s McMaster-Carr’s website.
They are dealing with 700'000 products. If you navigate on it, you might notice how unbelievably fast their website is, their user experience is fantastic too. But what’s their secret sauce? How does a company over a century old outpace modern websites that are packed with the latest tech?
Let’s dive into the fascinating world of McMaster-Carr’s web engineering marvel. We’ll explore how they combine tried-and-true techniques with smart optimizations to create a user experience that’s both blazing fast and delightfully simple.
TLDR;
Here’s a summary of the optimization techniques used:
- server-side rendering
- HTML prefetching
- optimizing page changes
- aggressive caching strategies
- service workers
- preloads and DNS prefetch
- critical CSS in style tags
- optimized images
- tailored JavaScript loading
Server-side rendering: Back to the future
Remember the good old days when websites served HTML directly from the server? They use server-side rendering (SSR), meaning the HTML for each page is generated on the server and sent fully formed to your browser.
Why is this a big deal? Modern websites often rely on JavaScript frameworks to build the page in your browser, which can slow things down. By serving ready-to-go HTML, McMaster-Carr leverages the browser’s innate ability to parse and render pages quickly. It’s like being handed a finished burger versus being given the ingredients to cook it yourself. And it’s great for SEO!
How you can do it:
- Choose a server-side framework: Use Node.js-based frameworks like Next.js for React or Nuxt.js for Vue to render HTML on the server.
- Component-based architecture: Utilize the component-based structures provided by these frameworks to efficiently build and manage your UI.
- Optimize server-side rendering: Leverage built-in optimizations in Next.js or Nuxt.js to ensure fast and efficient server-side rendering without excessive reliance on client-side JavaScript
Learn more about server-side rendering on MDN.
HTML prefetching: Psychic page loading
McMaster-Carr doesn’t just wait for you to click a link — they anticipate it. When you hover over a link, the website starts prefetching the HTML for that page. If you do click, the page appears almost instantly because, well, it’s already there!
How you can do it:
- Use link rel prefetch: Add
<link rel="prefetch" href="next-page.html">in your HTML when a user hovers over a link. - JavaScript prefetching: Use JavaScript to detect link hovers and programmatically fetch the next page’s content.
Read more about prefetching on web.dev.
Optimizing page changes: Only what’s necessary
Instead of reloading the entire page every time, McMaster-Carr updates only the parts that change. Using techniques like pushState and shell swapping, they replace just the content that varies from page to page.
How you can do it:
- Implement AJAX navigation: Use the History API (
pushState,replaceState) to update the URL without a full page reload. - Partial page updates: Replace only the main content container when navigating to a new page.
Learn about the History API on MDN.
Aggressive caching strategies: Because waiting is so last season
Caching is like the memory of the internet — it remembers so you don’t have to wait. McMaster-Carr uses aggressive caching on multiple levels:
- Content Delivery Network (CDN): They store pre-rendered HTML on servers geographically closer to you. It’s like having a mini McMaster-Carr server in your neighborhood.
- Service workers: These are scripts that run in your browser’s background, caching HTML and other assets for even faster subsequent loads.
How you can do it:
- Set up a CDN: Use services like Cloudflare or AWS CloudFront to distribute your content globally.
- Cache-Control headers: Configure your server to send proper caching headers (
Cache-Control,ETag) for static assets. - Leverage browser caching: Ensure that repeat visits load resources from the cache whenever possible.
Understanding caching with Cache-Control headers.
Service workers: Your browser’s personal assistant
Service workers are a game-changer. They intercept network requests and serve cached content when available. McMaster-Carr uses them not just for their website but also to power their mobile apps, ensuring a consistent experience across devices.
How you can do it:
- Register a service worker: Write a service worker script and register it in your main JavaScript file.
- Caching strategies: Use caching strategies like “Cache First” or “Network First” depending on your content needs.
- Offline support: Enable your site to function even when the user is offline by serving cached pages.
Getting started with service workers.
Preloads and DNS prefetch: Getting a head start
McMaster-Carr employs preloading of critical resources — like fonts and logos — so they’re ready when needed. They also use DNS prefetching to resolve domain names in advance, shaving precious milliseconds off load times.
It’s like ordering your meal before you arrive at the restaurant. By the time you sit down, the food is on its way.
How you can do it:
- Preload critical assets: Use
<link rel="preload" href="style.css" as="style">to preload CSS, JS, or fonts. - DNS prefetch: Add
<link rel="dns-prefetch" href="//example.com">to resolve domains ahead of time.
Understanding resource hints: Preload, prefetch, and more.
Critical CSS in style tags: Dressing up quickly
They embed critical CSS directly into the HTML using style tags. This allows the browser to apply essential styles immediately, preventing that awkward flash of unstyled content.
Non-critical CSS loads separately but doesn’t block the initial render. It’s the web equivalent of getting dressed in the essentials before putting on accessories.
How you can do it:
- Identify critical CSS: Use tools like Penthouse to extract above-the-fold CSS.
- Inline styles: Place the critical CSS inside
<style>tags in the<head>section. - Load remaining CSS asynchronously: Use
media="print"hack orrel="preload"to load non-critical CSS without blocking rendering.
Optimized images: Because size matters
Images can be a significant bottleneck in web performance. McMaster-Carr:
- Sets fixed widths and heights for images to prevent layout shifts.
- Uses CSS sprites, combining multiple images into one file to reduce HTTP requests.
An engineer might say, “Send a single image with reasonable caching headers… and before you know it, you have reduced the number of HTTP requests to your site by a thousandfold.”
How you can do it:
- Specify image dimensions: Always set the
widthandheightattributes on<img>tags. - Use CSS sprites: Combine small images into a single file and use CSS
background-positionto display the correct part. - Compress images: Use image compression tools like ImageOptim or online services to reduce file sizes.
Optimizing images for the web.
Tailored JavaScript loading: Less is more
Instead of loading one giant JavaScript file, they load only what’s necessary for each page. They use older libraries like YUI (circa 2008) and jQuery, but they’ve optimized their use to avoid bloat.
As one seasoned developer noted, “Bringing in said frameworks will cost you an enormous performance penalty… But yes, without a Rails-inspired framework… perhaps tied with Mustache.”
How you can do it:
- Code splitting: Use tools like Webpack to split your JavaScript into chunks loaded as needed.
- Lazy loading: Dynamically load scripts when they are required.
- Avoid unnecessary libraries: Only include libraries that are essential for your site’s functionality.
Guide to optimizing JavaScript.
Old technologies meet modern needs
It’s fascinating that McMaster-Carr achieves such performance using what some might consider “old” technologies. But here’s the kicker: newer doesn’t always mean better.
- Simplicity over complexity: They avoid overly complex frameworks that add weight without proportional benefits.
- Understanding the basics: By leveraging fundamental web principles, they sidestep common pitfalls of modern web development.
Performance metrics: The proof is in the pudding
Metrics like Largest Contentful Paint (LCP) show how quickly the main content loads. McMaster-Carr clocks in at an impressive 174 milliseconds for LCP.
To put it in perspective, blink twice — that’s roughly the time it takes for their page to load its most significant content.
Tools to measure performance:
User-centric design: Knowing your audience
McMaster-Carr’s users are machinists, fabricators, and industrial professionals. They might be using older devices or working in environments where flashy animations are more hindrance than help.
By focusing on speed and reliability, McMaster-Carr ensures their users can find what they need without fuss. As one user pointed out, “Their target audience… need a fast, reliable website to quickly locate products.”
Lessons learned: Why can’t every website be this fast?
So, with all these “obvious” optimizations, why aren’t more websites as fast as McMaster-Carr’s?
Organizational incentives and team dynamics
In many companies, large teams work on web development, often leading to bloated codebases and unnecessary complexity.
“Once you have dozens of front-end developers… it’s almost impossible to produce something non-bloated.”
The allure of new technologies
There’s a tendency to adopt the latest frameworks and libraries, sometimes without considering if they’re the right tool for the job. This can lead to websites that are heavy and slow.
I saw this interesting comment on reddit: “I don’t find bloated frameworks all that helpful… Many people use them for the simple fact that they don’t know any better.”
Business models and design choices
Not every website has the same goals. Some rely on advertising, heavy analytics, or need to showcase rich media content, which can add weight.
However, McMaster-Carr shows that focusing on core user needs can lead to better performance and user satisfaction.
Conclusion
McMaster-Carr’s website is a masterclass in web performance and user-centric design. By combining server-side rendering, smart caching, optimized resources, and a deep understanding of their users, they’ve created a web experience that feels instant.
Studies show that for every second of delay in mobile page load times, conversions can fall by up to 20% (source).
So next time you’re frustrated with a sluggish website, remember that sometimes, the best solutions aren’t the newest ones — they’re the ones that focus on the fundamentals.
As for me, I’m off to browse some industrial supplies I didn’t know I needed until now.
You might find Wes Bos’s video on McMaster-Carr’s website optimizations particularly insightful, as it delves into many of the strategies discussed here.
Thanks for joining me on this deep dive into web performance. If you enjoyed this read, feel free to share it with fellow web enthusiasts!