The fastest site I ever built

I just released the fastest website of my career and in this video I want to show you all the unconventional ways that I used to actually get there and so if you look at my scores here it's all 100% across the board it's on slow 4G throttling on a mobile device I tried to get it like super rich in media there's all the content I create is on there everything about me about my setup all the conference things I do like all my videos like there's lots of list and things and you can see how fast this thing actually loads and that was my point I always want to figure out these kind of things on personal projects so I can then advice and work on with other people if let's say they do a e-commerce site so why not try all the ways I could figure out in the current space of how to make this thing fast let's talk about the stack that I used and then we'll just go over all kind of the different things that I've done to make this work and so I have used used n 3 which I tend to use but what I decided to do is not follow the current trend of doing server components and ISR caching and things like that I actually decided based on a bunch of research and trying things out to just go back old school I'm completely statically rendering this website and putting it on the CDN Edge as just a bunch of HTML files that's it for me that worked well I could have done server renders and then ISR cach it after the first visit and and then just have the same result turns out there's a tiny little bit of overhead if you do this on for sale or netlify because the whole n runs in one serverless function there might be a called start time and if some people will be able to kind of feel that sometimes and I noticed if I just statically rendered it I didn't have that it was it was marketly faster just simplifying that stack and so that's the first kind of strange thing I did so there's a bunch of speed optimization things I've done and so the first one is just the it's basically the biggest of all make sure you're not render blockable and we've talked about this for years right and so now that we have HTTP 2.0 with multiplexing you would think I can just in parallel load a bunch of files and it's no problem as it turns out I had a few hiccups here and because if you use N Out of the Box even if you just generate something static it will actually um create JavaScript and payload files to hide create the HTML after the fact and when you click on a link it becomes a single page app and that feels super fast because it's already pre-loaded and you can click and it just go through and no page requests it's actually super fast but when you do that in combination with how I built this with next content and markdown files that I use for my content it actually pre-loaded like 25 or 26 JavaScript files and Json payload files and as it turns out that's kind of fine but when you then also have a CSS file that it preloads that's rander blocking and those files are fighting with the CSS file on which one goes first and I didn't find a way to say first load my CSS then do the rest so what I tried and decided on is you know what I'm just going to kill all the JavaScript in this whole build I'm just going to go old school and just render HTML and where I need JavaScript I will just vanilla JS it and so in next here you have this option to say no script is true um I made a switch here because in certain instances I did want the scripts but now I turn it off and so now we didn't have all these pre-loading files there were no Json payload files to be loaded it was so much simpler and I did notice a difference in how fast everything started to feel on page load on the page itself to go to subsequent Pages it was kind of slower again but I found the solution for that but we'll go there in a sec so when we go back to my R me here yeah so I figured that out and I also removed removed um all this render blocking CSS actually um I decided to put all the CSS has CSS I had in all the components into one file I put it all in ta in CSS or like my more custom stuff my linear background gradients things like that um backdrop filter all the stuff I just wanted to like apply to things I put it in one file and then in the next config I said inline styles true and so it wouldn't even load that file anymore so the combination of having no preload loaded anything and no CSS as render blocking it just changed the vibe and the feeling of how fast something loaded and so I decided to keep that um it did give me some issues here and there and let's talk about these now if you use n itself just out of the box it looks at all the N link tags and then preloads all the payloads for those pages where they link to so when you go to that page it's super fast well when you turn off the script you don't have that anymore so I had to find out how to pre-render with speculation rules for chromium browsers and I did that in app. viw and so here you can see I just add a script tag with speculation rules that preload all my pages so when I go to the homepage the browser sees that and starts pre-loading in the background these pages in Hidden tabs I think something like that of course you see I'm loading all my top level uh links that's why this is so fast I might have to check um later on in my rum scores like real user scores of how fast this website is not lab scores but real user scores if this maybe slows it down for people who have like devices that are not so fast so I might kill like press kit and uses and things like that that like most people will probably go to the about page and the live and kicking page and the homepage so I might dial that down a bit but for now this is how I kept it and also you can see this here I actually have an inner HTML script tag that um does basically toggling off a class CU if I don't have JavaScript how do I do this I need to have a class name added or removed so I just added like these four lines of JavaScript that's all I needed for that so I don't need to lose in that load fgs and all the other overhead just for toggling a class just go old school and do this and it just works fine of course if you have more JavaScript and more stuff to do don't do it this way but for this project this worked perfectly fine um let's see so I actually use um more web safe fonts than I thought I would in the beginning CU I used lato font which is from Google it's great but I noticed my LCP um actually slowing down a little bit and also my commutative layout shift was going up a little because with the font in place it would look like this on a mobile but when it would render first and the later font wasn't there yet it was on two lines and then it just switched to one line and the LCP of this paragraph actually became bigger than the image load because of this custom font and there was some stuff going on and so I'm still using the font on all the titles and I'm using Daniel Rose n fonts module that does a bunch of really interesting things to load fonts super fast but going to a native font like um I think what did I do I have trp you say I cannot say this words this font I have this as my root and the cool thing is about this n fonts module if I just put font family anywhere in any CSS it will just load this from Google it just works super optimized so the combination of a a web safe font and a fancy font made this thing the fastest um let's see did I have something else yes of course we have images so all images are loaded through Cloud andary they are by far the fastest image delivery service I've ever seen they're really good at calculating the quality of the image that still looks makes it look good and what file format for that quality and it uses AI for that it's really really really good um I've said really good a while a few times now because that's what I think of cloud in are I use it for everything and so most images are lazy loaded except the ones above theault those are actually loaded as eager and they have a fetch priority of high which means in the chain of all the things that have to be loaded by the browser for this site these hero images are the first right and that's why this is so fast and so stable and the main thing is that I actually forgot in the beginning add a width and a height to the image cuz then the browser even if it's not loaded yet takes the space so your layout shift doesn't happen it's always stable like that's why this is so stable because it takes the space and of course it's already preloaded so that's how fast this gets right and so that's it about all the things I did and it's slightly unconventional in some ways like remove all the goodness next gives you out of the box and just cherry pick what you need with some vanilla stuff if you actually open the box dive in talk to the creators of these tools and figure things out you can get to this result if you don't do that you're you're at 90% of this result and you're still probably better than most but isn't it super fun to dive in and really get into the nitty-gritty well that's what I did and that's why this thing works so well and so feel free to look this up on GitHub it's open you can just run it and try um you can also ask me questions about it because it's quite strange and there's definitely um a few things that can be better but that's why this is an iterative process so feel free to ask me or tell me dude why this why that anyways um happy coding and I'll see you soon cheers