vitalizer
nuxt-vitalizer

即刻提升 Google Lighthouse 中的 LCP 分數

Nuxt Vitalizer module

Nuxt Vitalizer

作為一款專注一事Nuxt 模組,它彙集了各種變通方案,旨在最佳化 Google Lighthouse 和 Google PageSpeed Insights 中的最大內容繪製 (LCP)。

此模組為以下 Nuxt 問題(以及其他問題)提供解決方案

功能

  • 🚀 零配置即可獲得更好的 LCP
  • 🫸 移除渲染阻塞 CSS

設定

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'
  }
})

LCP 最佳化功能

應用此模組的最佳化功能後,您可以獲得更高的 Lighthouse 效能分數

Lighthouse SEO performance score when using the module

!注意 此功能預設啟用。

大型 Nuxt 應用在 Lighthouse 和 Google PageSpeed Insights 中可能會因 HTML 中累積的 <link rel="prefetch"> 標籤而導致效能分數不佳。

對於每個動態匯入(例如非同步元件和其他資源,如圖片),都會渲染一個 prefetch 連結。這會導致瀏覽器預取這些分塊,即使它們在當前頁面中不需要。雖然這對於應用的整體效能很有利,但它可能導致大量的預取請求,從而對最大內容繪製分數產生負面影響。

此模組會掛鉤到 Nuxt 構建過程,透過停用動態匯入的 prefetch 連結渲染來最佳化 LCP 分數。

!注意 此功能必須手動啟用。

預載入連結用於預載入當前頁面所需的關鍵資源。雖然它們通常在最佳化網站效能方面有一席之地,但如果使用不當,也可能導致大量的請求。移除預載入連結有助於提高 FCP(首次內容繪製)分數,尤其是在網路條件較差的情況下。

要移除預載入構建資源,請將 disablePrefetchLinks 選項設定為 true

// `nuxt.config.ts`
export default defineNuxtConfig({
  modules: ['nuxt-vitalizer'],

  vitalizer: {
    disablePrefetchLinks: true
  }
})

停止渲染阻塞 CSS

!注意 此功能必須手動啟用。要使用它,您需要啟用 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'
}

💻 開發

  1. 克隆此倉庫
  2. 使用 corepack enable 啟用 Corepack
  3. 使用 pnpm install 安裝依賴
  4. 執行 pnpm run dev:prepare
  5. 使用 pnpm run dev 啟動開發伺服器

鳴謝

  • 所有在 Nuxt GitHub issues 中啟發此模組的討論和貢獻。

許可證

MIT 許可 © 2024-PRESENT Johann Schopplich