減少網站 DOM 大小的關鍵
已發表: 2020-11-17影響在網頁上實現良好 SEO 定位的方面之一是其加載性能。 這是一個頁面的 DOM 大小起著關鍵作用的主題。
這就是為什麼我們要解釋如何認為 DOM 過大以及如何減少它。
讓我們開始！
什麼是 DOM？
簡單地說，當我們談論 DOM 時，我們指的是瀏覽器每次加載頁面時生成的對象的結構。 它的名字來源於首字母縮寫詞文檔對像模型。
它是一種層次結構，其中有不同的對象，其中一些對象依賴於其他對象。 該結構類似於樹，因為存在其他次要項目所依賴的主要對象。 DOM 將頁面的 HTML 結構表示為一棵樹，由一系列標籤組成。
換句話說，當瀏覽器準備一個頁面向我們展示時，它會根據其 HTML 結構構建一個由頁面的所有元素組成的對象樹。
每當瀏覽器收到一個 HTML 文檔時，它就必須將它轉換成這種樹狀結構，我們稱之為 DOM 或 DOM 樹。 JavaScript 代碼可以訪問該 DOM 並對其進行修改。
DOM 大小如何影響您的 Web 性能？
事實上，DOM 的大小會影響頁面的性能。 過大的 DOM 會降低網站速度，因為它具有以下影響：
- 網絡效率和負載性能。 如果 DOM 過大，它通常會包含在用戶第一次加載頁面時不可見的 HTML 元素，這會不必要地增加數據消耗並使網站加載更慢。
- 運行時性能。 當用戶和腳本與頁面交互時，瀏覽器必須不斷地重新計算 HTML 標籤的位置和样式。
- 內存性能。 如果 DOM 樹太大，瀏覽器可能需要更多內存來處理它。
如何在技術上減小 DOM 的大小？
要減小 DOM 大小使其不會對 Web 性能產生負面影響，您必須刪除所有不必要的 HTML 元素。 正如我們所看到的，如果我們不採取必要的措施，它會減慢頁面速度有幾個原因。
而不是使用此代碼；
<div id = ”navigation-main”> <ul> etc .. </ul> </div>最好使用另一個；
<ul id = ”navigation-main”> etc .. </ul>關於樹形結構，我們需要知道以下術語：
- 節點： DOM 的所有 HTML 元素。 它們也被稱為樹的“葉子”。
- 輔助節點：那些沒有更多分支的節點。
也就是說，最好的事情是樹的深度由 形成：
- 少於 32 個節點。
- 每個節點少於 60 個輔助節點。
Google 建議在開發網站時，頁麵包含少於 1,500 個 DOM 節點，這意味著設計不應過於復雜。
如何在 WordPress 中減小 DOM 的大小
有幾種方法可以減小 WordPress 中 DOM 的大小：
將大頁面分割成多個頁面
您是否有一個頁面顯示您網站的不同類型的內容？ 例如，聯繫表格、博客文章、產品等。
在這種情況下，最好將所有這些元素分類在不同的頁面中，並通過導航欄將它們鏈接起來。
激活延遲加載插件並將所有可能的元素拆分為頁面
您可以在所有允許它的元素中啟用延遲加載模塊。 您可以使用來自 WordPress WP-Rocket 的 Youtube Lite 或 Lazy Load 來處理來自 YouTube 的視頻。
限制每個博客頁面的帖子數量也很重要。 合理的最大帖子數為每頁 10 個。 這種做法也適用於每頁應顯示的產品數量。
有一個選項可以更改每頁的帖子數。 轉到設置菜單 > 閱讀子菜單，更改博客頁面顯示的最大值並保存更改.
我們還建議將相關出版物的數量限制在最多三個或四個。
刪除默認 WP 主題中包含的不必要項目
在某些情況下，可能需要默認刪除 WordPress 主題附帶的某些元素，例如產品頁面上的“添加到購物車”按鈕、發布日期、作者信息等。
檢查 WordPress 主題的配置，看看是否有刪除這些元素的選項，如果沒有，請查找相應的 PHP 代碼來刪除它們。
使用編碼良好的主題或頁面構建器
WordPress 主題的質量直接影響 DOM 的大小。 因此，建議使用編碼良好的主題，例如 Astra 或 GeneratePress。
頁面構建器還經常插入太多 div 標籤，因此使用像 Oxygen Builders 這樣的解決方案很重要，它不會注入不需要的元素並允許對 HTML 結構進行更多控制。
HotJar 之類的工具可以讓您查看用戶正在使用的內容以及不適合他們的內容。 運行仔細分析是獲得正確 DOM 大小的基礎。
最後的想法
過多的 Dom Size 會損害您的 Web 性能，從而減慢頁面加載時間。 保持您的HTML 結構簡單，沒有不必要的元素。 檢查您的 DOM 樹並刪除那些不會為您的站點增加價值的節點。 您不僅會加快網站速度，還會提供更好的用戶體驗。
毫無疑問，谷歌將在未來幾個月發布的Page Experience 更新中考慮 DOM 大小。 確保有一個足夠的，所以它不會影響您的網絡性能。