在 Divi 5（公共 Alpha 版）中創建最快網站的 5 個技巧

Divi 5 是我們多年來努力打造最佳 WordPress 體驗的成果。最佳化 Visual Builder 和前端的每個互動和麵向是其中的一個主要部分。最終，這些改進是您可以享受的，但您可以透過多種方法在 Divi 5 的基礎上進行構建以獲得最佳結果。

本文將探討 Divi 5 內建的效能優勢以及如何充分利用這些最佳化來建立盡可能最快的網站。

了解有關 Divi 5 Public Alpha 以及如何下載的更多資訊。

下載 Divi 5 Alpha 嘗試 Divi 5 演示 成為 Divi 5 錯誤測試者

Divi 5 速度快

Divi 5 已完全重寫，效能為重中之重。與使用短代碼構建的 Divi 4 不同，Divi 5 使用更現代的基於區塊的結構。光是這一轉變就大大減少了處理內容和載入頁面所花費的時間。這個新框架還使我們能夠顯著減少載入的 HTML，這意味著您的頁面載入速度更快，尤其是在長而複雜的佈局上。

此外，Divi 5 包含更小且更有效率的 JavaScript 檔案結構。所有腳本都是抽象的，僅在需要時才排隊，這意味著不必要的程式碼不會降低網站的效能。了解有關 Divi 5 效能增強的更多資訊。

所有這些改進使 Divi 5 開箱即用更快，但您可以採取幾個步驟來使您的網站更快。

創建最快 Divi 5 網站的 5 個技巧

使用 Divi 創建一個速度極快的網站現在變得越來越容易。這一切都歸功於 Divi 5 顯著的效能提升以及內建的功能，這些功能使建立高效能網站變得更加容易。我們有信心能夠充分發揮迪維的優勢並收復失地。

1.減少頁面上模組類型的數量

Divi 5 重建的最大優點之一是它不會不必要地載入不需要的資源。這一點在 Divi 模組中尤其明顯，每個模組都會為頁面添加自己獨特的樣式和腳本。使用的模組類型越多樣化，渲染頁面所需的資源就越多。現在，這不是什麼大問題，但如果您注重效能，那麼記住這一點很重要（這適用於任何網站或頁面建立器）。

Divi 5 的插入模組視圖

為了簡化資源並加快網站速度，請專注於在任何給定頁面上使用有限數量的核心模組類型。實施此策略的一個好方法是使用 Divi Library 和 Divi Cloud。您可以透過儲存各個模組、部分和佈局來輕鬆重複使用預先設計的元素。這可以確保一致地應用相同的樣式和模組，從而減少因不必要的變化而導致頁面膨脹的可能性。

儲存行/部分/模組可讓您輕鬆地在頁面或網站的其他位置重複使用這些元素（具有相同的樣式設定）。

記住您已經在頁面上使用過哪些模組似乎會限制您，但設計頁面的方法不只一種。下面的範例展示了使用不同模組排列建立相同事物的兩種方法。根據頁面上是否已使用 Blurb 模組，您可以選擇使用它或將其分解來設計頁面的這一部分。

使用 3 個獨立的模組（​​左）或 Blurb 模組（右）。選擇哪一個可能取決於您已經使用過哪些模組。

現在，不要太擔心這個。如果您的頁面需要某個元素，您必須建立它。但是，當您有多種建置方式時，您可以輕鬆地使用頁面上已使用的模組，以免載入額外的資源。

2.利用全域預設來減少CSS

在 Divi 5 中提高網站效能最有效的方法之一是使用預設。當您將預設套用到元素時，Divi 5 產生的 CSS 較少，因為它使用基於類別的系統，在多個元素之間共用樣式。當多個元素使用相同的樣式時，對於相同等級的設計，您的頁面輸出的 CSS 會較少。

為常用模組（例如按鈕、標題和部分）建立全域預設，無需為每個新實例手動調整樣式。這顯著減少了產生的自訂 CSS 總量，更不用說設計網站樣式所需的時間了。

以下是有關如何開始在設計流程中使用預設的一些想法：

• 行預設：您可以將列結構、裝訂線寬度、填滿和背景樣式等設定新增至行預設。這有助於在整個網站中保持一致的行間距和視覺樣式。
• 部分預設：部分預設可讓您定義背景顏色、漸層或圖片、填滿和間距以及可見性設置，例如特定裝置的顯示條件或自訂 CSS。
• 模組預設（例如按鈕模組） ：模組預設可讓您新增按鈕文字樣式、顏色、懸停效果、邊框半徑、陰影和對齊方式等設定。這可以確保您網站上的按鈕看起來一致並符合您的設計主題。您可以建立多種變體，但在單一頁面上使用相同的預設將進一步節省樣式。

3. 避免使用 Divi 4 內容來提高效能

如果您希望 Divi 5 獲得最佳效能，則需要完全遷移每個頁面。自從我們將 Divi 5 作為公共 Alpha 版推出以來，缺少一些功能，這些功能很快就會提供（儘管您期望的大部分功能已經存在）。如果您的頁面使用 Divi 5 尚不支援的元素，則該頁面無法完全移轉到 D5。在這些事件中，將為這些頁面載入 Divi 4 框架（為了向後相容），這意味著頁面仍然可以工作，但無法享受 Divi 5 頁面速度的好處。

Divi 5 Migrator 發現不支援的 D4 內容的範例

若要充分利用 Divi 5 的最佳化，請使用內建遷移工具掃描您的網站以尋找 Divi 4 內容。遷移器將突出顯示 Divi 5 尚不支援的任何模組、模板或插件。

如果您現在想充分利用 Divi 5，則必須將這些元素轉換或替換為與 Divi 5 相容的元素。如果您不著急，可以等待連續的 Divi 5 Public Alpha 更新，這可能會為目前顯示為不支援的項目帶來更多相容性。了解有關 Divi 5 遷移的更多資訊。

4.限制動畫和效果，尤其是首屏動畫和效果

動畫和效果可以增強網站的設計，但它們肯定會增加額外的載入時間，特別是對於首頁內容。該區域對於感知性能至關重要，因為它是用戶首先看到的東西。此處較慢的載入時間可能會對使用者體驗和網站的核心網路生命週期產生負面影響，尤其是最大內容繪製 (LCP) 和累積佈局偏移 (CLS) 等指標。

限製或消除英雄部分和其他首屏內容中的動畫和效果，以提高網站的效能。相反，專注於提供快速載入的靜態、輕量級頁面元素。

如果必須使用動畫，請確保它們最小化並且不會幹擾初始頁面載入。使用模組預設是確保跨模組動畫使用一致的好方法（因此不會不必要地載入額外的動畫樣式）。

5.對嵌入影片使用可點擊的縮圖

直接從 YouTube 等平台嵌入影片可能會減慢頁面的載入時間，因為這些嵌入需要額外的腳本和資源。不要直接嵌入視頻，而是使用可點擊的縮圖在燈箱或新選項卡中打開視頻。這樣，影片及其關聯資源在使用者與其互動之前不會加載，從而減少了頁面的初始載入時間。

Divi 的視訊模組使這一切變得非常簡單。在「內容」標籤下，您將看到一個名為「疊加」的選項區域。然後，您可以新增一張優化圖像作為疊加層，或從 YouTube 影片本身自動產生一張圖像。

此技術可以防止在頁面首次加載時發出不必要的請求，從而幫助您的網站更快地運行。這是一種在提供影片內容的同時提高頁面效能的簡單方法。

回顧：加快 Divi 5 網站速度的 5 個技巧

• 減少模組類型的數量：最大限度地減少頁面上不同模組的數量，以簡化載入資源。
• 利用全域預設：套用預設來減少自訂 CSS 並建立一致的設計。
• 完全遷移到 Divi 5：使用 Divi 5 遷移器掃描並取代任何不支援的 Divi 4 內容。
• 限制動畫：減少動畫和效果，尤其是英雄部分，以加快初始載入速度。
• 對視頻使用可點擊的縮圖：用可點擊的縮圖替換嵌入的視頻，以避免加載不必要的腳本。

結論

Divi 5 帶來了許多內建效能改進，使其本身比舊版的 Divi 更快。它消除了短代碼，建立在更好（更新）的技術之上，並且以性能為中心的功能都有助於提供更流暢、更快的用戶體驗。您還應該使用標準的最佳實踐，例如優化映像、使用快速可靠的主機、利用 CDN 或邊緣快取以及消除未使用的檔案/程式碼。

總結一下我們所介紹的內容，您可以透過減少每個頁面上的模組類型數量、利用全域預設、確保您的內容完全從Divi 4 遷移、最小化動畫以及使用視訊影像縮圖來顯著提高網站的性能。這些小調整可協助您充分利用 Divi 5 的最佳化架構，確保您的網站看起來很棒且載入速度極快。

請記住，儘管 Divi 5 的設計考慮了速度，但您如何建立和建立頁面仍然在最大限度地提高效能方面發揮關鍵作用。

下載 Divi 5 Alpha 嘗試 Divi 5 演示

參與錯誤測試過程，幫助我們讓 Divi 5 變得更好！您的回饋將幫助我們完善 Divi 5 並在開發過程的早期解決問題。

成為 Divi 5 錯誤測試員