
How is this Website so fast!?
About this video
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.
Why it appears in the archive
HN points to it as the clearest frontend explanation of why McMaster-Carr feels so snappy, often contrasted with slow modern UIs.
AI-generated summary and labels from the source dataset; verify important details against the video. Source & credits.
From the Hacker News discussion
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: [VIDEO] which is a lot more interesting than the inane tweet. Maybe we could replace the link with the video?
Read original comment ↗The low lag part is especially impressive. Here is Wes Bos taking a deeper dive into the intricacies of technologies used to accomplish this: [VIDEO]
Read original comment ↗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: [VIDEO]
Read original comment ↗As an interesting example of the opposite UI experience, this video goes into why the McMaster-Carr website is so incredibly snappy to use: [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.
Read original comment ↗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: [VIDEO] (which is from the Medium.com article)
Read original comment ↗