Next.js Discord

Discord Forum

Optimize LCP for Text (Next.js v15.1.7)

Unanswered
Japanese cockle posted this in #help-forum
Open in Discord
Japanese cockleOP
Hello, i have a issue with page performance metrics, i am trying to optimize page speed for my project so i have a big text on my hero slider, when i check the link under the performance issue. It says nothing for optimizing. I also checked the font optimization but i already set my next/font/google usage.

There is the error. Marked as red on the performance tab.

Largest Contentful Paint object 1.270 ms.
span.text-5xl.font-[700]


Here is how i import the font to my layout

const montserrat = Montserrat({
    subsets: ["latin"],
    weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
    display: "swap",
});

3 Replies

adam.birds
Can you the screenshots etc of page speed?
Japanese cockleOP
The problem was solved when I added Suspense, but although there is only one component on the page, pagespeed has already dropped by 5 points. I will have an average of 10-15 components on the page and my performance is high, which is the most prioritized part of my customer.
the other problem is javascript usage, i am using the webpack configuration to limit chunks.
  webpack: (config: Configuration): Configuration => {
    config.plugins = config.plugins || [];
    config.optimization = config.optimization || {};
    config.optimization.splitChunks = {
      ...config.optimization.splitChunks,
      maxSize: 25000,
    };
    return config;
  },