How is this Website so fast!?
Wes Bos4 HN recommenders · recommended in 4 months, 2024–2025
explainer · intermediate · evergreen · 2024–2025 on HN
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.
Up next
10 mo on HNYouTube's copyright system isn't broken. The world's is.
Tom Scott
13 HN recommender · 2020–2024
4 mo on HNWorst Nuclear Accidents in History
Kurzgesagt – In a Nutshell
7 HN recommender · 2021–2023
14 mo on HNWhat the heck is the event loop anyway? | Philip Roberts | JSConf EU
JSConf
16 HN recommender · 2015–2025
13 mo on HNRich Harris - Rethinking reactivity
You Gotta Love Frontend
15 HN recommender · 2019–2026
10 mo on HNCrockford on JavaScript - Volume 1: The Early Years
YUI Library
10 HN recommender · 2013–2022
10 mo on HNRailsConf 2016 - Turbolinks 5: I Can’t Believe It’s Not Native! by Sam Stephenson
Confreaks
6 HN recommender · 2017–2020
10 mo on HNJavaScript: The Good Parts
Google TechTalks
11 HN recommender · 2009–2020
9 mo on HNPete Hunt: React: Rethinking best practices -- JSConf EU
JSConf
9 HN recommender · 2014–2025
8 mo on HNDan Abramov - Live React: Hot Reloading with Time Travel at react-europe 2015
ReactEurope
12 HN recommender · 2015–2022
7 mo on HNHey Underscore, You're Doing It Wrong!
InfoQ
9 HN recommender · 2014–2022
6 mo on HNChris McCord - Keynote: Phoenix LiveView - Interactive Apps without Javascript - ElixirConf EU 2019
Code Sync
4 HN recommender · 2019–2024
6 mo on HNOAuth 2.0 and OpenID Connect (in plain English)
OktaDev
7 HN recommender · 2019–2026
5 comments from Hacker News
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
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?
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)