修復“避免過大的 DOM 大小”警告的 7 個行之有效的策略
已發表: 2022-11-23大多數 Google PageSpeed Insights 的改進建議都非常簡單明了。
無論是“延遲屏幕外圖像”、“消除渲染阻塞資源”還是“減少未使用的 CSS”，您都可以掌握處理這些問題需要採取的後續步驟。
然而，當你滾動得更深一點時，你會突然收到“避免過大的 DOM 大小”警告：
第一反應：
嘿，DOM 大小是什麼，我該如何解決？！
你來對地方了。
在接下來的段落中，您將了解有關 DOM 大小以及如何處理此警告的所有信息：
- 什麼是 DOM（文檔對像模型）？
- DOM 大小對頁面性能有何影響？
- 為什麼您會看到“避免過大的 DOM 大小”警告
- 如何修復“避免過大的 DOM 大小”警告
單擊一個按鈕即可獲得 90+ PSI 分數。 使用 NitroPack 查看您的網站！
什麼是DOM？
您的網站包含 HTML 文檔、CSS 和 JavaScript 文件等資源。
每當用戶加載您的網站時，他們的瀏覽器都會建立連接並接收資源。 一旦接收到第一個數據塊，解析過程就開始了。
解析是瀏覽器將數據（HTML 標記）轉換為 DOM 樹的步驟。
DOM 是一種將 HTML 表示為分支和節點樹的文檔模型。
樹的每個分支都以一個節點結束，每個節點都包含對象。 節點代表文檔的一部分，例如元素、文本字符串或註釋。
簡單來說，當您聽到 DOM 時，它意味著瀏覽器在每次加載網頁時構建的對象結構。
關鍵詞：
|
DOM 大小對頁面性能有何影響？
DOM 的分支和節點越多，它的大小就越大。
相應地，DOM 大小越大，您可能面臨的負面性能問題就越多。
以下是一些與較大的 DOM 大小相關的問題：
1. 數據成本增加，加載時間變慢
大型 DOM 樹通常包含許多在用戶首次加載頁面時不可見的節點。 這將不必要地增加數據成本，因為他們將不得不為您的用戶加載更多元素並減慢加載時間。
2. 淹沒用戶設備的內存資源
與 JavaScript 查詢的持續交互會導致性能不佳和渲染緩慢。 這會給您網站的用戶帶來負面的頁面體驗。
3.增加渲染時間
當用戶與您的頁面交互時，瀏覽器必須不斷地重新計算節點的位置和样式。 龐大而復雜的 DOM 樹會大大降低渲染速度。
4. 增加首字節時間 (TTFB)
TTFB 測量客戶端瀏覽器從服務器接收響應的第一個字節所花費的時間。 過多的 DOM 表示較大的 HTML 文檔。 因此，需要傳輸的數據量更多，這可能需要更多時間。
為什麼您會在 PageSpeed Insights 中看到“避免過大的 DOM 大小”警告
PSI 使用 Lighthouse 在受控環境（即使用實驗室數據）中分析 URL，以展示性能、可訪問性、最佳實踐和 SEO 分數。
為了讓 Lighthouse 標記您的頁面並分別在您的 PSI 報告中顯示“避免過大的 DOM 大小”警告，其 DOM 樹必須滿足以下任一錯誤：
- 它總共有超過 1,500 個 DOM 節點。
- 它的最大節點深度大於 32 個節點。
- 一個父節點有60 多個子節點。
加入通過 Core Web Vitals 的前 31% 的網站！ 使用 NitroPack 查看您的站點
如何修復避免過大的 DOM 大小
Google 的一個很好的經驗法則是：
“一般來說，尋找只在需要時創建 DOM 節點的方法，並在不再需要時銷毀節點。”
當然，說起來容易做起來難，有時您需要深入了解優化網站的細節。
然後，我們建議應用以下一些修復：
1.避免編碼不當的插件和主題
它們基本上會使您網站的代碼膨脹，增加您的 DOM 大小，並損害您網站的速度和整體性能。
您如何判斷主題/插件是否編碼不當？
很好的問題。 答案是：
- 閱讀評論。 如果有問題，很可能有人已經遇到並發表了評論。
- 不要害羞花一些錢。 就像其他任何東西一樣，一分錢一分貨。 通過獲得免費主題/插件來省錢聽起來不錯，但長期效果會讓你付出更多代價。
- 查看上次更新時間。 您絕對希望避免使用過時的主題和插件。
如果您是 WooCommerce 用戶或計劃開店，您一定要查看我們對 2022 年表現最佳的 Woo 主題的深入研究。
以下是選擇主題時應注意/避免的事項清單：
|
2. 最小化基於 JavaScript 的 DOM 節點
在您的網站上添加動態元素是有代價的，因為它們可能會因額外的 JavaScript 節點而變得臃腫。
對於初學者，您可以通過分配導致問題的 JS 文件並將其刪除來修復它。 如果它是第三方小部件（例如，聊天小部件），您應該尋找優化的替代方案。
3. 生成臃腫 HTML 的頁面構建器
頁面構建器的易用性使其成為許多用戶網站創建過程中不可或缺的一部分。
不幸的是，頁面構建器有時會生成帶有過多 DOM 節點的臃腫代碼。 他們通過注入過多的 div 標籤來做到這一點。
要處理它，您可以訪問您的 HTML 並手動修復它。
好消息是一些頁面構建器會採取措施解決這些眾所周知的問題。 例如，Elementor 宣布 Elementor 3.0 對 DOM 進行了重大改進，以提高新網站的速度和性能。
4. 不要將文本複制/粘貼到所見即所得的編輯器中
大多數 WYSIWYG（所見即所得）編輯器無法清理粘貼的代碼。 尤其是從另一個富文本源（如 Microsoft Word）粘貼時。 問題是它不僅會復製文本，還會復制其樣式。 它們是罪魁禍首，因為它們可能嵌入了大量 DOM 節點。
你有幾個選擇來處理它：
- 避免在編輯器中粘貼文本
- 使用粘貼為純文本選項
- （如果您的編輯器允許）粘貼後使用高級功能清理代碼
最後但並非最不重要的一點——回到你的舊頁面並清理它們。
5.將您的單頁網站分解為多個頁面
當單頁網站的唯一目的是展示您的業務時，它是一個好主意。
相反，如果您決定添加商業信息、博客文章、產品、聯繫表等，請將它們分成單獨的頁面並通過導航菜單鏈接它們。
將大頁面拆分為多個頁面可能會減少 DOM 節點的數量。
6. 不要使用 display:none 隱藏不需要的元素
display: none 通常與 JavaScript 一起使用來隱藏和顯示元素而不刪除和重新創建它們。 但是，這並不意味著它們會從您的 HTML 標記中消失，讓訪問者加載不需要的元素。
7. 避免使用複雜的 CSS 聲明和 JavaScript
複雜的 CSS 聲明和 JavaScript 可能會額外增加內存使用量並降低您的網站速度。 如果您處理過多的 DOM 節點，最好跳過它們。
自動修復 CSS 和 JavaScript 問題！ 使用 NitroPack 查看您的站點
綜上所述
確實，修復您的 DOM 問題不會導致您的 PageSpeed Insights 得分提高。
然而，努力處理“避免過大的 DOM 大小”警告的隱藏好處要大得多：
- 增加網站的加載時間
- 提高頁面的感知性能
- 為訪問者提供更好的用戶體驗
最重要的是，這三件事是谷歌獎勵的！ 最重要的是，它們是降低跳出率、增加平均花費時間以及最後但並非最不重要的——提高轉化率的必經之路。
如果您正在尋找解決任何其他 PSI 建議的方法，請務必查看我們的其他文章：
- 輕鬆提供下一代格式的圖像（WordPress、OpenCart 和 Magento）
- 如何延遲加載屏幕外圖像（5 種行之有效的技術）
- 網絡圖像優化：2022 SEO 和網站速度技術
- 8 種字體加載策略可改善您的核心 Web Vitals（2022 年）
- 如何消除渲染阻塞資源（CSS 和 JavaScript）
- 減少第三方代碼的影響（有/無插件）
- 最小化主線程工作的 7 種方法