How to increased Next.Js Website Spped Upto 300% by - Webnews

Hii developer’s I am hiren and today talk about how to increased our Next.Js website upto 300% Using real Techniques.
If your Website Open Slow so change you next js code and write optimize code for first see hwo many problem you face – Problem’s-

• Large Java Script Bundles
• Slow Page Load
• Poor Seo Ranking
• High Bounce Rate

So I give you some steps to Optimize your code –

Step -1 (Migrate Next.Js Page Router to App Router)#

If you use already NextJs page router so stop using this use App Router because App router are secure ,Lightweight or fast Better Seo.

code
Copy
// Server Component (default)
export default function Page() {
  return <h1>Super Fast Page</h1>;
}

Step -2 (Use Revalidate)#

Revalidate is a method to use when fetch the data and it’s a like freez because they are timly fetch the data if you set the data for 60s so after 60s auto fetch the data so it’s fast data fetching or loading.

code
Copy
//Before//
useEffect(() => {
  fetch("/api/posts").then(res => res.json())
}, []);

//After//
const data = await fetch("https://api.site.com/posts", {
  next: { revalidate: 60 }
}).then(res => res.json());

Step -3 (Use next/img)#

If you already use this <img> </img> tag so stop and use next/img because this next/img are optimize the image like image compression,lazy loading .etc

code
Copy
import Image from "next/image";

<Image
  src="/banner.jpg"
  width={1200}
  height={600}
  priority
  alt="Next.js Optimization"
/>

Step -3 (Removed Unneccesery Components)#

Step -4 ( Use Daynamic Import)#

Dynamic import work like if Havey component need high load all time this dynamic import work when the component need then the work

code
Copy
import dynamic from "next/dynamic";

const Editor = dynamic(() => import("./Editor"), {
  ssr: false,
});

Step -5 (Optemize font use next/font)#

Stop using google cdn or script use next/font because no layolut shifting load or fast load font

code
Copy
import { Inter } from "next/font/google";

const inter = Inter({
  subsets: ["latin"],
  display: "swap",
});