WordPress 網站如何減少 DOM 大小
通過 lighthouse 或 Google PageSpeed Insights 執行網站速度測試時，可能會收到以下建議：“避免DOM大小過大。”這意味著您的網頁包含太多DOM節點或嵌套太深的HTML標籤。這可能會影響網站性能。建議減少 DOM 大小以確保最佳的網站性能和用戶體驗，本文將為你介紹WordPress網站如何減少 DOM 大小。
什麼是DOM？
所謂DOM指的是文檔對像模型(Document Object Model)。它提供了對文檔結構化的描述，並將HTML頁面與腳本、程序語言聯繫起來透過瀏覽器每次加載頁面時生成的對象的結構，它的名字來源於首字母縮寫詞文檔對像模型。
實際上它是一個樹狀結構，借助 CSS 和 JS 幫助渲染和繪製網頁。當瀏覽器接收到 HTML 文檔時，它會創建一個DOM，它是頁面的文檔對像模型。它是一種層次結構，其中有不同的對象，其中一些對象依賴於其他對象。該結構類似於樹，因為存在其他次要項目所依賴的主要對象。
為了大家更好地理解，下面演示一段HTML程式碼以及其對應的DOM樹形結構圖，如下所示。
<html>
<head>
<meta charset="UTF-8">
<title>測試</title>
</head>
<body>
<h1>標題</h1>
<ul>
<1i>
<a href="#">連結</a>
</1i>
</ul> <script data-no-optimize="1">window.lazyLoadOptions=Object.assign({},{threshold:300},window.lazyLoadOptions||{});!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function o(t){return e({},at,t)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,vt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,vt,e)}function i(t){return s(t,null),0}function r(t){return null===c(t)}function u(t){return c(t)===_t}function d(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function f(t,e){et?t.classList.add(e):t.className+=(t.className?" ":"")+e}function _(t,e){et?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function v(t,e){!e||(e=e._observer)&&e.unobserve(t)}function b(t,e){t&&(t.loadingCount+=e)}function p(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function h(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function m(t){return!!t[lt]}function E(t){return t[lt]}function I(t){return delete t[lt]}function y(e,t){var n;m(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[lt]=n)}function L(a,t){var o;m(a)&&(o=E(a),t.forEach(function(t){var e,n;e=a,(t=o[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function k(t,e,n){f(t,e.class_loading),s(t,st),n&&(b(n,1),d(e.callback_loading,t,n))}function A(t,e,n){n&&t.setAttribute(e,n)}function O(t,e){A(t,rt,l(t,e.data_sizes)),A(t,it,l(t,e.data_srcset)),A(t,ot,l(t,e.data_src))}function w(t,e,n){var a=l(t,e.data_bg_multi),o=l(t,e.data_bg_multi_hidpi);(a=nt&&o?o:a)&&(t.style.backgroundImage=a,n=n,f(t=t,(e=e).class_applied),s(t,dt),n&&(e.unobserve_completed&&v(t,e),d(e.callback_applied,t,n)))}function x(t,e){!e||0<e.loadingCount||0<e.toLoadCount||d(t.callback_finish,e)}function M(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function N(t){return!!t.llEvLisnrs}function z(t){if(N(t)){var e,n,a=t.llEvLisnrs;for(e in a){var o=a[e];n=e,o=o,t.removeEventListener(n,o)}delete t.llEvLisnrs}}function C(t,e,n){var a;delete t.llTempImage,b(n,-1),(a=n)&&--a.toLoadCount,_(t,e.class_loading),e.unobserve_completed&&v(t,n)}function R(i,r,c){var l=g(i)||i;N(l)||function(t,e,n){N(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";M(t,a,e),M(t,"error",n)}(l,function(t){var e,n,a,o;n=r,a=c,o=u(e=i),C(e,n,a),f(e,n.class_loaded),s(e,ut),d(n.callback_loaded,e,a),o||x(n,a),z(l)},function(t){var e,n,a,o;n=r,a=c,o=u(e=i),C(e,n,a),f(e,n.class_error),s(e,ft),d(n.callback_error,e,a),o||x(n,a),z(l)})}function T(t,e,n){var a,o,i,r,c;t.llTempImage=document.createElement("IMG"),R(t,e,n),m(c=t)||(c[lt]={backgroundImage:c.style.backgroundImage}),i=n,r=l(a=t,(o=e).data_bg),c=l(a,o.data_bg_hidpi),(r=nt&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),k(a,o,i)),w(t,e,n)}function G(t,e,n){var a;R(t,e,n),a=e,e=n,(t=Et[(n=t).tagName])&&(t(n,a),k(n,a,e))}function D(t,e,n){var a;a=t,(-1<It.indexOf(a.tagName)?G:T)(t,e,n)}function S(t,e,n){var a;t.setAttribute("loading","lazy"),R(t,e,n),a=e,(e=Et[(n=t).tagName])&&e(n,a),s(t,_t)}function V(t){t.removeAttribute(ot),t.removeAttribute(it),t.removeAttribute(rt)}function j(t){h(t,function(t){L(t,mt)}),L(t,mt)}function F(t){var e;(e=yt[t.tagName])?e(t):m(e=t)&&(t=E(e),e.style.backgroundImage=t.backgroundImage)}function P(t,e){var n;F(t),n=e,r(e=t)||u(e)||(_(e,n.class_entered),_(e,n.class_exited),_(e,n.class_applied),_(e,n.class_loading),_(e,n.class_loaded),_(e,n.class_error)),i(t),I(t)}function U(t,e,n,a){var o;n.cancel_on_exit&&(c(t)!==st||"IMG"===t.tagName&&(z(t),h(o=t,function(t){V(t)}),V(o),j(t),_(t,n.class_loading),b(a,-1),i(t),d(n.callback_cancel,t,e,a)))}function $(t,e,n,a){var o,i,r=(i=t,0<=bt.indexOf(c(i)));s(t,"entered"),f(t,n.class_entered),_(t,n.class_exited),o=t,i=a,n.unobserve_entered&&v(o,i),d(n.callback_enter,t,e,a),r||D(t,n,a)}function q(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function H(t,o,i){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?$(t.target,t,o,i):(e=t.target,n=t,a=o,t=i,void(r(e)||(f(e,a.class_exited),U(e,n,a,t),d(a.callback_exit,e,n,t))));var e,n,a})}function B(e,n){var t;tt&&!q(e)&&(n._observer=new IntersectionObserver(function(t){H(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function J(t){return Array.prototype.slice.call(t)}function K(t){return t.container.querySelectorAll(t.elements_selector)}function Q(t){return c(t)===ft}function W(t,e){return e=t||K(e),J(e).filter(r)}function X(e,t){var n;(n=K(e),J(n).filter(Q)).forEach(function(t){_(t,e.class_error),i(t)}),t.update()}function t(t,e){var n,a,t=o(t);this._settings=t,this.loadingCount=0,B(t,this),n=t,a=this,Y&&window.addEventListener("online",function(){X(n,a)}),this.update(e)}var Y="undefined"!=typeof window,Z=Y&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),tt=Y&&"IntersectionObserver"in window,et=Y&&"classList"in document.createElement("p"),nt=Y&&1<window.devicePixelRatio,at={elements_selector:".lazy",container:Z||Y?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",it="srcset",rt="sizes",ct="poster",lt="llOriginalAttrs",st="loading",ut="loaded",dt="applied",ft="error",_t="native",gt="data-",vt="ll-status",bt=[st,ut,dt,ft],pt=[ot],ht=[ot,ct],mt=[ot,it,rt],Et={IMG:function(t,e){h(t,function(t){y(t,mt),O(t,e)}),y(t,mt),O(t,e)},IFRAME:function(t,e){y(t,pt),A(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){y(t,pt),A(t,ot,l(t,e.data_src))}),y(t,ht),A(t,ct,l(t,e.data_poster)),A(t,ot,l(t,e.data_src)),t.load()}},It=["IMG","IFRAME","VIDEO"],yt={IMG:j,IFRAME:function(t){L(t,pt)},VIDEO:function(t){a(t,function(t){L(t,pt)}),L(t,ht),t.load()}},Lt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,o=this._settings,i=W(t,o);{if(p(this,i.length),!Z&&tt)return q(o)?(e=o,n=this,i.forEach(function(t){-1!==Lt.indexOf(t.tagName)&&S(t,e,n)}),void p(n,0)):(t=this._observer,o=i,t.disconnect(),a=t,void o.forEach(function(t){a.observe(t)}));this.loadAll(i)}},destroy:function(){this._observer&&this._observer.disconnect(),K(this._settings).forEach(function(t){I(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;W(t,n).forEach(function(t){v(t,e),D(t,n,e)})},restoreAll:function(){var e=this._settings;K(e).forEach(function(t){P(t,e)})}},t.load=function(t,e){e=o(e);D(t,e)},t.resetStatus=function(t){i(t)},t}),function(t,e){"use strict";function n(){e.body.classList.add("litespeed_lazyloaded")}function a(){console.log("[LiteSpeed] Start Lazy Load"),o=new LazyLoad(Object.assign({},t.lazyLoadOptions||{},{elements_selector:"[data-lazyloaded]",callback_finish:n})),i=function(){o.update()},t.MutationObserver&&new MutationObserver(i).observe(e.documentElement,{childList:!0,subtree:!0,attributes:!0})}var o,i;t.addEventListener?t.addEventListener("load",a,!1):t.attachEvent("onload",a)}(window,document);</script><script data-no-optimize="1">window.litespeed_ui_events=window.litespeed_ui_events||["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script><script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/blog/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script><script data-optimized="1" type="litespeed/javascript" data-src="https://www.taki.com.tw/blog/wp-content/litespeed/js/2718e38a1c7039a66f1bae2d69befdc3.js?ver=69c14"></script></body>
</html>
上述程式碼中，層層嵌套的HTML標籤就是一個類似樹形的 DOM 文檔。其中，最外面的一層是<html>標籤，<htm1>標籤中嵌套著<head>標籤和<body>標籤，而這兩個標籤中也會嵌套其他標籤，這樣一層層的延伸很像一棵樹。
實際上它是一個樹狀結構，借助 CSS 和 JS 幫助渲染和繪製網頁。當瀏覽器接收到 HTML 文檔時，它會創建一個DOM，它是頁面的文檔對像模型。它是一種層次結構，其中有不同的對象，其中一些對象依賴於其他對象。該結構類似於樹，因為存在其他次要項目所依賴的主要對象。
DOM 將頁面的 HTML 結構表示為一棵樹，由一系列標籤組成。 DOM 有一些關鍵術語，例如節點、深度和子元素。讓我們來看看它們。
- 節點：所有創建網頁HTML結構的對象，即其中包含的所有標籤，例如HTML、BODY、DIV、H1、H2等，稱為節點，它們的聚合稱為 DOM 大小。
- 深度：DOM 的最大分支數稱為深度，如P標籤的深度。
- 子元素：子元素是每個父節點下的子節點或元素。
什麼是好的 DOM 大小？
當網站滿足這些條件時，它就會被標記。例如，當滿足以下條件時，Google PageSpeed Insights 和 Lighthouse 會使用 DOM 樹標記頁面：
- 一個總共有1,500多個節點的網站。 （在GTmetrix中，如果DOM大小超過818，您將收到警告）
- 具有超過32個節點的深度。
- 具有超過60個子節點的父節點。
這意味著最佳或良好的DOM樹大小將是總共少於1500個節點，最大深度為32個節點，並且父節點的子節點少於60個。所以，你需要盡量不要越過這些上面的數字。除此之外的任何事情都會影響您的頁面速度以及網站性能。
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>
如何在WordPress中減小DOM的大小
有幾種方法可以減小 WordPress 中 DOM 的大小：
1、將大頁面分割成多個頁面
是否有一個頁面顯示您網站的不同類型的內容？例如，聯繫表格、部落格文章、產品等。在這種情況下，最好將所有這些元素分類在不同的頁面中，並通過導航欄將它們鏈接起來。
2、啟用延遲加載插件
可以啟用延遲加載模組，您也可以使用來自 Litespeed Cache 來處理來自 YouTube 的視頻。也可限制每一個部落格頁面的文章數量。合理的最大文章數為每頁10個。
3、刪除默認WordPress主題中的不必要項目
在某些情況下，可能需要刪除 WordPress 主題附帶的某些元素，例如產品頁面上的“添加到購物車”按鈕、發布日期、作者資訊…等。
檢查 WordPress 主題的配置，看看是否有刪除這些元素的選項，如果沒有，請查找相應的 PHP 代碼來刪除它們。
.author-name{display:none;}
事實上，即使你隱藏了這些元素，還是在向用戶提供不需要的 HTML 標記 和 CSS 樣式碼，並且瀏覽器必須解析這個 CSS 對象並幫助增加 DOM 的大小。
4、使用良好的程式碼主題或網頁編輯器
WordPress 主題直接影響 DOM 的大小。因此，建議使用良好程式碼的主題，例如 Astra 、Genesis Framework 或 GeneratePress。網頁編輯器還經常插入太多 div 標籤，因此使用像 OxygenBuilders 這樣的解決方案很重要，它不會注入不需要的元素並允許對 HTML 結構進行更多控制。
結論
以上是我們為你介紹的 WordPress 網站如何減少 DOM 大小的全部內容，如今的搜索引擎以及用戶更喜歡擁有良好的頁面體驗和快速的加載速度來做為一個好的網站，因此，必須經常測試網站速度並註意警告和建議，只要在 WordPress 網站中保持 HTML 結構簡單，不僅會加快網站速度，還會提供更好的用戶體驗。
