How is this Website so fast!?

how is this website which is 100 years old it's not 100 years old but 100y old company how is they have the fastest website on the internet that's a tweet from Kenneth Castle last night um and I did a quick look into like why does this website feel so fast but I thought let's make a quick video in detailing why it is because from a high level it looks like a old website and you oh good old HTML is nice and fast but that's not the case is I believe that the engineers behind McMaster car's website are doing everything possible to make this website as fast as they possibly can and they are using all of the tricks in the book so let's dig into how I figure that out as well as like explaining how a lot of these things work so first of all they are server rendering all of their HTML right it's not using any JavaScript framework or anything like that um it simply the server returns HTML and the browser is very good at rendering out HTML now the they are also prefetching HTML so watch when I clear this out and I hover over some of these links here you'll notice that my network is going crazy and if you click on one of those you'll see that it is returning some HTML so what's happening is when you hover over top of a link they send the request to get the HTML for that page um and then if you do end up clicking on it they're able to watch when I click on this anchors right here watch the URL bar and watch the actual page the page renders before the URL changes and what's happening there is they are are simply just taking this HTML swapping out the they call it a shell I I understood from viewing Source they're just replacing the part of the website that does change and things like the nav and your your order maybe your shopping cart those things don't change from page to page so obviously they they change that that's not new we've been doing that for a long time with push State however they are doing that so it feels nice and snappy so between R pre-rendering it pre- downloading it and and then using push state to put it on now they are also using um caching pretty aggressively so if we take a look at the headers of this one of these requests you can often see something like these um headers here that will tell you if it's been cashed or not this one looks like it was not cash but you're often going to see something like hit or miss in here and then this aami Technologies also tells you that they're using a CDN to store the pre-rendered HTML that TCP uncore what that mean that's using something called squid cache and that's just a little proxy that will will cash a lot of your HTML now they are also using a service worker for the HTML so if you take a look at uh your network here and I if I clear it out click on the homepage again you're going to see that oh in that case it was 65 milliseconds to load that page that's very very fast at coming from the server but I think if I refresh this page here you'll see now it's 7 milliseconds and it's because they're caching it in both on a CDN around the world but they also are serving caching it in your browser using something called a service worker um and what that allows us to do is you can intercept requests with a service worker and then serve up the cache version that's especially helpful for offline Progressive web apps I believe they're using this to power their IOS app and the mobile app is also really really good now viewing Source on here you take a look around at what they're using these capital letters tell me immediately they're using ASP um that's just a thing that asp. net is does quite a bit but there's some good Clues into to what's going on right here um these right here these link preloads and DNS prefetch these preloads tell the browser hey I'm going to need this right here is that's their logo and these are all web fonts and it's telling the browser hey I know you don't know this yet but I need you to go ahead and pre-download these fonts for me so that when I do need them they're going to load instantly if you don't do this what tends to happen is the HTML will load and then it once it downloaded all the HML it will start to parse it out right and the parsing of it will often come across things that it needs uh links to C external CSS links to JavaScript links to images um but what often happens is that you oh I found a CSS file the CSS file oh I found that I need a web font so it takes two or three waterfall requests before you actually get to it um and by preloading it in the head before it even knows it needs CSS it will already have those files hot and ready for you like Little Caesars right this also DNS prefetch part of the request cycle is um of course you have to go download the actual image but part of that is simply just finding out if it image is on images one. mcmaster.

com where is the server for that right it has to do a DNS lookup and and that takes some time right so you can you can tell the browser hey figure out these domain names figure out where those actually live so that when I make a request for an image you already know that part and there's not going to be a DNS lookup and it's going to be much faster um they're doing a whole bunch of other preloading here as well we'll get into how do they do images in in just a second um but what is also kind of interesting is their CSS so if you if you scroll and scroll and scroll and if you look for a CSS on the page you're not actually finding any link tags that that load in CSS so what they're doing here is they are loading their CSS in a style tag before you even get to the body and what that does is this is called critical CSS is the browser has already downloaded the CSS doesn't need to stop and go and get it and it it just has to parse all of that CSS before you even load any HTML on the page and what that has a benefit of doing is that as soon as this HTML is rendered to the page the browser already knows what CSS to apply to it and you're not going to get any weird page Jank or whatever just immediately that's called critical CSS there also is some JavaScript here it looks like it does load in additional CSS that is needed but the stuff to load the actual homepage and so the sort of layout is loaded right in line right as part of the HTML um and they they must have some process for figuring out what what is actually needed also with CSS if you take a look at the performance tab here you'll see 174 milliseconds for their largest contentful paint that's how long it takes the browser um to render the largest element on the page and and if you have a bunch of CSS and oh then it loads in an image and then then then that moves and oh download some more CSS and then a web font okay I gotta got to render that right there's several times it goes d d d to to render this is extremely fast 174 milliseconds because they have that preloaded CSS and nothing there's no Jank right look at this the only thing you you see change is a split second well while these images are downloading but nothing else moves on the page when we're doing that now let's talk about the the actual images on the page so one thing they're doing if you inspect element on these things here is they have fixed width and Heights for their actual images and what that allows you to do is if the browser doesn't know how large an image is going to be it's going to give it 0 pixels by0 pixels and then it downloads and then it has to push down the content right that's that's another re render but if you explicitly give an image tag or in this case they're using background images I'll get to that in a second if you explicitly give it a spot and then the image loads and it fits exactly that spot you don't get any any Jank on that actual page by the way I know I'm going to make performance people mad um about this because like I'm not a performance guy but I I do know how to make websites fast I might not be using all the correct words but um not too too worried about that the actual images on there they're using an ageold technique called a Sprite um look at this if you open this up in a new tab this is all of the images for that page in a single image and what that does is it cuts down on the amount of requests that are actually needed to download it so it just downloads one image 93k so yeah one 93k worth of of actual images pretty pretty nifty um that's probably smaller than one image on actual on Amazon now let's talk about the actual JavaScript needed on the page so if we go to our Network and we do a hard refresh of the page here and we filter for JS you'll see they are loading quite a bit of JavaScript so this this one is that's a browser extension but everything else um I believe I calculated it it's different for every single page which is is what they're doing is they're figuring out what JavaScript is need on what page um and they're only loading that JavaScript on that page I call that dependency injection in the Tweet people got mad they're essentially saying I need these dependencies for this page so only load them on that page and if you take a look at if you start clicking around here and look at one of the product pages in The response there will often be some data in this little uh metadata which tells it what pieces of JavaScript it actually needs here we go JS include file paths so they must have some tooling on the back end that will split up the JavaScript by page that's very easy to do in if you're using like a server rendered react framework and you don't have to worry about it but there are lots of websites out there that simply just load all the JavaScript on all the pages because it's too hard to figure out what JavaScript is is actually needed so it looks I don't know much about asp. net this might be just part of their web framework um but the server knows about their CSS their images their JavaScript and they're able to bundle it in such a way where they only load the actual necessary JavaScript on the page now what how much ja what JavaScript are they actually using um I took a dip into that as well so if we go to our JavaScript tab here take a look at some of these um first of all if you see window. performance and performance Mark you tell you know that they care a lot about this type of stuff right so they are measuring absolutely everything on this page to make sure that it it works really well um but I was clicking around trying to see what they're using and they're using Yi which is yui copyright 2008 this is a very very old library a free open source JavaScript CSS libr for building richly interactive web applications right this is is a long long time ago it was from Yahoo and they also are loading in jQuery on this page as well I'm not sure if you can do it from the console or not yeah there jQuery right there so a wicked fast website does not matter what framework or whatever you're using you can be using 15-year-old Tech and it's still loading a fair amount I think it was 800k of JavaScript but it feels fast because they're doing it in such a way that it's not getting in the way of the actual importance stuff which is loading the HTML on the page and not blocking and not rendering doing a whole bunch of of funky stuff so this stuff can be done with server rendered react this stuff can be done with 20-year-old uh ASP Tech which is is really interesting to me there are Parts on the website where they will be slow um because I'm sure they have 700,000 uh products on here they have to do database lookups can be slow right I'm sure they spend a lot of time improving the per perf on that they have to render it all out they got to cash it all so like there are look at this so in that case it it was that was a pretty good spinner showing on that page not brutal but I'm on pretty fast internet here I'm sure I'm close to it but but because they're using all the techniques that we just talked about the website feels really fast it works really fast and the people that are using this website here they need to be able to find lid support hinges that have gas Springs and work up to 392 de and I need a 19.