Nextjs 努力改进文本的 LCP

Question

我试图通过优化我的文本来提高我的 LCP 分数，但现在还是一样，我不知道为什么我的 LCP 没有提高。看截图：

据说“日常购物热门产品”是我最大的Contentful Paint元素，并且花费了近3,590毫秒。如果我从 page.js 中删除此文本，则会出现另一个文本，如果我删除该文本，则 LCP 会再次显示另一个文本。

我尝试在我的服务器端安装谷歌字体，但没有成功。

我的page.js

import HomePage from '../components/Home/Home'
import { headers } from 'next/headers'
import { Inter } from 'next/font/google'

const inter = Inter({subsets:['latin']})

export default async function Home() {return (
    <>
    
    <main className={inter.className}>
      <HomePage />
    
     
    </main>
    </>
  );
}

这是我的热门产品部分

<div className="mb-10 flex justify-center">
        <div className="text-center w-full lg:w-2/5">
          <h2 className="text-xl lg:text-2xl mb-2 text-emerald-500 font-semibold">
            Popular Products for Daily Shopping
          </h2>
        
        </div>
      </div>

我的文本只有一行，我不明白当我的图像经过充分优化时，一行文本如何成为我页面的最大内容绘制（LCP），并且甚至没有任何图像的 LCP .

我还尝试在我的layout.js中加载google字体，但没有帮助改进LCP：

布局.js

 <html lang="en">
      <head>
      <link rel="preconnect" href="https://fonts.googleapis.com"/>
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
        <link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet"/>

      </head>
      <body >... others code

Answer 1

查看您的 page.js 文件，我发现您没有提供 display:swap。当您的 LCP 是文本内容时，您需要确保正确处理网络字体。显示交换可以让你做到这一点。

https://nextjs.org/docs/app/building-your-application/optimizing/fonts#google-fonts

// If loading a variable font, you don't need to specify the font weight 
const inter = Inter({   
    subsets: ['latin'],
    display: 'swap', <-- this is important
 })

以下是一些其他相关链接：

灯塔上最大的内容油漆（LCP）是 p 标签。（使用盖茨比）

https://developer.chrome.com/docs/lighthouse/performance/font-display/?utm_source=lighthouse&utm_medium=unknown

Nextjs 努力改进文本的 LCP

问题描述投票：0回答：1

1个回答

最新问题

Nextjs 努力改进文本的 LCP

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1