How To Analyze and Optimize A Next.js Build

hello and what is up youtube and readers of my amazing blog um this video is going to accompany my latest article on how to analyze and optimize your next js production build and everyone who's watching this probably knows next js is a popular react framework right here for production nexus gives you the best developer experience with all the features you need for product production hybrid static and server rendering which is very cool type script support smart bundling root pre-fetching and more no config needed so yeah next has a lot of cool stuff that comes with it um we're going to be more focusing on kind of the smart bundling um in this video kind of talking about when you build your react application next is going to take everything and bundle it into chunks of javascript and then those chunks are going to be loaded into the browser when they're needed essentially based on how you've set up the imports in your app and the different packages you're using in addition to next built-in packages which will be there anyways so next is gonna bundle the production application um using webpack for the best optimal uh page load times etc etc in the browser so the idea is keeping that load time down the initial amount of javascript any page needs at a minimum where you still have all the functionality that you want in your page but you don't have as much uh sheer size of files which increases loading time and can affect performance negatively it's it's one aspect of that and i think most people know and if you don't know now you know that um google has come out with a new page experience um metric and that includes the core web vitals things like largest contentful paint time to first input these things will play somewhat of a role although google does claim that it's not a primary role and that uh things like load time do not directly affect rank however they can when there's pages of similar relevance so you'll find a quote in my article you can learn more there so basically this video we're just going to walk through the actual how to optimize a build process and we're going to use this actual blog as an example and next comes with some tools that already optimize it they come with some tools that will help us optimize it and we can even get some additional tools that will help us analyze and optimize our build so the first step assuming you have an xgs application of course uh if you don't have one while you're watching this video stop uh or if you're not planning on one so boom install uh what something called next bundle analyzer and another package called cross emv install those um and that will give you the ability to add a new script to your package json file you can call it whatever you want i'm calling it analyze and i'm using cross m to inject this environment variable into the production context dynamically and then i'm just gonna run next build um and there's some file magic file called next dot config.js and that's just uh you may be able to infer this from the file name but it's a configuration for your next js app and uh you can have a lot of different things in here but you want to bring in this function here and this is where you're reading that environment variable we injected and only using the bundle analyzer when that equals true and the first thing to do is you need to know where you're at before you can do anything so we're gonna run our new script and build our application assuming there are no errors that should build and hopefully that won't take too long but as it builds it will also since we're using the analyze version it's also going to pop up those right on cue it's going to pop up analyzing visualizations for both your client and your server they're gonna give you more insight into what's going on in terms of the bundles the different chunks of javascript we talked about and uh you know relative size of how much each dependency or each page is taking up uh depending on if you're looking at the clan or the server and you can even it's really cool so right now we're looking at the client and i've left in some work for us to do but real quick before we look at those visualizations next even provides us with terminal feedback so you know webpack there were some issues whatever that's not important what's important down here are these first load js numbers and red as we know is historically not a good color to be using when we're talking about values here and next is going to code these and code these let me make that a little bigger uh you know they have a red yellow green system and right now basically we're next is telling us hey you've got two bigger files uh two big chunks loading for all of these and pay special attention to this first little gest shared by all this is uh basically next is smart enough to put all the stuff that every page needs in its own bundle and then in addition to that on each individual page we'll get other bundles with different chunks of code that only that page specifically needs so first idea would be okay let's make that shared pack or that shared bundle smaller if we make that shared bundle smaller we can actually make every page a little smaller so it's a good starting point okay so this is really cool you can like zoom in and like you know it's crazy it's a really good visualization you can see like right down to the nitty-gritty of each um each kind of uh dependency this stuff over here has a lot to do with uh markdown parsing it's like oh refract refractor that's part of what takes mark down and turns it into my blog turns it into html so you can even zoom in and see uh oh wait no this is yeah this is for code highlighting so these are the different uh different languages of code that i have special syntax highlighting for my blog and you can see each one what it you know you hover it you get a little tool tip with different stuff how big it is the path the name of the file etc etc and then you can see on the server side when you kind of see what each sort of page is taking up uh from a server-side point of view and basically what we need to do is look for areas we can improve in so i've intentionally left in some stuff that we could get rid of so there's a few different things we can get rid of basically oh my god look at this this is a package called moment that handles date formatting and other date functions here it is over here again so it's got all these internationalization things it's the second biggest thing in our client the second biggest chunk it's got another chunk over there that's big we got to do something about that that's just out of control out of control too big maybe we can find something a better more optimized package we can use a lot of times what happens is these older legacy libraries were built so long ago they were great at one point but then something has come along like tree shaking or you know uh the module uh syntax es2020 or es18 2018 whatever it came out uh es6 uh you know new stuff came out in what they had kind of became obsolete but they couldn't go back it had already been a dependency of a million applications and so they're left with these big things that don't work well with this new kind of bundling so you can really see these right off the bat so we can get rid of that and so you'd go to your code and you'd download a different um a different library that did the same thing for you in this case i'm going to get rid of moment get rid of a moment it never existed and i'm going to use a different library called date fns date functions another thing you could look for is like oh this quantity record is kind of big and in this case all i'm using it for is to build one url maybe i can code that myself maybe i don't need that after all i thought i did but it turns out wait a second it's really not doing that much i'm sure it's a great i use quaternary to serve all the images on my blog but do i really need this if all i'm using is for one little thing no probably not is the answer so i can get rid of that and just get rid of the imports right where i use it and write my write my own code instead i'm just using it to blur i'm just using it to make images blurry when the page loads just as like a little loading thing blurry not blurry that's all that was doing was creating a url for a blurry image and clarity core so remove unneeded dependencies and another thing you can do is you can work with something called the dynamic import index and this is really going to save a lot a lot a lot of uh your bundle size this is really gonna dynamically you can you can forcibly l it's almost like lazy loading a component where we're only going to bring that component in when next determines that we need it basically when it appears on the screen or when it's being used so we can take a look um you know the way i structured this i have like a big layout component that includes my navigation the search bar includes the footer at the bottom of the page it includes this little button it includes this contact form uh and a lot of those things like the footer and all that other stuff that's not needed at page load and i can use this dynamic component or this dynamic module to import this component only when it's needed and there's a very simple a very simple syntax for that you just bring in dynamic from uh you just bring a dynamic from next dynamic and make a dynamic component that you just make a call to this import and you can even specify custom loading components as a second argument to it really quite cool so it's just a matter of choosing um in this case i'm gonna have the i have a search here i have a search this drop down i don't need that drop down until it's absolutely necessary that someone even searches for something so i can make that um a dynamic component import dynamic and really just get rid of the old version oh this one this one i actually just did i hope it doesn't backfire when i try to build it all the other ones i had already done and tested but i said well i can do one more and we just go through and bring back the dynamic we've got the dynamic stuff and at least comment out bring back our dynamic stuff and break our dynamic stuff and comment out all our non-dynamic stuff and just remove them all together really and just just to speed things up a little bit i'm just going to comment them out for now and go back later and go back later and deal with them officially officially here's a layout component boom i've got four different things i brought i'm bringing in dynamically that i do not need when the page first loads like i don't need that contact i don't need the progress button the footer i don't need the little back to top button on the initial page so that's just silly who needs that when the page first loads i've even experimented a little bit with dynamically loading things that like are needed and it seems to load really fast um like almost unnoticeably but i don't want to push it too far but it's fun to play around with so there are a few things maybe i think i've got one more yet my home page had a couple as well and i'll bring those back bring the dynamic back maybe oh there's a couple more in here it turns out there was actually quite a few of these oh my gosh and one thing to keep an eye on is how many um how many how many different blocks do we have on our visualization in the beginning and how many blocks do we get in in the end you should see a lot more big blocks of code in the end oh so kind of keep an eye on that it's like okay we've got this many blocks here how many are we going to have you can count them up i i counted mine up um for my initial build i think i had like 14 and then i ended up with 41. it's i documented it in the uh it's all documented in the blog article so this is you basically audit your whole entire application like this and it's just a matter of converting everything you think you can dynamically import make it be a dynamic component go through and just stick dynamic in front of it i think that's the easiest syntax to use that way you can just quickly come back through and change stuff back and forth of course bring that in oh we got air in the home component landing landing we still need that that is not dynamic that is a good example that landing is something i did not make anyway so that's above the fold so that's the visible part of the page when it loads so i'm leaving that to be loaded right away as opposed to dynamic so i think i think we got it so now we'll try to rebuild the application and see what happens hopefully hopefully hopefully fingers crossed i didn't make a mistake in real time here we'll know in a second if i did and i guess it's not the end of the world but right away you can see that there are a ton more little chunks everywhere the little chunks are everywhere the little chunks are everywhere and you know that whole entire big chunk um that was that moment uh library is gone that clownary core library's gone i've got some of these visualization in like d3 visualizations they take up a little room but they're only they load on their own only when they're needed and we've got all these little tiny chunks of different stuff over here you still have some big chunk because that markdown parsing or whatever your app is doing on every page you know it's gonna have a big chunk here and there that's okay because you can always refer back to your statistics and you can see boom everything is now in the green and we brought stuff down from like four over 400 uh first load killed by 397 243 to 117 so it's more than uh we more than cut it in half by doing all those tricks and you should see this reflect in the loading times any metrics you run and all that boils down to is a better experience for the users of your page and just another thing in your skill set because it does affect so many things from your ranking and organic to users overall experience to just saying look i know what i'm doing that you know if you're gonna do something you might as well do it to the best of your ability and that pretty much concludes this video it went on a lot longer than i thought uh switching all those dynamic components back again i probably could have made that a little bit quicker or stopped the video but i didn't feel like that so i hope you got something out of this and [Music] sign up for my newsletter where you'll get exclusive tips tricks and courses will be coming soon courses will be coming soon so stay tuned for those while i figure out what i did to my site to break it in the meantime all right take care we'll see you next time

Channel: Ben Brooke

Views: 1,014

Keywords:

Id: 4Ar-wuHCXKQ

Length: 23min 9sec (1389 seconds)

Published: Thu Jun 10 2021