Breaking down the McMaster Carr website and the techniques they use to make it so dang fast.00:00 - Intro00:38 - Server Rendered HTML00:54 - Prefetching HTML...
Nah, a lot of old tech. I used to work on shit like this… loading all your images (including the fucking rounded corners for IE) into a sprite… setting up caching, using prefetching and inlined CSS/JS for critical path stuff.
There was a whole industry around web performance in the days that a customer might be trying to download your site over their 256 kbps connection.
It’s neat tech and I miss fiddling with it. I honestly found it a lot more fulfilling than the SPA era of web design.
Aw, c’mon! Who doesn’t enjoy piping ten megabytes of JavaScript through Webpack to achieve those crucial on-scroll effects on an otherwise static page?
I once had to add in custom tab behavior because a green screen used to work in a specific way in an ordering page. The IBM system that we replaced only had a couple of users but was responsible for something like 30-40% of all orders in a small company. So in it went! Fun times.
Nothing has ever worked less than giving people text and getting mad when they have it. It was a joke on Geocities in the ninteteen goddamn hundreds, and yet people keep fuckin’ trying.
The author links their tweet saying “your website should not exceed in file size the major works of Russian literature.” At the time, that page on Twitter was 900 KB. Today it is 11 MB.
By SPA I mean “single page application” it’s currently the dominant approach and powered in a large part by technologies like react and node. I’m not certain when it started precisely… with technology it’s more a case of “rising to prominence” rather than “first happened” I think it probably really started going around 2014 with HTML5?
SPAs are still pretty hot but they’ve waned in popularity due to overuse and general complexity. Essentially your website becomes a single page that just swaps out what’s shown to the user as they “navigate” between different parts of the site. When well done this can make a site incredibly responsive, but it’s often quite poorly done and responsiveness can end up blocked by server requests anyways.
Interestingly the pendulum is now swinging the other way. If you look at next.js for example, server generated multi page applications are back on the menu!
I’d place it right around when angular started gaining traction. That’s when it became common to serve just one page and have all the navigation happen in JavaScript.
TL:DW Magic
Nah, a lot of old tech. I used to work on shit like this… loading all your images (including the fucking rounded corners for IE) into a sprite… setting up caching, using prefetching and inlined CSS/JS for critical path stuff.
There was a whole industry around web performance in the days that a customer might be trying to download your site over their 256 kbps connection.
It’s neat tech and I miss fiddling with it. I honestly found it a lot more fulfilling than the SPA era of web design.
Aw, c’mon! Who doesn’t enjoy piping ten megabytes of JavaScript through Webpack to achieve those crucial on-scroll effects on an otherwise static page?
Hey let’s not lie to ourselves… most of those megabytes of JS are there to disable the copy functionality for anyone browsing our site.
Why? … reasons. Someone in marketing said a thing once.
I once had to add in custom tab behavior because a green screen used to work in a specific way in an ordering page. The IBM system that we replaced only had a couple of users but was responsible for something like 30-40% of all orders in a small company. So in it went! Fun times.
Nothing has ever worked less than giving people text and getting mad when they have it. It was a joke on Geocities in the ninteteen goddamn hundreds, and yet people keep fuckin’ trying.
See: The Website Obesity Crisis.
The author links their tweet saying “your website should not exceed in file size the major works of Russian literature.” At the time, that page on Twitter was 900 KB. Today it is 11 MB.
Come to the HTMX side…
<Pig Latin instructions unclear, entire site rewritten in XHTML />
Such a nice library.
Noob question: What is the SPA era of web design; when did it roughly start?
By SPA I mean “single page application” it’s currently the dominant approach and powered in a large part by technologies like react and node. I’m not certain when it started precisely… with technology it’s more a case of “rising to prominence” rather than “first happened” I think it probably really started going around 2014 with HTML5?
SPAs are still pretty hot but they’ve waned in popularity due to overuse and general complexity. Essentially your website becomes a single page that just swaps out what’s shown to the user as they “navigate” between different parts of the site. When well done this can make a site incredibly responsive, but it’s often quite poorly done and responsiveness can end up blocked by server requests anyways.
Interestingly the pendulum is now swinging the other way. If you look at next.js for example, server generated multi page applications are back on the menu!
Yea, I don’t want to totally shit on SPAs but server-side rendering has a lot of advantages and is so much fucking simpler.
I’m a PHP dev and DB specialist in my day job - there are a lot of good server-side tech options.
I’d place it right around when angular started gaining traction. That’s when it became common to serve just one page and have all the navigation happen in JavaScript.