The McMaster-Carrification effect

This awesome tweet from Kenneth Cassel went viral last week, covering the very cool McMaster-Carr website, mcmaster.com.

It's super fast. Wes Bos has a great vid covering some of the specifics of how it works.

I have a strange obsession with perf on this blog. Hence, the McMaster-Carrification effect. I grabbed some implementation details that I particularly liked from the site, focused on reflow and time to contentful paint. Here's a few things I implemented:

  1. Inlined all SVG for the nav icons. I mentioned using the Lucide CDN for my nav icons - that was a quick, easy way to integrate. But while loading those icons from the CDN, the img tags are blank. Instead, I inlined the SVG tags directly into the nav. No external load needed.
  2. Set width, height, constraints for images. I actually quite like the look of McMaster's images - they're hard-coded at certain width/heights, and they have a border wrapping them inside the layout. All images are now constrained to a consistent width, which reduces layout shift as they load.
  3. Beginning to investigate preloading. All the external hostnames used on mcmaster.com are preloaded, using `dns-preload`. I should be able to implement this for a few of the JS and font dependencies.

Getting to 100 in Lighthouse

Before this, I'd already gotten this site to 100 on Lighthouse's Performance score. If you control the scripts and CSS on your site, Chrome's Eliminate render-blocking resources guide gets you most of the way. For me, that meant adding async to script tags and deferring CSS with the print media trick:

<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

Setting media to print means the stylesheet only applies when printing, so it doesn't block rendering. When onload fires, media switches to all and the styles apply.

Perf chasing is fun! If this was a real product, and not a silly blog, it wouldn't make a ton of sense to invest heavily here. PMF is more important. But when it's a few blog posts a month, chasing an extra 100ms in render time is a fun way to spend the time.