This New Speculation API Will Make Your Site 10x Faster

one of the easiest things you can do to make your site better is just to make everything load faster but this is much easier said than done especially when we start talking about pre-etching and pre-rendering it can get really complicated that is until now with the brand new speculation rules API built into the browser it makes doing pre-etching and pre- rering Incredibly easy but there are a few gotes that you really need to understand otherwise you could rack up a massive bill on your server in this video I'm going to be covering all the new

stuff related to this API showing you how everything works and showing you these gotu that you need to watch out for welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner and to really understand how this API works we first need to look at this really simple project where we're going to be implementing this to show you the problems that we have now and how we can fix them so for this project I have three very simple

pages I have a homepage I have a store Page and I have an about page and you notice they're all pretty much exactly the same they have a heading they have the links to all the other Pages they have an image and then also have some JavaScript on the page so if we look at one of the HTML files you can see here we have some stylesheet this is mostly just for our image to make it so it's small enough to fit on our page we then have a Javascript file that's loading and all this

is doing is running some code that adds this timeout finish to the bottom of our page after one second just to simulate what JavaScript looks like in this particular scenario and then finally we have our actual content with the heading the links and the image showing up on our page so this is pretty much everything you would have in a normal page we have HTML we have CSS we have JavaScript and they're all doing different things now right now if I click on a link it takes a little bit of time for that particular page

to load right now it's actually looking like it's pretty much instantaneous because everything is cached right now so to get around that problem I'm going to go over here I'm going to open up my Dev tools go to the network tab specifically and I want to make sure I have this disabled cach checked that's just going to make sure that we don't have any caching on our page at all to show how this would work for someone that's coming to your site completely fresh because most likely they won't have any cash on their page so

once we have that done we're just going to leave that open on the side and now immediately when I navigate between these Pages it's going to be a much slower load I mean it's still relatively quick because my internet is quite fast so we can go ahead and actually slow that down even more by coming into the throttling section here we'll just change it to fast 4G it doesn't have to be super slow to be able to notice what these load times look like now when I click on this page there's a little bit of

a stutter maybe half a second or so of time between when I click and when it actually loads up the page this is what we're trying to avoid with pre fetching and pre-rendering these are two different techniques to try to make it so when you transition between one page to another page it's much much quicker and all of this is done using the specul rules API if we look at the mdn documentation for this it's a rather new feature as you can see up here it's very limited in the availability right now it's pretty much

only available in chromium based browser so Chrome and Edge but hopefully eventually it'll come to Firefox and Safari now if you scroll down there's kind of two different ways we can Define our prefetching and our pre-rendering the first is by defining a hardcoded list of all the URLs we want to allow prefetching for and then secondly we can use this wear syntax to be able to have a lot of more fine- tuning for example we can do certain things with like glob matchers and like regular expression matching we can have like and and or Clauses

we can do like CSS classes so if I give something a CSS class it's going to be doing all the pre-rendering this is probably where you're going to be at most of the time is in this where Clause but I'm going to get started with this url's way of doing things because it's a little bit simpler and easier to understand so if we want to prefetch something we first need to put in a script tag so I'm going to come in here I'm going to create a script tag and this script tag right here is

going to have a type and this type is speculation rules so I'm just going to copy this over so I don't accidentally type it in correctly and inside of here you actually pass a Json file or Json object sorry eventually they are going to add support for adding in the source attribute but right now there's no support for that so you have to just hardcode it in line or you can technically use an HTTP header to point to a file but for the most part this is how you're going to be doing it so inside

of here we Define either prefetch or pre-render I'll get into the differences between the two and a second but I'm going to first start with prefetch and then we come in here we can pass an array of all the different things we want to prefetch and that's because you can pass multiple lists of objects that all have different requirements in our case we're just going to be passing a list of all of our URLs so we'll come in here with a list of URLs that's an array and inside this array we're just going to pass

our three separate URLs so we're going to have our homepage then we're going to have our about page which is just oops about. HTML let me make sure I put a slash at the front of that and then finally we're going to have store. HTML so this is just our three different pages that we're going to be doing our prefetching for now I'm going to copy this to all of our different files so we have the exact same prefetching behavior in all of our different files so now all three of our files have this prefetch

in there and it's saying anytime we encounter a URL that is either our home URL our about URL or our store URL we want to do prefetching for those pages now you won't notice a huge amount of difference in our code you'll notice it still has a bit of a lag time for when it loads up things it may be slightly faster but there's not a huge amount of difference but we can actually see what's happening inside of our page by pulling over our Dev tools you may notice immediately it doesn't look like a ton

of stuff happens for example when I refresh my page you don't really see anything happening over here you can see we got some prefetched cache going down here but for the most part not a ton of stuff is happening what we need to do is we need to go to the application tab this will actually tell us where everything happens inside this speculative load section so I'm just going to make this full screen so it's easier to see and you can see we have speculative loads we have rules to show you where all the different

rules are and then we finally have speculations and this tells us exactly what we're loading and exactly the status of that thing so in our case we're loading these three URLs that we defined in our page Zoom this in a little bit so it's easier to see we have set them to be prefetch and we can see that they are getting from this rule set that's in our store HTML which is if we look the page we're currently on and then finally the status for all of these is ready which means they have all been

successively prefetched onto our page this is because by default anytime you do pre-etching or pre-rendering it's going to get all the links immediately as soon as possible so as soon as your main page loads so in our case as soon as this page loads it's going to immediately start downloading all the different things that we're prefetching and by doing the prefetching what we essentially download is all of the HTML for the page it doesn't download our images it doesn't download our JavaScript or our CSS or anything like that it's just downloading the actual HTML for

the page which in some cases is enough but in this particular case our HTML is very simple and our image and CSS and JavaScript are much slower if we go back to our Network tab I'll clear all this out and I'll Zoom it out just a little bit and we'll click on our homepage here and you'll see that our actual Local Host which is our homepage that was coming directly from our cash so we didn't have to download anything but you can see our CSS our JavaScript and our image all took a considerable amount of

time to download because we're on this slower internet speed which is why it has a lag time when I click on the link to when it actually shows up on the page this is where pre-rendering versus pre fetching comes in so the idea behind pre-etching is you get just the HTML of the page if you do pre-rendering instead this is going to download the HTML for your page just like with prefetching but it's also going to download all the other resources required so it's going to get all your CSS it's going to get all of

your JavaScript it's even going to get all of the different images and by using pre-rendering we can essentially make our page transitions instantaneous you'll notice when I click on this store page that it should have been instantaneous the reason it wasn't is because I only changed my pre-rendering in one of my locations I want to make sure all of my pages have this pre-rendering set up now it doesn't matter which page I start on we'll start on our homepage here when I click on any of my other Pages it's going to be already rendered so

it's going to be instantaneous I'm going to click on the store right now and you'll notice it instantaneously changed to that store Page same thing I'm going to click on about right now and again it's instantaneously changing between them you will notice one really interesting piece of behavior though if we look down here where it says timeout finished this is supposed to occur 1 second after I page load you can see I call this main function 1 second after my page loads it's going to add this text but when I transition to a page that's

already been pre-rendered for example I transition to my store you can see that this text is already down there and that's because by default it's running all of your JavaScript which means when you're pre-rendering the page it's taking that page it's rendering essentially in another tab but completely invisible so you never actually see it and it's running this JavaScript code so it pre- renders the page and then one second later it adds this text that pre-rendered version of our page so all that different JavaScript is running that's a really important thing to understand because if

you have like analytic software inside of here that's logging like page views and stuff you don't want that to run during the pre-render now I'm going to show you later in this video how to fix that but we first need to kind of diagnose and look into a little bit deeper how this pre-etching and pre-rendering works so let's di back into the dev tools here we're just going to go over to that application tab again and this again gives us a way to actually see which pages are being pre-rendered here you can see that all

my pages are set to pre-render and they all have a status already which means they're immediately going to be accessible on my page when I click the link it's instantly going to show that content this is a really great way to create super responsive websites without actually having to worry about making your site super responsive because even if your page time is like maybe half a second to load the first page will obviously take a half a second to load but every subsequent page navigation is going to be essentially instantaneous as long as the user

spends at least half a second on your current page and again if we look at the network tab we can clear out everything and we can just go ahead and click on the home page and you'll notice the things that are being loaded is essentially nothing being loaded on our page same thing here if I click on store there's essentially nothing being loaded I'm going to do that one more time I'm going to click on about over here and you can see there's nothing being loaded on the page because it's already all been downloaded all

that this is doing is just displaying the content on the page for the most part when you're dealing with this pre-rendering and pre-etching I find the network tab is really not that useful because it kind of has weird information that shows up sometimes it shows a ton of information sometimes it doesn't actually show anything as you can see here and generally the page you want to look in is the application tab down by this speculative loads which is essentially way at the bottom of the page this gives you a much better idea of did my

current page pre-render up here for example it says this page that I'm on right now was pre-rendered and it also says that three other pages are pre-rendered by Home Store and about page in this particular case now you may notice immediately that there's a bit of a problem with this what if my page had a 100 a thousand a million different links on it well what's going to happen is it's going to make 100 1,000 1 million request to get all those different pages this is a huge problem because it's going to put a giant

load on your server because if again you have 100 different links the user could click on now every time they load a page it's making 100 additional requests to your server this is not only difficult for your server because it's going to rack up your bill but it's also difficult for the user itself because now they're requesting 100 additional Pages this is not something that your user generally wants to do instead they probably only want to prefetch or pre-render the page that they're about to click on for example when they are getting ready to hover

the about link or the store link maybe as they're scrolling down through the page and something starts to show up on the page then they they actually want to show that particular thing as a pre-render or a prefetch this is where if we look back at the speculation rules and we scroll down a little ways there's the ability to actually determine how eagerly you want to do this this is set as the eagerness by default everything is set to immediate which means essentially as soon as your page is done rendering every single link that is

set to be prefetched or pre-rendered is going to be downloaded immediately now there's also eager currently inside of chrome eager and immediate do the exact same thing but the idea behind eager is it's like immediate but a little bit less aggressive it may wait for the user to scroll down onto the page or maybe they have to hover over the link for it to actually download something like that now moderate and conservative are much more conservative approaches Not only would these two options not immediately download all the content but they also have a limit on

the amount of pages that they can download eager and immediate have a 50 page limit so they can download 50 pages all at once which is a lot of pages of additional request while moderate and conservative will only download two pages at a time so it's much more conservative on the stuff that it'll do now moderate generally waits for someone to put their mouse cursor over a link before it'll start that download and conservative is going to be even more conservative where it generally waits for the user to actually start the click action on the

link itself before it starts the prefetch now we can actually see this in action I'm going to go into our JavaScript far page and wherever we have this setup I want to modify this to add in let me make sure I come into my URL section inside of here I want to do my eagerness just like that and I'm going to set this right here to my moderate value and that one is essentially waiting for the mouse over event and I'm just going to copy all this code I'm going to paste it into each one

of these pages so they all have the exact same behavior there we go now what I'm going to do is I'm going to home page just going to refresh to make sure everything is set up from scratch going to go to inspect and I'm going to go to my application Tab and I'm going to scroll down to my speculations and you can see immediately the status for all these pages is set to not triggered that means there's been no download at all now when I hover over one of my links for example my store Page

you can see when I hovered that link it downloaded the page you can now see the status is ready if I hover over my homepage again the status has been changed to ready and now if I hover over my about page you'll notice something interesting first of all the about page becomes ready but my store Page now becomes a failure and that's because like I said you can only have two pre-rendered pages at a time between your pages if you have this conservative mode set of either moderate or conservative so our case we're using moderate

so the max amount of pages we can have at a time as two so the oldest page just gets deleted essentially now if I try to hover over my store Page then the homepage gets deleted cuz that was my oldest page that I had before this just saves resources on your user's computer or phone because now there's only two pages being stored instead of 50 which is a lot and again it hopefully saves you some resources on your server because instead of making 50 request you're maximum making two and then if they do something else

it'll make a third and delete the old one and so on so I don't know why they made the default Behavior immediate because that is honestly the most costly for the user and for your server I think something like the moderate mode should be the default so generally when you're doing pre-rendering I would set it to be something like moderate so you're not doing way too much pre-rendering like a ton of it you're just doing pre- wondering when you particularly need it now in our case let's say I go to my store Page and I

click you can see it's still instantaneous to load this page now if I were to just hover and then click there may be a small load time but the time between when I hover the link and when I click it and then when I release the click button and then the transition happens that's probably going to be a couple hundred milliseconds and some pages are just going to load in that time so you're really not going to have any noticeable load time even with this moderate way of doing things but if you want you can

immediately load like really sensitive links that you think people are going to click on all the time those you can immediately load and then the rest you can leave as a moderate load so they don't load nearly as many as you need them to for example if you're on a blogging site maybe you have your like first blog on the page set to immediate so that one's going to load immediately that way it's probably the most likely the page the user goes to and then all the other blogs on your page you can have set

to moderate so when they hover over one of the links then it's going to go ahead and download that blog for them now another thing to consider with all of this pre-rendering and pre fetching is when I hover over this home link for example it downloads my homepage and runs all the code with it but that also means that it actually makes a request to my server and if my server is doing something such as doing some type of analytics loging or maybe I have like a user that has like a certain number of credits

they can use so they can only access a page 20 times I don't want to count the pre-render against that for them or maybe I don't even want to run certain things if I'm doing a pre-render all of those different things you need to make sure you take into account so on the actual page that you're rendering this is going to send along a HTTP header to the page that's essentially saying hey this page is being pre-rendered so if you want to make sure that you don't do certain things during pre-render you can check for

that HTTP header also you want to make sure that you don't just pre-render every URL on your page for example some people will have a log out button on their page but they'll make it an href so it's actually a normal thing like this where it just says log out and this will actually log out the user now this is not a link that you want to pre-render because this is going to log the user out if you pre-render it because it's going to run your logout code on the server now there's a couple ways

to fix this first of all your log out page should not be an actual G request it should be something like a delete or a post request that's for another video though and also anytime that you have something on your server that could happen such as a logout effect or like certain things your database are changing or you're updating analytics all those things are going to happen on pre-render so you need to make sure that you don't actually render those pages as pre-rendered Pages if you don't want those things to occur or you need to

make sure on your server you check for those HTTP headers that get sent along to actually understand hey this is a pre-render don't do this analytical related stuff now this also kind of ties into the front end as well as I mentioned inside of our JavaScript we have this set timeout for 1 second and this is running immediately when our page pre-render it's not waiting for our actual page to finish so what I'm going to do is I'm going to change this to immediate for all of these so I'm just going to copy this change

it back to immediate so we can get this working a little bit easier for our testing purposes and now our page has been running for 1 second when I click on store you notice this timeout finishes automatically there I want to essentially change this so that I only start this timeout when I actually go to the page and not when it's pre-rendering we can actually really easily check for that inside of our JavaScript script so we have this variable called document. pre rendering this is going to be true if the page is currently pre-rendering or

false if it is not pre-rendering so if the page is pre-rendering I don't want to do this but if it's not pre-rendering well then I do want to do this code so I'm just going to move this up here I'm going to say if we're not pre-rendering then I want to call the code inside my main function right here so what this is going to do is if I just refresh my page you notice immediately it says timeout finished now when I navigate to another page you notice that does not show up my timeout finished

code but it'll actually never show up because I'm never running this code because essentially I'm saying hey this page is being pre-rendered do absolutely nothing so if the page is pre-rendering instead I can listen to an event on my document and this event is called pre-rendering whoops pre-rendering change and this pre-rendering change function is going to occur when we go from the state of pre-rendering to not pre-rendering so essentially when you have a page that's pre-rendered and you want to show that page this event is going to be ran it's essentially like the document load

event but specifically for when you have a pre-render so in that case I just want to say I want to call the main function I'm going to make sure this only occurs once so we'll say once true and that's because I only have one instance where I'm going from pre-rendering to not pre-rendering so now if I am not pre-rendering like I load my page for the first time all my code works just like normal but if I am doing a pre-render only run my code specifically when the page becomes active to the user so to

test if this is working I can click on my store Page and you notice that the time out fit finish shows up after 1 second even though my page was pre-rendered and you noticed it loaded absolutely instantaneously all the JavaScript code that I wanted to have wait until later I have set inside of here so it doesn't actually run until my user goes to the page for example if you have analytic software that's tracking users where they go on your site you definitely do not want to run that on pre-render and you want to make

sure that you only run that after the pre-render is finished and they've actually made that their active page that's why this code is really important for things like analytics and other JavaScript that you don't need to run until the user goes to that page physically now towards the very beginning of the video I kind of mentioned how there's two separate ways that you can actually use this API you can either pass in a URL or you can pass in a wear clause and this wear Clause allows you to do a lot of really fancy things

for example one of the things you can do is href matches and this allows you to use something called the URL pattern API syntax it's essentially a fancy word for regular expressions and like standard glob kind of based patterns think about if you've ever used like nextjs or Express before the way that you define your URLs using nextjs or Express routes that's essentially exactly what this URL pattern looks like if we click on this and actually look at the patterns you can see things like having a star for a wild card using things like colon

to actually do like named groups we can do non-capturing groups and then full-on regular expression so it's a really powerful syntax to say that hey I want to match all the URLs that start with like slash store and then it's going to get all the URLs that start with SL store another thing we can do is match Things based on CSS selectors so we can say hey anytime that I have a CSS selector of pre-render so like pre-render the class of pre-render what I want to do is I want to make sure that I do

this pre-rendering code so this is a great way to do things based on CSS classes and then we have our like logical ones so we have and we have not and we have or this just allows us to chain together some really complicated things to say hey do this and this particular case and if this is true but not if this is true and so on I don't know if they have any examples inside the documentation of these more complicated ways of doing things it doesn't really look like it I'm scrolling down to see one

but I can show you kind of what that looks like you can see here they have like aw notot and they're specifically using that log out example in that case which is a great use case here's a little bit more complicated of use case you can see here they're doing a wear Clause where essentially they're matching literally any URL at all except for ones that are the logout page or anything that has the selector of no pre-render so anytime the class of no pre-render is there or it's a log out page otherwise it matches every

single URL and that's just doing it for pre fetching now again if I was in this particular scenario I would probably make sure that this was not going to be on the immediate level of eagerness and I would do something like moderate or conservative to just save bandwidth but you know it's up to you what you want to do and that's pretty much everything you need to know about this brand new feature and I'm really excited for when it actually comes to all the different browsers and if you want to stay up toate with all

the different bleeding edge features out there for web development I'm going to link a couple videos right over here that cover some of the more up-to-date web development related topics so you can check them out and stay up toate with everything that's really cool inside of HTML CSS and JavaScript with that said thank you very much for watching and have a good day