5 Painful Next.js Performance Killers (and how to fix them)

In this video I'll share 5 performance killers that are eating your nextjs application performance. Many developers say that Next.js is slow, when in fact they are using it wrong. ... And even worse, all your images load immediately when the page {ts:111} opens. Even the ones below the fold that users might never even scroll to. I see developers ship apps with hero images {ts:119} that take 8 seconds to load on mobile connections because they never tested on anything slower than their office Wi-Fi. … Fetching data in use effect {ts:150} creates a wasted round trip. Your component renders triggers a data fetch then rerenders with the data. When child {ts:159} components also fetch data, you create a butterfall where each component waits for its parent before making its own {ts:167} request. So here's the exact sequence that happens. The page loads, the React hydrates your component, uh, use effect {ts:176} runs, and then the fetch request starts, and only then does your data begin loading. That's three steps before any {ts:186} data even starts moving. And the problem gets worse when you have nested components that each fetch their own … You might think this is fine because the data loads eventually, but your users are {ts:217} staring at the loading spinners for anywhere between 3 to 5 seconds when they could have seen the content {ts:223} immediately. And here's what nobody mentions. Every one of those used effect fetches happens after your JavaScript … The most common culprit is importing entire libraries when you only need one function. For example, writing {ts:298} import from load dash pulls in 70 kilobytes when you probably only needed one 2 {ts:306} kilobyte function. So here's what actually happens when you import an entire library. You add one line of code {ts:313} that looks innocent, but your bundle size jumps by 70 kilobytes or more. Most developers never check what they are {ts:321} actually shipping until uh the app starts to feel slow. The worst part is that you are not just importing load {ts:329} dash. You are probably also importing moment.js for dates and entire icon libraries when you use five icons and {ts:337} analytic packages that pull in dependencies you never asked for. Another common mistake is not using {ts:344} dynamic imports for heavy components like models, charts or admin panels that users might never even see. … {ts:391} you import. Backend performance matters just as much as front end optimizations. The classic mistake is the N plus1 query {ts:400} problem. Fetching all list items then making a separate database call for each items related data. If you're loading, {ts:408} for example, 20 blog posts and fetching the author for each one in individually, that's 21 queries when it should be two. … If you have 50 posts on the page, you just made 51 trips to the database. Other common mistakes include {ts:439} missing database indexes on columns you frequently cury, fetching entire tables when you only need 10 rows, and not {ts:447} using connection pooling. So your app creates new database connection on every request. You might think your queries {ts:455} are fast because they work fine in development with 100 rows of test data, but in production with 50,000 rows and {ts:462} no indexes, that same query takes 3 seconds instead of 30 milliseconds. The serverless functions on platforms like … Your API response times will drop from seconds to {ts:495} milliseconds. Analytics, chat widgets, ads, and social media embeds can easily destroy your performance. Loading these {ts:504} scripts synchronously in your document head blocks your entire page from rendering. So, users see a blank screen {ts:512} while Google Analytic downloads and executes. … {ts:535} they are all competing for bandwidth and CPU on the initial page load. A slow analytics script can add two to three {ts:544} seconds to your load time. And if their server is having issues, your entire page is stuck waiting. I've seen {ts:550} perfectly fast apps become unusable because a chat widget get took 8 seconds to load and blocked everything else.