Wes Bos
4 HN recommenders · recommended in 4 months, 2024–2025
13:39 · 2.4M views · Oct 18, 2024
Wes Bos breaks down the techniques behind the McMaster-Carr website's speed: server-rendered HTML, prefetching, CDN and service worker caching, preloading, critical CSS and fixed-size images. He also notes its old-school jQuery and YUI JavaScript.
HN points to it as the clearest frontend explanation of why McMaster-Carr feels so snappy, often contrasted with slow modern UIs.
5 comments from Hacker News
To save you a click: apparently [LINK] is very fast. A person who worked there chimes in [LINK] saying they focused on speed (competing with paper catalogue), used VB.net and SQL Server with stored procs. Some other guy explains [LINK] : · Agressive pre-loading pages on hover · fixed image dimensions - there is no layout shift when they load · Dependency Injection (huh?) - only loading the JS needed on the pages where its needed · Uses pushstate to change pages so it feels faster than a full reload · agressive CDN and browser caching · Server rendered HTML (ASP .net) Funny enough they load almost a meg of JS (YUI and jQuery) but you dont notice because it feels so snappy He made a video explaining it: this video which is a lot more interesting than the inane tweet. Maybe we could replace the link with the video?
As an interesting example of the opposite UI experience, this video goes into why the McMaster-Carr website is so incredibly snappy to use: this video . It's different from GitHub in many ways (no user-generated content, day-by-day mostly static pages), but it's interesting to see how good a browsing experience can be. It makes sense given that their value as a company depends so much on making it quick and easy to find exactly what you need.
I am SO glad jofzar posted this - I remember this website but couldn't recall the company name. Here's a good video on how the site is so fast, from a frontend perspective: this video
The low lag part is especially impressive. Here is Wes Bos taking a deeper dive into the intricacies of technologies used to accomplish this: this video
There is (was?) an absolutely fabulous answer on quora.com which detailed how this site came to be --- from memory: - initial ecommerce site was a mess (basically a page-by-page recreation of the catalog?) which saw minimal usage - the redesign, which focused on usability --- notably reduced cognitive load --- resulted in an immediate uptick in orders which grew markedly for a long while until it represented the vast majority of their business EDIT: and also optimized for repeat orders on a schedule If someone could find that, or a better writeup, I'd be grateful (it's _not_ the Medium.com article) and this page: [LINK] is just a mentioning by the company which did the underpinnings, not the overall architect. This link is decent: [LINK] There was of course previous discussion of this here: [LINK] Video on why the site loads so fast: this video (which is from the Medium.com article)