提高燈塔性能得分

Question

我在這里通過 firebase firebase-hosting托管Ionic-React web 應用程序：

https://drakapoor-65d6d.web.app/

我通過 chrome dev-tools 在頁面上進行了燈塔審核，但性能評級非常差......

我無法理解代碼的哪一部分導致分數下降。

我已經評論了此演示的所有路線和組件，甚至刪除了 fonts，如果您嘗試通過 chrome 開發工具和 go 運行 Lighthouse 到“查看原始跟蹤”，它將顯示網站的詳細分析，下面是出來的結果：

現在，如果您看到嘗試加載特定塊“https://drakapoor-65d6d.web.app/static/js/6.53bd499b.chunk.js”丟失了大約 4 秒，我不知道里面有什么，我'已經贊揚了整個項目並進行了部署。 我怎樣才能擺脫這個？ 發生了什么事，我什至對任何方向都毫無頭緒......

LightHouse評分：這里如果看到最大的contentful paint和速度指數都很差，請問這是什么原因造成的？ 我什至幾乎什么都不做。。

如果我能提供任何可以幫助您幫助我的東西，請告訴我，謝謝。

Answer 1

TL;博士; 糟糕的燈塔分數可能是由您的網絡、硬件或任何其他第 3 方插件引起的。

最大內容繪制 (LCP) 是FCP + N 秒到第一個圖像或文本塊的度量

First Contentful Paint (FCP) 是一個重要的、以用戶為中心的衡量感知加載速度的指標，因為它標志着頁面加載時間線中用戶可以在屏幕上看到任何內容的第一個點- 快速 FCP 有助於讓用戶放心正在發生。

此外，引用Web Dev #In the Field ；

站點的性能可能會因用戶的設備功能及其網絡狀況而有很大差異。 它還可以根據用戶是否（或如何）與頁面交互而變化。

具有 7.3s 的第一個 Contentful Paint (FCP) 被認為是差，因為它超過了 3s。 FCP 在審計開始時首次測量。

這些是指標的分類（基於Developer Insight ）；

        Good            Needs Improvement       Poor
FCP     [0, 1000ms]     (1000ms, 3000ms]        over 3000ms
FID     [0, 100ms]      (100ms, 300ms]          over 300ms
LCP     [0, 2500ms]     (2500ms, 4000ms]        over 4000ms
CLS     [0, 0.1]        (0.1, 0.25]             over 0.25

可以在此處找到上述每個指標的更多詳細信息；

• FCP -第一個內容豐富的油漆
• FID -首次輸入延遲
• LCP -最大的內容塗料
• CLS-累積版式移位

根據性能評分。 您的分數也可能會根據以下因素而波動；

• A/B 測試或正在投放的廣告的更改
• 互聯網流量路由變化
• 在不同的設備上進行測試，例如高性能台式機和低性能筆記本電腦
• 注入 JavaScript 並添加/修改網絡請求的瀏覽器擴展
• 防毒軟件

為了提高您的頁面性能，請考慮以下做法；

1. 使用緩存策略服務 static 資產並對其進行 CDN 化
2. 盡可能考慮代碼拆分和延遲加載組件
3. 縮小 CSS 和 JS。 如果可能的話，調整圖像大小+使用無損壓縮進行壓縮
4. 在您的鏈接中為最終將在您的頁面加載時首次加載的資產使用preload加載。
5. 盡量減少第三方使用
6. 考慮為觸摸和滾輪事件偵聽器使用被動偵聽器。 在此處閱讀有關它的更多信息

您還可以在Lighthouse 審計文檔中找到更多內容

最后但並非最不重要的一點是，如果您已經發布了您的網站 - 您還可以讓 Lighthouse 在這里審核您的網站。 所有測試均使用模擬移動設備運行，限制為快速 3G 網絡和 4 倍 CPU 減速。