const{Fragment:e,jsx:n,jsxs:l}=arguments[0];function _createMdxContent(r){const a={a:"a",code:"code",em:"em",figure:"figure",h2:"h2",h3:"h3",hr:"hr",input:"input",li:"li",ol:"ol",p:"p",pre:"pre",span:"span",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...r.components},{FAQ:i,RelatedCallout:s}=a;return i||_missingMdxReference("FAQ",!0),s||_missingMdxReference("RelatedCallout",!0),l(e,{children:[l(a.h2,{id:"complete-nextjs-performance-optimization-guide",children:[n(a.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#complete-nextjs-performance-optimization-guide",children:n(a.span,{className:"icon icon-link"})}),"Complete Next.js Performance Optimization Guide"]}),"\n",n(a.p,{children:"Performance isn't just about speed—it's about user experience, SEO rankings, and conversion rates. In this comprehensive guide, we'll explore proven strategies to make your Next.js application blazingly fast."}),"\n",l(a.h2,{id:"why-performance-matters",children:[n(a.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#why-performance-matters",children:n(a.span,{className:"icon icon-link"})}),"Why Performance Matters"]}),"\n",n(a.p,{children:"Before diving into optimizations, let's understand why performance is critical:"}),"\n",l(a.ul,{children:["\n",l(a.li,{children:[n(a.strong,{children:"User Experience"}),": 53% of mobile users abandon sites that take over 3 seconds to load"]}),"\n",l(a.li,{children:[n(a.strong,{children:"SEO Rankings"}),": Google uses Core Web Vitals as a ranking factor"]}),"\n",l(a.li,{children:[n(a.strong,{children:"Conversion Rates"}),": Amazon found that every 100ms of latency costs them 1% in sales"]}),"\n",l(a.li,{children:[n(a.strong,{children:"Accessibility"}),": Fast sites are more accessible to users with slow connections or older devices"]}),"\n"]}),"\n",l(a.h2,{id:"core-web-vitals",children:[n(a.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#core-web-vitals",children:n(a.span,{className:"icon icon-link"})}),"Core Web Vitals"]}),"\n",n(a.p,{children:"Google's Core Web Vitals are three key metrics that measure real-world user experience:"}),"\n",n(i,{items:[{question:"What is LCP (Largest Contentful Paint)?",answer:"LCP measures loading performance. It should occur within 2.5 seconds of when the page first starts loading. Focus on optimizing your images, fonts, and critical rendering path."},{question:"What is FID (First Input Delay)?",answer:"FID measures interactivity. Pages should have an FID of 100 milliseconds or less. Reduce JavaScript execution time and avoid long tasks that block the main thread."},{question:"What is CLS (Cumulative Layout Shift)?",answer:"CLS measures visual stability. Pages should maintain a CLS of 0.1 or less. Always include size attributes on images and ads, and avoid inserting content above existing content."}]}),"\n",l(a.h2,{id:"image-optimization",children:[n(a.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#image-optimization",children:n(a.span,{className:"icon icon-link"})}),"Image Optimization"]}),"\n",l(a.p,{children:["Next.js provides automatic image optimization through the ",n(a.code,{children:"next/image"})," component:"]}),"\n",n(a.figure,{"data-rehype-pretty-code-figure":"",children:n(a.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",children:l(a.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#F97583"},children:"import"}),n(a.span,{style:{color:"#E1E4E8"},children:" Image "}),n(a.span,{style:{color:"#F97583"},children:"from"}),n(a.span,{style:{color:"#9ECBFF"},children:" 'next/image'"}),n(a.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",n(a.span,{"data-line":"",children:" "}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#F97583"},children:"export"}),n(a.span,{style:{color:"#F97583"},children:" default"}),n(a.span,{style:{color:"#F97583"},children:" function"}),n(a.span,{style:{color:"#B392F0"},children:" OptimizedImage"}),n(a.span,{style:{color:"#E1E4E8"},children:"() {"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#F97583"},children:" return"}),n(a.span,{style:{color:"#E1E4E8"},children:" ("})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:" <"}),n(a.span,{style:{color:"#85E89D"},children:"div"}),n(a.span,{style:{color:"#B392F0"},children:" className"}),n(a.span,{style:{color:"#F97583"},children:"="}),n(a.span,{style:{color:"#9ECBFF"},children:'"relative w-full h-96"'}),n(a.span,{style:{color:"#E1E4E8"},children:">"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:" <"}),n(a.span,{style:{color:"#79B8FF"},children:"Image"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#B392F0"},children:" src"}),n(a.span,{style:{color:"#F97583"},children:"="}),n(a.span,{style:{color:"#9ECBFF"},children:'"/hero-image.jpg"'})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#B392F0"},children:" alt"}),n(a.span,{style:{color:"#F97583"},children:"="}),n(a.span,{style:{color:"#9ECBFF"},children:'"Hero section"'})]}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#B392F0"},children:" fill"})}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#B392F0"},children:" priority"}),n(a.span,{style:{color:"#6A737D"},children:" // Load this image with priority"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#B392F0"},children:" sizes"}),n(a.span,{style:{color:"#F97583"},children:"="}),n(a.span,{style:{color:"#9ECBFF"},children:'"(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"'})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#B392F0"},children:" className"}),n(a.span,{style:{color:"#F97583"},children:"="}),n(a.span,{style:{color:"#9ECBFF"},children:'"object-cover"'})]}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#E1E4E8"},children:" />"})}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:" "})]}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#E1E4E8"},children:" );"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),"\n",l(a.h3,{id:"image-optimization-best-practices",children:[n(a.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#image-optimization-best-practices",children:n(a.span,{className:"icon icon-link"})}),"Image Optimization Best Practices"]}),"\n",l(a.ol,{children:["\n",l(a.li,{children:[l(a.strong,{children:["Use the ",n(a.code,{children:"priority"})," prop"]})," for above-the-fold images"]}),"\n",l(a.li,{children:[l(a.strong,{children:["Specify ",n(a.code,{children:"sizes"})]})," to help Next.js generate appropriate image sizes"]}),"\n",l(a.li,{children:[n(a.strong,{children:"Use WebP format"})," for better compression (automatic with next/image)"]}),"\n",l(a.li,{children:[n(a.strong,{children:"Lazy load images"})," below the fold (default behavior)"]}),"\n",l(a.li,{children:[n(a.strong,{children:"Set width and height"})," to prevent layout shift"]}),"\n"]}),"\n",l(a.h2,{id:"code-splitting-and-dynamic-imports",children:[n(a.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#code-splitting-and-dynamic-imports",children:n(a.span,{className:"icon icon-link"})}),"Code Splitting and Dynamic Imports"]}),"\n",n(a.p,{children:"Split your code to load only what's necessary:"}),"\n",n(a.figure,{"data-rehype-pretty-code-figure":"",children:n(a.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",children:l(a.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#F97583"},children:"import"}),n(a.span,{style:{color:"#E1E4E8"},children:" dynamic "}),n(a.span,{style:{color:"#F97583"},children:"from"}),n(a.span,{style:{color:"#9ECBFF"},children:" 'next/dynamic'"}),n(a.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#F97583"},children:"import"}),n(a.span,{style:{color:"#E1E4E8"},children:" { Suspense } "}),n(a.span,{style:{color:"#F97583"},children:"from"}),n(a.span,{style:{color:"#9ECBFF"},children:" 'react'"}),n(a.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",n(a.span,{"data-line":"",children:" "}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#6A737D"},children:"// Dynamic import with loading state"})}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#F97583"},children:"const"}),n(a.span,{style:{color:"#79B8FF"},children:" HeavyComponent"}),n(a.span,{style:{color:"#F97583"},children:" ="}),n(a.span,{style:{color:"#B392F0"},children:" dynamic"}),n(a.span,{style:{color:"#E1E4E8"},children:"(() "}),n(a.span,{style:{color:"#F97583"},children:"=>"}),n(a.span,{style:{color:"#F97583"},children:" import"}),n(a.span,{style:{color:"#E1E4E8"},children:"("}),n(a.span,{style:{color:"#9ECBFF"},children:"'@/components/HeavyComponent'"}),n(a.span,{style:{color:"#E1E4E8"},children:"), {"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#B392F0"},children:" loading"}),n(a.span,{style:{color:"#E1E4E8"},children:": () "}),n(a.span,{style:{color:"#F97583"},children:"=>"}),n(a.span,{style:{color:"#E1E4E8"},children:" <"}),n(a.span,{style:{color:"#85E89D"},children:"div"}),n(a.span,{style:{color:"#E1E4E8"},children:">Loading...,"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:" ssr: "}),n(a.span,{style:{color:"#79B8FF"},children:"false"}),n(a.span,{style:{color:"#E1E4E8"},children:", "}),n(a.span,{style:{color:"#6A737D"},children:"// Disable server-side rendering if not needed"})]}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#E1E4E8"},children:"});"})}),"\n",n(a.span,{"data-line":"",children:" "}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#6A737D"},children:"// Dynamic import for client-only components"})}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#F97583"},children:"const"}),n(a.span,{style:{color:"#79B8FF"},children:" ChartComponent"}),n(a.span,{style:{color:"#F97583"},children:" ="}),n(a.span,{style:{color:"#B392F0"},children:" dynamic"}),n(a.span,{style:{color:"#E1E4E8"},children:"(() "}),n(a.span,{style:{color:"#F97583"},children:"=>"}),n(a.span,{style:{color:"#F97583"},children:" import"}),n(a.span,{style:{color:"#E1E4E8"},children:"("}),n(a.span,{style:{color:"#9ECBFF"},children:"'@/components/Chart'"}),n(a.span,{style:{color:"#E1E4E8"},children:"), {"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:" ssr: "}),n(a.span,{style:{color:"#79B8FF"},children:"false"}),n(a.span,{style:{color:"#E1E4E8"},children:","})]}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#E1E4E8"},children:"});"})}),"\n",n(a.span,{"data-line":"",children:" "}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#F97583"},children:"export"}),n(a.span,{style:{color:"#F97583"},children:" default"}),n(a.span,{style:{color:"#F97583"},children:" function"}),n(a.span,{style:{color:"#B392F0"},children:" Dashboard"}),n(a.span,{style:{color:"#E1E4E8"},children:"() {"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#F97583"},children:" return"}),n(a.span,{style:{color:"#E1E4E8"},children:" ("})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:" <"}),n(a.span,{style:{color:"#85E89D"},children:"div"}),n(a.span,{style:{color:"#E1E4E8"},children:">"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:" <"}),n(a.span,{style:{color:"#85E89D"},children:"h1"}),n(a.span,{style:{color:"#E1E4E8"},children:">Dashboard"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:" <"}),n(a.span,{style:{color:"#79B8FF"},children:"Suspense"}),n(a.span,{style:{color:"#B392F0"},children:" fallback"}),n(a.span,{style:{color:"#F97583"},children:"="}),n(a.span,{style:{color:"#E1E4E8"},children:"{<"}),n(a.span,{style:{color:"#85E89D"},children:"div"}),n(a.span,{style:{color:"#E1E4E8"},children:">Loading chart...}>"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:" <"}),n(a.span,{style:{color:"#79B8FF"},children:"ChartComponent"}),n(a.span,{style:{color:"#B392F0"},children:" data"}),n(a.span,{style:{color:"#F97583"},children:"="}),n(a.span,{style:{color:"#E1E4E8"},children:"{chartData} />"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:" "})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:" <"}),n(a.span,{style:{color:"#79B8FF"},children:"HeavyComponent"}),n(a.span,{style:{color:"#E1E4E8"},children:" />"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:" "})]}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#E1E4E8"},children:" );"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),"\n",l(a.h2,{id:"font-optimization",children:[n(a.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#font-optimization",children:n(a.span,{className:"icon icon-link"})}),"Font Optimization"]}),"\n",l(a.p,{children:["Next.js 13+ includes automatic font optimization with ",n(a.code,{children:"next/font"}),":"]}),"\n",n(a.figure,{"data-rehype-pretty-code-figure":"",children:n(a.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",children:l(a.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#F97583"},children:"import"}),n(a.span,{style:{color:"#E1E4E8"},children:" { Inter, Roboto_Mono } "}),n(a.span,{style:{color:"#F97583"},children:"from"}),n(a.span,{style:{color:"#9ECBFF"},children:" 'next/font/google'"}),n(a.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",n(a.span,{"data-line":"",children:" "}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#F97583"},children:"const"}),n(a.span,{style:{color:"#79B8FF"},children:" inter"}),n(a.span,{style:{color:"#F97583"},children:" ="}),n(a.span,{style:{color:"#B392F0"},children:" Inter"}),n(a.span,{style:{color:"#E1E4E8"},children:"({"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:" subsets: ["}),n(a.span,{style:{color:"#9ECBFF"},children:"'latin'"}),n(a.span,{style:{color:"#E1E4E8"},children:"],"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:" display: "}),n(a.span,{style:{color:"#9ECBFF"},children:"'swap'"}),n(a.span,{style:{color:"#E1E4E8"},children:","})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:" variable: "}),n(a.span,{style:{color:"#9ECBFF"},children:"'--font-inter'"}),n(a.span,{style:{color:"#E1E4E8"},children:","})]}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#E1E4E8"},children:"});"})}),"\n",n(a.span,{"data-line":"",children:" "}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#F97583"},children:"const"}),n(a.span,{style:{color:"#79B8FF"},children:" robotoMono"}),n(a.span,{style:{color:"#F97583"},children:" ="}),n(a.span,{style:{color:"#B392F0"},children:" Roboto_Mono"}),n(a.span,{style:{color:"#E1E4E8"},children:"({"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:" subsets: ["}),n(a.span,{style:{color:"#9ECBFF"},children:"'latin'"}),n(a.span,{style:{color:"#E1E4E8"},children:"],"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:" display: "}),n(a.span,{style:{color:"#9ECBFF"},children:"'swap'"}),n(a.span,{style:{color:"#E1E4E8"},children:","})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:" variable: "}),n(a.span,{style:{color:"#9ECBFF"},children:"'--font-roboto-mono'"}),n(a.span,{style:{color:"#E1E4E8"},children:","})]}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#E1E4E8"},children:"});"})}),"\n",n(a.span,{"data-line":"",children:" "}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#F97583"},children:"export"}),n(a.span,{style:{color:"#F97583"},children:" default"}),n(a.span,{style:{color:"#F97583"},children:" function"}),n(a.span,{style:{color:"#B392F0"},children:" RootLayout"}),n(a.span,{style:{color:"#E1E4E8"},children:"({ "}),n(a.span,{style:{color:"#FFAB70"},children:"children"}),n(a.span,{style:{color:"#E1E4E8"},children:" }) {"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#F97583"},children:" return"}),n(a.span,{style:{color:"#E1E4E8"},children:" ("})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:" <"}),n(a.span,{style:{color:"#85E89D"},children:"html"}),n(a.span,{style:{color:"#B392F0"},children:" lang"}),n(a.span,{style:{color:"#F97583"},children:"="}),n(a.span,{style:{color:"#9ECBFF"},children:'"en"'}),n(a.span,{style:{color:"#B392F0"},children:" className"}),n(a.span,{style:{color:"#F97583"},children:"="}),n(a.span,{style:{color:"#E1E4E8"},children:"{"}),n(a.span,{style:{color:"#9ECBFF"},children:"`${"}),n(a.span,{style:{color:"#E1E4E8"},children:"inter"}),n(a.span,{style:{color:"#9ECBFF"},children:"."}),n(a.span,{style:{color:"#E1E4E8"},children:"variable"}),n(a.span,{style:{color:"#9ECBFF"},children:"} ${"}),n(a.span,{style:{color:"#E1E4E8"},children:"robotoMono"}),n(a.span,{style:{color:"#9ECBFF"},children:"."}),n(a.span,{style:{color:"#E1E4E8"},children:"variable"}),n(a.span,{style:{color:"#9ECBFF"},children:"}`"}),n(a.span,{style:{color:"#E1E4E8"},children:"}>"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:" <"}),n(a.span,{style:{color:"#85E89D"},children:"body"}),n(a.span,{style:{color:"#E1E4E8"},children:">{children}"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:" "})]}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#E1E4E8"},children:" );"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),"\n",n(a.p,{children:n(a.strong,{children:"Benefits:"})}),"\n",l(a.ul,{children:["\n",n(a.li,{children:"Fonts are self-hosted (no external requests)"}),"\n",l(a.li,{children:["Zero layout shift with ",n(a.code,{children:"font-display: swap"})]}),"\n",n(a.li,{children:"Automatic subsetting for smaller file sizes"}),"\n"]}),"\n",l(a.h2,{id:"caching-strategies",children:[n(a.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#caching-strategies",children:n(a.span,{className:"icon icon-link"})}),"Caching Strategies"]}),"\n",n(a.p,{children:"Implement effective caching to reduce server load and improve response times:"}),"\n",n(a.figure,{"data-rehype-pretty-code-figure":"",children:n(a.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",children:l(a.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#6A737D"},children:"// app/api/data/route.ts"})}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#F97583"},children:"import"}),n(a.span,{style:{color:"#E1E4E8"},children:" { NextResponse } "}),n(a.span,{style:{color:"#F97583"},children:"from"}),n(a.span,{style:{color:"#9ECBFF"},children:" 'next/server'"}),n(a.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",n(a.span,{"data-line":"",children:" "}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#F97583"},children:"export"}),n(a.span,{style:{color:"#F97583"},children:" async"}),n(a.span,{style:{color:"#F97583"},children:" function"}),n(a.span,{style:{color:"#B392F0"},children:" GET"}),n(a.span,{style:{color:"#E1E4E8"},children:"() {"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#F97583"},children:" const"}),n(a.span,{style:{color:"#79B8FF"},children:" data"}),n(a.span,{style:{color:"#F97583"},children:" ="}),n(a.span,{style:{color:"#F97583"},children:" await"}),n(a.span,{style:{color:"#B392F0"},children:" fetchDataFromAPI"}),n(a.span,{style:{color:"#E1E4E8"},children:"();"})]}),"\n",n(a.span,{"data-line":"",children:" "}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#F97583"},children:" return"}),n(a.span,{style:{color:"#E1E4E8"},children:" NextResponse."}),n(a.span,{style:{color:"#B392F0"},children:"json"}),n(a.span,{style:{color:"#E1E4E8"},children:"(data, {"})]}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#E1E4E8"},children:" headers: {"})}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#9ECBFF"},children:" 'Cache-Control'"}),n(a.span,{style:{color:"#E1E4E8"},children:": "}),n(a.span,{style:{color:"#9ECBFF"},children:"'public, s-maxage=3600, stale-while-revalidate=86400'"}),n(a.span,{style:{color:"#E1E4E8"},children:","})]}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#E1E4E8"},children:" },"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#E1E4E8"},children:" });"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#E1E4E8"},children:"}"})}),"\n",n(a.span,{"data-line":"",children:" "}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#6A737D"},children:"// Revalidate static pages at intervals"})}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#F97583"},children:"export"}),n(a.span,{style:{color:"#F97583"},children:" const"}),n(a.span,{style:{color:"#79B8FF"},children:" revalidate"}),n(a.span,{style:{color:"#F97583"},children:" ="}),n(a.span,{style:{color:"#79B8FF"},children:" 3600"}),n(a.span,{style:{color:"#E1E4E8"},children:"; "}),n(a.span,{style:{color:"#6A737D"},children:"// Revalidate every hour"})]})]})})}),"\n",l(a.h3,{id:"caching-strategies-comparison",children:[n(a.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#caching-strategies-comparison",children:n(a.span,{className:"icon icon-link"})}),"Caching Strategies Comparison"]}),"\n",l(a.table,{children:[n(a.thead,{children:l(a.tr,{children:[n(a.th,{children:"Strategy"}),n(a.th,{children:"Use Case"}),n(a.th,{children:"TTL"}),n(a.th,{children:"Example"})]})}),l(a.tbody,{children:[l(a.tr,{children:[n(a.td,{children:n(a.code,{children:"no-cache"})}),n(a.td,{children:"Always fresh data"}),n(a.td,{children:"0"}),n(a.td,{children:"User profiles"})]}),l(a.tr,{children:[n(a.td,{children:n(a.code,{children:"public, max-age=3600"})}),n(a.td,{children:"Frequently updated"}),n(a.td,{children:"1 hour"}),n(a.td,{children:"Blog posts"})]}),l(a.tr,{children:[n(a.td,{children:n(a.code,{children:"immutable"})}),n(a.td,{children:"Never changes"}),n(a.td,{children:"Forever"}),n(a.td,{children:"Hashed assets"})]}),l(a.tr,{children:[n(a.td,{children:"ISR"}),n(a.td,{children:"Periodic updates"}),n(a.td,{children:"Custom"}),n(a.td,{children:"Product catalogs"})]})]})]}),"\n",l(a.h2,{id:"reducing-javascript-bundle-size",children:[n(a.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#reducing-javascript-bundle-size",children:n(a.span,{className:"icon icon-link"})}),"Reducing JavaScript Bundle Size"]}),"\n",n(a.p,{children:"Analyze and reduce your bundle size with these tools:"}),"\n",n(a.figure,{"data-rehype-pretty-code-figure":"",children:n(a.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"bash","data-theme":"github-dark",children:l(a.code,{"data-language":"bash","data-theme":"github-dark",style:{display:"grid"},children:[n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#6A737D"},children:"## Analyze bundle size"})}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#B392F0"},children:"npm"}),n(a.span,{style:{color:"#9ECBFF"},children:" run"}),n(a.span,{style:{color:"#9ECBFF"},children:" build"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#B392F0"},children:"npx"}),n(a.span,{style:{color:"#9ECBFF"},children:" @next/bundle-analyzer"})]}),"\n",n(a.span,{"data-line":"",children:" "}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#6A737D"},children:"## Use production dependencies only"})}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#B392F0"},children:"npm"}),n(a.span,{style:{color:"#9ECBFF"},children:" prune"}),n(a.span,{style:{color:"#79B8FF"},children:" --production"})]}),"\n",n(a.span,{"data-line":"",children:" "}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#6A737D"},children:"## Remove unused dependencies"})}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#B392F0"},children:"npx"}),n(a.span,{style:{color:"#9ECBFF"},children:" depcheck"})]})]})})}),"\n",l(a.h3,{id:"tree-shaking-and-module-optimization",children:[n(a.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#tree-shaking-and-module-optimization",children:n(a.span,{className:"icon icon-link"})}),"Tree-Shaking and Module Optimization"]}),"\n",n(a.figure,{"data-rehype-pretty-code-figure":"",children:n(a.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",children:l(a.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#6A737D"},children:"// ❌ Bad: Imports entire library"})}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#F97583"},children:"import"}),n(a.span,{style:{color:"#E1E4E8"},children:" _ "}),n(a.span,{style:{color:"#F97583"},children:"from"}),n(a.span,{style:{color:"#9ECBFF"},children:" 'lodash'"}),n(a.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#F97583"},children:"const"}),n(a.span,{style:{color:"#79B8FF"},children:" result"}),n(a.span,{style:{color:"#F97583"},children:" ="}),n(a.span,{style:{color:"#E1E4E8"},children:" _."}),n(a.span,{style:{color:"#B392F0"},children:"debounce"}),n(a.span,{style:{color:"#E1E4E8"},children:"(fn, "}),n(a.span,{style:{color:"#79B8FF"},children:"300"}),n(a.span,{style:{color:"#E1E4E8"},children:");"})]}),"\n",n(a.span,{"data-line":"",children:" "}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#6A737D"},children:"// ✅ Good: Import only what you need"})}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#F97583"},children:"import"}),n(a.span,{style:{color:"#E1E4E8"},children:" debounce "}),n(a.span,{style:{color:"#F97583"},children:"from"}),n(a.span,{style:{color:"#9ECBFF"},children:" 'lodash/debounce'"}),n(a.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#F97583"},children:"const"}),n(a.span,{style:{color:"#79B8FF"},children:" result"}),n(a.span,{style:{color:"#F97583"},children:" ="}),n(a.span,{style:{color:"#B392F0"},children:" debounce"}),n(a.span,{style:{color:"#E1E4E8"},children:"(fn, "}),n(a.span,{style:{color:"#79B8FF"},children:"300"}),n(a.span,{style:{color:"#E1E4E8"},children:");"})]}),"\n",n(a.span,{"data-line":"",children:" "}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#6A737D"},children:"// ❌ Bad: Imports all icons"})}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#F97583"},children:"import"}),n(a.span,{style:{color:"#E1E4E8"},children:" { FiHome, FiUser } "}),n(a.span,{style:{color:"#F97583"},children:"from"}),n(a.span,{style:{color:"#9ECBFF"},children:" 'react-icons/fi'"}),n(a.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",n(a.span,{"data-line":"",children:" "}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#6A737D"},children:"// ✅ Good: Direct imports (if supported)"})}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#F97583"},children:"import"}),n(a.span,{style:{color:"#E1E4E8"},children:" FiHome "}),n(a.span,{style:{color:"#F97583"},children:"from"}),n(a.span,{style:{color:"#9ECBFF"},children:" 'react-icons/fi/FiHome'"}),n(a.span,{style:{color:"#E1E4E8"},children:";"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#F97583"},children:"import"}),n(a.span,{style:{color:"#E1E4E8"},children:" FiUser "}),n(a.span,{style:{color:"#F97583"},children:"from"}),n(a.span,{style:{color:"#9ECBFF"},children:" 'react-icons/fi/FiUser'"}),n(a.span,{style:{color:"#E1E4E8"},children:";"})]})]})})}),"\n",l(a.h2,{id:"database-query-optimization",children:[n(a.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#database-query-optimization",children:n(a.span,{className:"icon icon-link"})}),"Database Query Optimization"]}),"\n",n(a.p,{children:"Optimize your database queries to reduce response times:"}),"\n",n(a.figure,{"data-rehype-pretty-code-figure":"",children:n(a.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",children:l(a.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#6A737D"},children:"// ❌ Bad: N+1 query problem"})}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#F97583"},children:"async"}),n(a.span,{style:{color:"#F97583"},children:" function"}),n(a.span,{style:{color:"#B392F0"},children:" getBlogPosts"}),n(a.span,{style:{color:"#E1E4E8"},children:"() {"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#F97583"},children:" const"}),n(a.span,{style:{color:"#79B8FF"},children:" posts"}),n(a.span,{style:{color:"#F97583"},children:" ="}),n(a.span,{style:{color:"#F97583"},children:" await"}),n(a.span,{style:{color:"#E1E4E8"},children:" db.post."}),n(a.span,{style:{color:"#B392F0"},children:"findMany"}),n(a.span,{style:{color:"#E1E4E8"},children:"();"})]}),"\n",n(a.span,{"data-line":"",children:" "}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#6A737D"},children:" // This creates N additional queries"})}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#F97583"},children:" for"}),n(a.span,{style:{color:"#E1E4E8"},children:" ("}),n(a.span,{style:{color:"#F97583"},children:"const"}),n(a.span,{style:{color:"#79B8FF"},children:" post"}),n(a.span,{style:{color:"#F97583"},children:" of"}),n(a.span,{style:{color:"#E1E4E8"},children:" posts) {"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:" post.author "}),n(a.span,{style:{color:"#F97583"},children:"="}),n(a.span,{style:{color:"#F97583"},children:" await"}),n(a.span,{style:{color:"#E1E4E8"},children:" db.user."}),n(a.span,{style:{color:"#B392F0"},children:"findUnique"}),n(a.span,{style:{color:"#E1E4E8"},children:"({"})]}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#E1E4E8"},children:" where: { id: post.authorId }"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#E1E4E8"},children:" });"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#E1E4E8"},children:" }"})}),"\n",n(a.span,{"data-line":"",children:" "}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#F97583"},children:" return"}),n(a.span,{style:{color:"#E1E4E8"},children:" posts;"})]}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#E1E4E8"},children:"}"})}),"\n",n(a.span,{"data-line":"",children:" "}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#6A737D"},children:"// ✅ Good: Include related data in single query"})}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#F97583"},children:"async"}),n(a.span,{style:{color:"#F97583"},children:" function"}),n(a.span,{style:{color:"#B392F0"},children:" getBlogPosts"}),n(a.span,{style:{color:"#E1E4E8"},children:"() {"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#F97583"},children:" return"}),n(a.span,{style:{color:"#F97583"},children:" await"}),n(a.span,{style:{color:"#E1E4E8"},children:" db.post."}),n(a.span,{style:{color:"#B392F0"},children:"findMany"}),n(a.span,{style:{color:"#E1E4E8"},children:"({"})]}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#E1E4E8"},children:" include: {"})}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:" author: "}),n(a.span,{style:{color:"#79B8FF"},children:"true"}),n(a.span,{style:{color:"#E1E4E8"},children:", "}),n(a.span,{style:{color:"#6A737D"},children:"// Fetch author data in same query"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:" tags: "}),n(a.span,{style:{color:"#79B8FF"},children:"true"}),n(a.span,{style:{color:"#E1E4E8"},children:","})]}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#E1E4E8"},children:" },"})}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#E1E4E8"},children:" take: "}),n(a.span,{style:{color:"#79B8FF"},children:"10"}),n(a.span,{style:{color:"#E1E4E8"},children:", "}),n(a.span,{style:{color:"#6A737D"},children:"// Limit results"})]}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#E1E4E8"},children:" });"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),"\n",l(a.h2,{id:"monitoring-performance",children:[n(a.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#monitoring-performance",children:n(a.span,{className:"icon icon-link"})}),"Monitoring Performance"]}),"\n",n(a.p,{children:"Use these tools to monitor and improve performance continuously:"}),"\n",l("div",{className:"bg-slate-50 p-6 rounded-lg my-6",children:[l(a.h3,{id:"essential-performance-tools",children:[n(a.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#essential-performance-tools",children:n(a.span,{className:"icon icon-link"})}),"Essential Performance Tools"]}),l(a.ul,{children:["\n",l(a.li,{children:[n(a.strong,{children:"Lighthouse"})," - Automated testing (built into Chrome DevTools)"]}),"\n",l(a.li,{children:[n(a.strong,{children:"WebPageTest"})," - Real-world performance testing"]}),"\n",l(a.li,{children:[n(a.strong,{children:"Vercel Analytics"})," - Real User Monitoring (RUM)"]}),"\n",l(a.li,{children:[n(a.strong,{children:"Google Search Console"})," - Core Web Vitals report"]}),"\n",l(a.li,{children:[n(a.strong,{children:"Sentry Performance"})," - Error tracking and performance monitoring"]}),"\n"]})]}),"\n",n(a.figure,{"data-rehype-pretty-code-figure":"",children:n(a.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"bash","data-theme":"github-dark",children:l(a.code,{"data-language":"bash","data-theme":"github-dark",style:{display:"grid"},children:[n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#6A737D"},children:"## Run Lighthouse CLI"})}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#B392F0"},children:"npm"}),n(a.span,{style:{color:"#9ECBFF"},children:" install"}),n(a.span,{style:{color:"#79B8FF"},children:" -g"}),n(a.span,{style:{color:"#9ECBFF"},children:" lighthouse"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#B392F0"},children:"lighthouse"}),n(a.span,{style:{color:"#9ECBFF"},children:" https://yoursite.com"}),n(a.span,{style:{color:"#79B8FF"},children:" --view"})]}),"\n",n(a.span,{"data-line":"",children:" "}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#6A737D"},children:"## Run Lighthouse CI for continuous monitoring"})}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#B392F0"},children:"npm"}),n(a.span,{style:{color:"#9ECBFF"},children:" install"}),n(a.span,{style:{color:"#79B8FF"},children:" -g"}),n(a.span,{style:{color:"#9ECBFF"},children:" @lhci/cli"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#B392F0"},children:"lhci"}),n(a.span,{style:{color:"#9ECBFF"},children:" autorun"})]})]})})}),"\n",l(a.h2,{id:"quick-wins-checklist",children:[n(a.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#quick-wins-checklist",children:n(a.span,{className:"icon icon-link"})}),"Quick Wins Checklist"]}),"\n",n(a.p,{children:"Here's a checklist of quick performance improvements you can implement today:"}),"\n",l(a.ul,{className:"contains-task-list",children:["\n",l(a.li,{className:"task-list-item",children:[n(a.input,{type:"checkbox",disabled:!0})," ","Enable ",n(a.code,{children:"next/image"})," for all images"]}),"\n",l(a.li,{className:"task-list-item",children:[n(a.input,{type:"checkbox",disabled:!0})," ","Add ",n(a.code,{children:"priority"})," to hero images"]}),"\n",l(a.li,{className:"task-list-item",children:[n(a.input,{type:"checkbox",disabled:!0})," ","Use ",n(a.code,{children:"next/font"})," for web fonts"]}),"\n",l(a.li,{className:"task-list-item",children:[n(a.input,{type:"checkbox",disabled:!0})," ","Enable gzip/brotli compression"]}),"\n",l(a.li,{className:"task-list-item",children:[n(a.input,{type:"checkbox",disabled:!0})," ","Implement code splitting with dynamic imports"]}),"\n",l(a.li,{className:"task-list-item",children:[n(a.input,{type:"checkbox",disabled:!0})," ","Add proper cache headers to API routes"]}),"\n",l(a.li,{className:"task-list-item",children:[n(a.input,{type:"checkbox",disabled:!0})," ","Optimize database queries (avoid N+1)"]}),"\n",l(a.li,{className:"task-list-item",children:[n(a.input,{type:"checkbox",disabled:!0})," ","Remove unused dependencies"]}),"\n",l(a.li,{className:"task-list-item",children:[n(a.input,{type:"checkbox",disabled:!0})," ","Enable React Strict Mode"]}),"\n",l(a.li,{className:"task-list-item",children:[n(a.input,{type:"checkbox",disabled:!0})," ","Set up performance monitoring"]}),"\n"]}),"\n",n(s,{title:"🎯 Performance Resources",links:[{href:"/blog/how-to-improve-seo-results-with-core-web-vitals",label:"Core Web Vitals SEO Guide",description:"Complete Next.js performance optimization guide. Improve Core Web Vitals, reduce bundle size, and boost speed."},{href:"/blog/5-performance-fixes-every-suitecommerce-site-should-apply-today",label:"SuiteCommerce Performance Fixes",description:"Complete Next.js performance optimization guide. Improve Core Web Vitals, reduce bundle size, and boost speed."}]}),"\n",l(a.h2,{id:"conclusion",children:[n(a.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#conclusion",children:n(a.span,{className:"icon icon-link"})}),"Conclusion"]}),"\n",n(a.p,{children:"Performance optimization is an ongoing process, not a one-time task. Start with the quick wins, measure your improvements, and iterate based on real user data."}),"\n",l(a.p,{children:["Remember: ",n(a.strong,{children:"premature optimization is the root of all evil"}),", but ignoring performance until it's a problem is equally dangerous. Build performance into your development workflow from day one."]}),"\n",n(a.p,{children:n(a.a,{href:"/contact",children:"Need Performance Optimization Help?"})}),"\n",n(a.hr,{}),"\n",l(a.p,{children:[n(a.em,{children:"Have questions about Next.js performance?"})," Join the discussion in the comments or ",n(a.a,{href:"/contact",children:"reach out to our team"}),"."]})]})}return{default:function(e={}){const{wrapper:l}=e.components||{};return l?n(l,{...e,children:n(_createMdxContent,{...e})}):_createMdxContent(e)}};function _missingMdxReference(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}

Web Vitals

Articles tagged Web Vitals

Complete Next.js Performance Optimization Guide