
一组变通方法,作为一个“各司其职”的 Nuxt 模块,用于优化 Google Lighthouse 和 Google PageSpeed Insights 中的最大内容绘制 (LCP)。
该模块为以下 Nuxt 问题(以及其他问题)提供了解决方案
prefetch (#18376)inlineStyles 选项导致 CSS 重复 (#21821)npx nuxi@latest module add nuxt-vitalizer
将 Nuxt Vitalizer 添加到 Nuxt 配置中即可
// `nuxt.config.ts`
export default defineNuxtConfig({
modules: ['nuxt-vitalizer']
})
要自定义模块,请在 Nuxt 配置中配置 vitalizer 选项
// `nuxt.config.ts`
export default defineNuxtConfig({
modules: ['nuxt-vitalizer'],
vitalizer: {
// Remove the render-blocking entry CSS
disableStylesheets: 'entry'
}
})
应用此模块的优化功能后,您可以达到更高的 Lighthouse 性能分数

!注意 此功能默认启用。
大型 Nuxt 应用程序可能因 HTML 中累积的 <link rel="prefetch"> 标签而导致 Lighthouse 和 Google PageSpeed Insights 中的性能分数不佳。
对于每个动态导入,例如异步组件和图像等其他资产,都会渲染一个 prefetch 链接。这会导致浏览器预取这些块,即使它们在当前页面上不需要。虽然这对于应用程序的整体性能很有益,但它可能导致大量的预取请求,从而对最大内容绘制分数产生负面影响。
此模块通过禁用动态导入的 prefetch 链接渲染,挂接到 Nuxt 构建过程以优化 LCP 分数。
!注意 此功能必须手动启用。
预加载链接用于预加载当前页面所需的关键资源。虽然它们通常在优化网站性能方面占有一席之地,但如果使用不当,也可能导致大量的请求。删除预加载链接有助于提高 FCP(首次内容绘制)分数,尤其是在网络状况较差的情况下。
要删除预加载构建资源,请将 disablePrefetchLinks 选项设置为 true
// `nuxt.config.ts`
export default defineNuxtConfig({
modules: ['nuxt-vitalizer'],
vitalizer: {
disablePrefetchLinks: true
}
})
!注意 此功能必须手动启用。要使用它,您需要启用 Nuxt
inlineStyles功能。请务必在此选项启用后测试您的应用程序。
CSS 样式表是阻塞渲染的资源,这意味着浏览器必须下载并解析 CSS 才能渲染页面。通过使用内联样式而不是加载样式表,浏览器可以更快地渲染页面,从而提高 LCP 分数。
虽然最新的 Nuxt 版本在 SSR 渲染期间内联样式,但 entry.<hash>.css 样式表仍然在 HTML 中渲染。这可能导致阻塞渲染的 CSS,从而对最大内容绘制分数产生负面影响。
为什么会这样?正如 Nuxt 核心团队成员 @danielroe 所解释
我认为这是当前内联样式实现的一个限制。
应用程序中“随处”使用的样式可以安全地从 CSS 源中完全删除。但仅在一个组件或页面中使用的 CSS 需要存在于 CSS 文件中,“并且”内联。
目前,vite 完全负责在客户端加载 CSS,这意味着即使我们确实跟踪了已加载的 CSS,我们也无法阻止 vite 加载包含重复 CSS 的 CSS 文件。
我绝对希望看到这个问题得到解决。
首先,尝试在 app.vue 文件中导入主应用程序样式。当 Nuxt 构建时,它们将保存为 entry CSS 文件
// `app.vue`
import '~/assets/css/main.css'
现在,将 disableStylesheets 选项设置为 entry 以防止 entry.<hash>.css 样式表在 HTML 中渲染
// `nuxt.config.ts`
export default defineNuxtConfig({
modules: ['nuxt-vitalizer'],
vitalizer: {
disableStylesheets: 'entry'
}
})
interface ModuleOptions {
/**
* Whether to remove prefetch links from the HTML. If set to `dynamicImports`, only dynamic imports will be removed. To disable all prefetching, such as images, set to `true`.
*
* @remarks
* This will prevent the browser from downloading chunks that may not be needed yet. This can be useful for improving the LCP (Largest Contentful Paint) score.
*
* @default 'dynamicImports'
*/
disablePrefetchLinks?: boolean | 'dynamicImports'
/**
* Whether to remove preload links from the HTML. This can be useful for improving the FCP (First Contentful Paint) score, especially when emulating slow network conditions.
*
* @default false
*/
disablePreloadLinks?: boolean
/**
* Whether to remove the render-blocking stylesheets from the HTML. This only makes sense if styles are inlined during SSR rendering. To only prevent the `entry.<hash>.css` stylesheet from being rendered, set to `entry`. If set to `true`, all stylesheet links will not be rendered.
*
* @remarks
* This requires to have the Nuxt `inlineStyles` feature enabled. Make sure to test your application after enabling this option.
*
* @default false
*/
disableStylesheets?: boolean | 'entry'
}
corepack enable 启用 Corepackpnpm install 安装依赖pnpm run dev:preparepnpm run dev 启动开发服务器MIT 许可证 © 2024-PRESENT Johann Schopplich