<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Dasun Madusanka</title>
    <description>The latest articles on DEV Community by Dasun Madusanka (@dasun_madusanka).</description>
    <link>https://dev.to/dasun_madusanka</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3882717%2Fd8b57945-9ee9-4beb-9c08-de53956d399f.png</url>
      <title>DEV Community: Dasun Madusanka</title>
      <link>https://dev.to/dasun_madusanka</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/dasun_madusanka"/>
    <language>en</language>
    <item>
      <title>How I Optimize Next.js Apps to Get 90+ PageSpeed Score (Step-by-Step)</title>
      <dc:creator>Dasun Madusanka</dc:creator>
      <pubDate>Thu, 16 Apr 2026 15:47:00 +0000</pubDate>
      <link>https://dev.to/dasun_madusanka/how-i-optimize-nextjs-apps-to-get-90-pagespeed-score-step-by-step-1ank</link>
      <guid>https://dev.to/dasun_madusanka/how-i-optimize-nextjs-apps-to-get-90-pagespeed-score-step-by-step-1ank</guid>
      <description>&lt;p&gt;Is your Next.js website scoring below 70 on Google PageSpeed Insights? You're not alone — and in this article, I'll show you the exact steps I use to push sites to 90+ scores.&lt;/p&gt;




&lt;h2&gt;
  
  
  Why PageSpeed Matters
&lt;/h2&gt;

&lt;p&gt;A slow website doesn't just frustrate users — it hurts your Google ranking. Core Web Vitals are now a direct ranking factor. If your site is slow, you're losing both traffic and customers.&lt;/p&gt;




&lt;h2&gt;
  
  
  Step 1: Fix Your Images With next/image
&lt;/h2&gt;

&lt;p&gt;The biggest performance killer in most Next.js apps is unoptimized images.&lt;/p&gt;

&lt;p&gt;Replace standard img tags with Next.js's built-in Image component:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;Image&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;next/image&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This automatically handles:&lt;br&gt;
✅ WebP conversion&lt;br&gt;
✅ Lazy loading&lt;br&gt;
✅ Correct sizing per device&lt;/p&gt;


&lt;h2&gt;
  
  
  Step 2: Reduce Your Bundle Size With Dynamic Imports
&lt;/h2&gt;

&lt;p&gt;Large JavaScript bundles slow down your LCP score. Use dynamic imports for components that aren't needed on first load:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;dynamic&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;next/dynamic&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;HeavyChart&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;dynamic&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="k"&gt;import&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;../components/HeavyChart&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;loading&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; 

&lt;span class="nx"&gt;Loading&lt;/span&gt;&lt;span class="p"&gt;...&lt;/span&gt;

&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;ssr&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Step 3: Remove Render-Blocking Fonts
&lt;/h2&gt;

&lt;p&gt;Many developers load Google Fonts — which blocks rendering:&lt;/p&gt;

&lt;p&gt;Use Next.js font optimization instead:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="c1"&gt;// ✅ Good&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Inter&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;next/font/google&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;inter&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;Inter&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;subsets&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;latin&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="na"&gt;display&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;swap&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Step 4: Enable Gzip / Brotli Compression
&lt;/h2&gt;

&lt;p&gt;In your next.config.js:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;module&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;exports&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;compress&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If you're on Vercel, this is automatic. For custom servers, configure compression at the server level.&lt;/p&gt;




&lt;h2&gt;
  
  
  Step 5: Fix Cumulative Layout Shift (CLS)
&lt;/h2&gt;

&lt;p&gt;CLS is often caused by images without dimensions or fonts that swap. Always define width and height for images, and use font-display: swap.&lt;/p&gt;




&lt;h2&gt;
  
  
  Results You Can Expect
&lt;/h2&gt;

&lt;p&gt;After applying all these optimizations, I consistently see scores jump from 40–60 range up to 90–99 on both Mobile and Desktop.&lt;/p&gt;




&lt;h2&gt;
  
  
  Need Professional Help?
&lt;/h2&gt;

&lt;p&gt;If you want all of this done for your site in 24 hours — without touching the code yourself — I offer a professional Next.js Speed Optimization service on Fiverr where I guarantee 90+ PageSpeed score.&lt;/p&gt;

&lt;p&gt;🔗 &lt;a href="https://www.fiverr.com/s/8zkQx2r" rel="noopener noreferrer"&gt;https://www.fiverr.com/s/8zkQx2r&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Drop your questions in the comments — happy to help! 🚀&lt;/p&gt;

</description>
      <category>nextjs</category>
      <category>webperf</category>
      <category>webdev</category>
      <category>typescript</category>
    </item>
  </channel>
</rss>
