免費模板｜提升技術SEO：DOM優化實戰指南

點開網站，五彩繽紛的圖文呈現眼前。此刻，你或許沒意識到這一切背後的精密運作，它就是Lazy編今天要介紹的 DOM（Document Object Model）。

你可以將 DOM 想像成一棵大樹，每個 HTML 標籤都是這棵樹上的「枝葉」，而瀏覽器則負責解析這棵樹，確保所有元素都能正確呈現。

例如，以下 HTML 會被解析為 DOM 樹：

<!DOCTYPE html>
<html>
<head>
    <title>我的網站</title>
</head>
<body>
    <h1>歡迎來到我的網站</h1>
    <p>這是一個簡單的介紹段落。</p>
</body>
</html>

這段 HTML 會轉換成以下的 DOM 結構：

<html>
├── <head>
│   ├── <title>
├── <body>
│   ├── <h1>
│   ├── <p>

每個 HTML 標籤在 DOM 中都是一個節點，瀏覽器根據這棵 DOM 樹來渲染頁面，並允許 JavaScript 操作這些元素。

參考資料：Introduction to the DOM

為什麼 DOM 過大會影響 SEO？

你有「找不到東西」的經驗嗎？在雜物房，每次找東西，都像大海撈針，最後效率低下，還會累死人。
網頁也如此，當 DOM 過大，瀏覽器運作起來也會耗時又吃力，這正是影響 SEO 的關鍵因素：速度。

1. DOM 過大會拖慢頁面載入速度

頁面載入速度是 Google 排名的重要因素。
DOM 過大時，瀏覽器需要更多時間來解析、渲染和操作 DOM 樹，導致頁面載入變慢。
若 Googlebot 在抓取頁面時遇到長時間載入，可能會影響索引和排名。(可以想像成排隊，Googlebot得幫當前顧客結完帳後才能處理下一個，假如某些JS耗時許久才能抓取，Googlebot就會卡在那沒辦法爬塊JS以下的代碼)

2. 增加 JavaScript 的執行時間

若 JavaScript 需要操作過大的 DOM，會導致大量計算和重渲染，影響使用者體驗。
若 JavaScript 操作 DOM 的時間過長，可能觸發 Google PageSpeed Insights 的警告。(分數不好看)

3. 影響行動裝置體驗

行動裝置的硬體效能相對較低，DOM 過大時，可能導致頁面很卡或延遲。
Google 會根據「行動裝置友善程度」調整搜尋排名，若網站在行動端表現不佳，SEO 會受到影響。

4. Google 建議的 DOM 大小

根據 Google 官方建議，理想的 DOM 大小應符合以下基準：

總節點數少於 1500 個
DOM 深度小於 32 層
父節點的子節點數少於 60 個

聽起來很複雜，對吧？結尾我會提供代碼模板，幫你檢查自己的網頁是否合乎規準！

參考資料：避免 DOM 過大

如何優化 DOM？

1. 避免過度使用 `<div>`，改用語意化標籤

許多人習慣使用 <div> 來包裝內容(包括早期的Lazy編)，這會讓 DOM 結構變複雜。

❌ 錯誤做法（過度使用 <div>）

<div class="container">
    <div class="header">
        <div class="title">我的網站</div>
    </div>
</div>

✅ 正確做法（使用語意標籤）

<header>
    <h1>我的網站</h1>
</header>

❌ 錯誤做法（無意義的 <div> 包裝）

<div class="content">
    <div class="article">
        <h2>這是一篇文章</h2>
        <p>文章內容...</p>
    </div>
</div>

✅ 正確做法（使用 <article> 和 <section>）

<article>
    <h2>這是一篇文章</h2>
    <p>文章內容...</p>
</article>

常見的語意化標籤

使用語意化標籤來取代 <div>，不僅能減少 DOM 深度，還能讓搜尋引擎更準確地理解頁面內容。以下是不同語意標籤的用途與適用場景：

語意標籤	用途	示例
`<header>`	代表頁面的標頭或區塊的標題	`<header><h1>網站標題</h1></header>`
`<article>`	用於獨立的內容區塊，如部落格文章	`<article><h2>文章標題</h2><p>文章內容...</p></article>`
`<section>`	用於分隔相關內容區塊	`<section><h2>服務介紹</h2><p>我們的服務...</p></section>`
`<nav>`	代表網站的導航區塊	`<nav><ul><li><a href='/home'>首頁</a></li></ul></nav>`
`<aside>`	用於次要內容，如側邊欄	`<aside><p>這是側邊資訊</p></aside>`
`<footer>`	代表頁面的頁尾	`<footer><p>版權所有</p></footer>`

2. 延遲載入非必要內容（Lazy Loading）

這部分Lazy編之前有提到過，參考適合文組的技術SEO-親身分享4種網站速度優化法

如果頁面中有大量圖片、影片或 JavaScript 動態內容，可以使用 Lazy Loading（延遲加載），讓不在視窗內的內容延後載入。

✅ 圖片 Lazy Loading

<img src="image.jpg" loading="lazy" alt="圖片描述">

(一般WordPress主題會內建圖片、影音都加入這個標籤，不確定的話可以使用F12檢查下喲！)

3. 減少 DOM 深度，簡化 HTML 結構

過多的層級也會影響性能，例如：

❌ 錯誤做法（過深的 DOM 結構）

<div>
    <div>
        <div>
            <p>這是一段文字</p>
        </div>
    </div>
</div>

✅ 正確做法（簡化 DOM 結構）

<p>這是一段文字</p>

這些過多層級就像俄羅斯娃娃，爬蟲得一個個拆開來爬，很辛苦，請體恤他們，適時減少層級結構，寫出乾淨的code吧！且這樣維護起來，也會更容易。

4. 減少不必要的 JavaScript

JS和DOM的關係，就類似顧客與服務生，假如顧客在餐廳每點一道菜，就得一職不斷地呼喚服務生，這樣一來一往，會耗費大量時間。
如果 JavaScript 在短時間內頻繁修改 DOM，瀏覽器必須不斷地重新整理畫面，讓使用者感受到明顯的延遲與卡頓。而這不僅會影響使用者體驗，還會讓 Google PageSpeed Insights 給出警告，提醒開發者應該減少不必要的 DOM 操作。

參考資料：瀏覽器的重繪機制與網頁渲染

但如果你一次把所有菜單都列出來，服務生就能一次性幫你上菜，整體流程會更順暢！因此，我們要做的事情就是……「批量更新 DOM」

如何優化 JavaScript 操作 DOM？

方法一：批量更新 DOM：避免逐個新增或修改元素，應該先收集所有變更，最後一次性更新 DOM。
❌ 錯誤做法（多次修改 DOM）

const list = document.getElementById('list');
for (let i = 0; i < 100; i++) {
    let item = document.createElement('li');
    item.textContent = `項目 ${i}`;
    list.appendChild(item); // 每次迴圈都操作 DOM
}

✅ 正確做法（批量更新 DOM）

const list = document.getElementById('list');
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
    let item = document.createElement('li');
    item.textContent = `項目 ${i}`;
    fragment.appendChild(item); // 將元素先添加到 Fragment 中
}
list.appendChild(fragment); // 最後一次性更新 DOM

方法二：使用 Virtual DOM（如 React）：減少不必要的直接 DOM 操作，透過 Virtual DOM 計算最少變更。

參考資料：Virtual DOM and Internals

方法三：減少 DOM 讀取次數：如果需要讀取多個 DOM 元素的屬性，應先存入變數，避免頻繁查詢 DOM。

5. JavaScript 自動化工具來檢查與優化 DOM

你可能會問：要怎麼知道自己的DOM有沒有過大啊？如果過大的話，有沒有能快速、自動化解決的辦法？
來了來了，就等你問這句，Lazy編將提供代碼模板，直接貼在開發者介面的console就可以使用了喔！

🔹 JavaScript 自動偵測 DOM 過大的腳本

function checkDOMSize() {
    const totalNodes = document.getElementsByTagName('*').length;
    const maxDepth = getDOMDepth(document.documentElement);
    
    console.log(`DOM 節點總數: ${totalNodes}`);
    console.log(`DOM 最大深度: ${maxDepth}`);
    
    if (totalNodes > 1500) {
        console.warn("⚠️ DOM 過大！建議減少節點數量。");
    }
    if (maxDepth > 32) {
        console.warn("⚠️ DOM 過深！建議簡化 HTML 結構。");
    }
}

function getDOMDepth(node) {
    if (!node.children.length) return 1;
    return 1 + Math.max(...Array.from(node.children).map(getDOMDepth));
}

checkDOMSize();

6. 使用 JavaScript 自動移除多餘的 `<div>`

有時候，工程師可能使用過多 <div>，但<div>對爬蟲而言不具任何意義(請參考前面提到的資訊)，因此，Lazy編提供自動刪除多餘<div>的code模板：

🔹 自動刪除多餘 <div> 的 JavaScript

function removeUnnecessaryDivs() {
    document.querySelectorAll('div:empty').forEach(div => div.remove());
}

removeUnnecessaryDivs();
console.log("✅ 已清除所有空的 <div>，減少 DOM 體積。");

結論：保持 DOM 精簡是王道

懶得看完嗎？巧了，我也是，Lazy編幫你整理本篇文章的幾大重點：

瀏覽器依據DOM來解析 HTML 與顯示頁面。
DOM 過大會影響 SEO，導致載入速度變慢、尤其影響行動裝置體驗。
Google 建議控制 DOM 大小（節點數少於 1500，深度少於 32 層）。
最佳化方法包括：減少 <div>，使用語意標籤、Lazy Loading、簡化 HTML 結構、優化 JavaScript 操作 DOM。

如果你想讓網站更快、更順暢，並提升SEO性能分數，一定要注意 DOM 的大小和結構！

RWD+SEO必學！5分鐘搞懂響應式設計的關鍵技巧

降低購物車放棄率｜GTM + Meta廣告再行銷提升ROI

GTM + Looker Studio 自動追蹤錯誤，輕鬆掌握網站異常

找出用戶最想要的內容！GA站內搜尋追蹤 + 點擊分析

免費模板｜Google Sheets自動生成UTM連結

免費模板 | Google試算表自動分析GA4數據！

降低購物車放棄率｜GTM + Meta廣告再行銷提升ROI