如何構建最快的 Divi 頁面：優化您的 Divi 內容以提高速度

隨著 Divi 的新性能更新，提供了大量提高頁面速度分數的可能性。 今天，我們將分享一些從頭開始構建 Divi 頁面時應牢記的實用提示和技巧。 這些是建議，而不是一成不變的規則。 這將始終歸結為您頁面的主要目標。 有時，您會發現自己為設計犧牲了一些速度，反之亦然。 我們相信這是為了在兩者之間找到一個健康的平衡點，但使用以下提示，您絕對可以提高 Divi 頁面速度。

讓我們深入了解吧！

訂閱我們的 YouTube 頻道

1. 優化首屏內容

已添加到 Divi 的新性能特性之一稱為關鍵 CSS。 簡而言之，Divi 中的關鍵 CSS 會自動檢測需要立即加載的 CSS，稱為首屏 CSS，並延遲加載頁面的其餘 CSS。 這本身已經有助於自動提高頁面速度，而無需您付出努力。 但是，如果您想加倍努力，您也可以決定優化首屏內容。

4 模塊英雄概念

乍一看，與訪問者分享盡可能多的信息可能很誘人，但這正是英雄應該避免的。 您的內容在樣式和視覺效果上越直接越好。 這就是為什麼限制您在折疊上方使用的模塊數量將幫助您提高 Divi 頁面速度的原因。 最好，你會使用：

• 標題
• 段落
• 按鈕

但是，在許多情況下，您還希望包含某種圖像。 如果這樣做，請盡量避免將圖像用作背景，而是將其用作模塊。 將其用作具有最大寬度的特定容器內的模塊將幫助您使用較小的圖像尺寸，從而幫助您加快網站速度。 這將我們帶到了 4 模塊英雄概念：

• 標題
• 段落
• 按鈕
• 優化圖像

使用全屏英雄或將內容拆分為多個部分以進行精確的自動檢測

全屏英雄設計受歡迎是有原因的。 它們不僅使您的設計更加透氣，而且還有助於關鍵的 CSS。 如果你選擇全屏英雄，你就決定這是唯一出現在折疊上方的東西，無論你使用什麼屏幕尺寸。 要在 Divi 中創建全屏英雄，請記住在部分設置中分配最小高度“100vh”。 通過分配一個最小高度； 您確保該部分覆蓋瀏覽器的整個高度。 從那時起，您可以在該部分內放置任何內容以成為您英雄設計的一部分。 或者，您也可以使用 Divi 的內置全屏標題。

或者，如果您不想遵循全屏英雄路線，您可以決定將折疊上方的內容分成多個部分。 Divi 將自動檢測部分級別折疊上方出現的內容。 這意味著，如果您正在構建一個部分顯示在折疊上方和部分顯示在折疊下方的大部分，則將加載整個部分的 CSS 以及該部分中元素的 CSS。 將這些部分分成多個部分將幫助您避免將太多元素視為在折疊之上。

避免在 Hero 中使用動畫以防止延遲

最好避免任何可能導致加載時間延遲的折疊。 這包括動畫。 然而，這並不意味著你應該完全避免它。 您可以輕鬆地在頁面下方使用動畫和/或限制您在英雄內部使用的動畫。 找到一個好的平衡點是關鍵。

修改平板和手機上的折疊內容

關於關鍵 CSS 需要提及的最後一件事是在較小的屏幕尺寸上修改您的設計。 確保您的首屏內容針對不同的屏幕尺寸進行了優化，這一點很重要。 這是一個調整設計的問題，因此您可以在桌面和移動設備上獲得出色的頁面速度分數。 例如，您可以在移動設備上隱藏整個主圖，以提高頁面在較小屏幕尺寸上的速度。

2. 使用智能樣式

智能樣式的工作原理

通過新的性能更新，Divi 通過減少重複樣式進行了優化。 要激活智能樣式，您需要深入 Divi Presets 的世界。 預設基本上允許您與不同元素共享樣式，而實際上不必為以相同方式設置樣式的每個元素分配唯一的樣式塊。

為部分和行使用 1 或 2 個預設

節和行是兩種元素類型，當我們談論預設時，它們似乎經常被遺忘。 就像模塊一樣，您可以為部分和行分配預設。 這不僅可以幫助您限制生成的 CSS，還可以幫助您保持頁面級別的設計一致性。 例如，假設您希望為每個部分始終使用 100 像素的頂部和底部填充，以創建垂直節奏，您沒有理由不應該在此過程中受益於 Divi 預設。 為使用這些填充值的部分創建一個新預設，並將其分配給您添加的每個新部分或使其成為默認部分預設。

您還可以使用您選擇的寬度和最大寬度設置行預設，並將其設為標準。 嘗試使用這些預設並了解它們如何不僅使您的設計過程更輕鬆，而且還幫助您提高頁面速度得分。

使用模塊預設

當然，您還需要為模塊使用智能樣式。 在下面的示例中，您會注意到每個模塊的整體外觀和感覺是相似的。 為 Blurb 模塊創建預設將幫助您保持頁面的 CSS 文件較小。

是否覆蓋預設？

但是您不應該為每個小的更改都創建一個新的預設。 例如，在上面的示例中，您可以注意到最後兩個 Blurb 模塊具有不同的文本顏色。 您可以為此創建一個新預設，通過複製舊預設，或者您可以決定覆蓋預設。 在這種情況下，與創建新預設並添加多行 CSS 代碼相比，僅覆蓋文本顏色（這會導致多行 CSS 代碼）更有意義。

3. 將設計選擇與速度相匹配

限制您要使用的模塊的選擇（動態模塊）

當您選擇要用於正在構建的頁面的模塊時，記住這些模塊將被動態加載是一件好事。 這意味著如果您不使用某個模塊，它不會對您的頁面速度產生任何影響。 您需要考慮添加的每個模塊，看看它是否“值得”。 但是，在理想情況下，您將確保 Divi 內容的其餘部分得到充分優化，因此您不必犧牲模塊。

找到您的設計的 LCP 並對其進行優化

可以幫助您提高頁面速度的另一件事是找到最大的內容繪製並對其進行優化。 簡而言之，您的 LCP 是您頁面上幫助確定頁面速度得分的最大元素。 您可以在此處閱讀更多相關信息。 通過確保您的設計的 LCP 得到優化，您可以大大降低頁面的加載時間。

選擇動畫風格（動態特徵）

就像我們有動態模塊一樣，我們也有動態特性。 這意味著，如果您根本不使用某個功能，則不會在您的頁面上加載該功能，從而提高頁面速度。 出於這個特殊原因，確保您選擇一種動畫風格並堅持下去很重要。 例如，您可以選擇使用運動效果並將所有動畫集中在頁面上圍繞該功能。 或者您可以進行常規動畫設置並遵循該路線。 這不僅允許您創建輕量級頁面，而且還增強了可預測性，這在用戶體驗方面通常是一件好事。

字體配對：堅持使用 1 或 2 個字體系列

我們還建議您為您設計的頁面堅持最多 2 種字體系列。 通過這樣做，您可以限制進入頁面之前需要加載的字體數量。

4.手動優化

響應式內容：在移動設備上縮小圖像尺寸

另一件可以幫助您提高移動頁面速度得分的事情是在 Divi 中使用響應式內容。 這可能是可以幫助您在較小的屏幕尺寸上最好地提高分數的功能之一。 雖然這需要付出更多的努力，但這絕對是值得的。 通過圖像編輯軟件縮小圖像的尺寸/大小，並在移動設備上使用這些較小的圖像，而不是您在桌面上顯示的圖像。 這將大大減少圖像文件的大小，並提高移動設備上的頁面速度。

文件類型和壓縮

確保您也盡可能多地使用 JPEG，因為它們的文件大小往往較小。 PNG 通常只有在您需要圖像透明度以提升設計時才有意義，但即便如此，您也可以嘗試尋找替代方法來使設計發揮作用。 避免使用更重的文件類型，例如 GIF。 至於視頻，這通常是行不通的，特別是如果您希望它在後台播放。 當然，即使在將文件上傳到 WordPress 媒體庫之前，也要確保壓縮您使用的文件。

幕後花絮

上面的所有提示都可以幫助您提高頁面速度，但是，重要的是要提到您必須注意 Divi 之外的網站優化最佳實踐。 您可以通過訪問此終極指南找到更多技術見解。

使用 Divi 構建快速頁面——比以往更容易

我們可以很容易地得出結論，Divi 的性能特徵與您處理構建網站的方式之間存在很大的重疊。 Divi 負責部分方面，因此您可以專注於將它們整合到一個漂亮而快速的網站所需的前端最佳實踐。 如果有任何對您有用的最佳實踐，請隨時在下面的評論部分分享它們，以保持對話的進行！