Elementor是一個免費的WordPress頁面構建器外掛，擁有超過500萬個活動安裝。此外，該外掛還具有高階版本和數百個附加元件，可在您的網站中新增精美的元素。
與任何其他頁面構建器外掛一樣，Elementor新增了自定義樣式和指令碼，為頁面的前端外觀新增了令人驚歎的因素。但是，它會在前端和後端影響您網站的頁面載入速度的高成本。如果由於Elementor頁面構建器而導致網站速度緩慢，您可以嘗試以下一些選項來解決速度問題。
修復緩慢的Elementor外掛
頁面速度和使用者體驗是谷歌搜尋演算法中的排名因素。因此，與使用拖拽頁面速度的Elementor新增美化元素相比，您必須重視加快網站速度。幸運的是，Elementor在外掛設定中提供了一些優化功能。此外，您可以優化可能影響Elementor頁面載入速度的外部因素。
使用Elementor設定優化頁面速度
讓我們首先探索這些設定，如果這些設定不能解決您的問題，那麼您應該檢查其他解決方案。
1. 僅對頁面啟用Elementor
預設的WordPress設定允許您建立兩種文章型別——文章和頁面。此外，像WooCommerce這樣的外掛將建立產品，您還可以根據需要建立自定義文章型別。我們強烈建議只為頁面啟用Elementor，而不是為文章和其他自定義文章型別啟用。這有助於在前端和後端禁用除頁面之外的Elementor資源的載入。當您啟用Elementor外掛時，它將預設為文章和頁面啟用。您可以轉到“Elementor > Settings”選單並在“General”選項卡下禁用文章外掛。
為文章禁用Elementor
2. 使用Elementor Experiments
該外掛在“Experiments”選項卡下提供了許多實驗性功能。在這裡，您可以看到正在進行的實驗以及已完成並被接受為穩定功能的實驗。為了提高載入速度，您可以在穩定和持續部分下啟用所有與速度相關的專案。
啟用以下正在進行的實驗：
- Improved Asset Loading – 此選項將減少載入的預設程式碼並僅在需要時動態載入剩餘程式碼。
- Improved CSS Loading – 這與上面的功能相同，僅在需要時載入CSS。
- Inline Font Icons – 禁用Font Awesome和eicon的載入並載入內聯SVG圖示。
Elementor正在進行的實驗
啟用以下Stable實驗：
- Optimized DOM Output——這將減少HTML wrappers的數量以提高速度。
Elementor Stable功能
確保在啟用正在進行的實驗後徹底測試您的網站，因為它們可能會破壞您網站的佈局。例如，動態載入資源會影響使用WP Rocket和其他外掛刪除未使用的CSS等功能。
3.優化字型使用
使用Google字型和其他自定義字型會在Google PageSpeed Insights中產生很多問題。例如，當您使用帶有Elementor外掛的Google Fonts時，您會看到在載入Web字型和預載入字型時使文字可見的警告。幸運的是，Elementor具有內建的字型優化選項，您可以使用它們來提高頁面載入速度。
- 如上所述，使用“Inline Font Icons”來使用“Ongoing Experiments”部分下的SVG圖示。
- 轉到“Elementor > Settings > General”部分並啟用“Disable Default Fonts”選項。這將有助於禁用Elementor載入的字型，並且該外掛將繼承您主題的所有元素的字型。
- 如果您不想禁用Elementor字型，請轉到“Advanced”選項卡併為“Google Fonts Load”選擇“Swap”選項。這將有助於為每個Google字型檔案請求新增“swap”引數，並修復PageSpeed Insights中的文字可見性警告。
使用外部CSS檔案並交換Google字型
4.使用外部CSS檔案
正如您在上面的螢幕截圖中看到的那樣，Elementor允許兩個“CSS Print Method”選項。一種是使用“External File”，另一種是使用“Internal Embedding”。選擇“External File”選項，以便將所有CSS樣式作為外部檔案載入。之後轉到“Elementor > Tools > General”部分，然後單擊“Regenerate Files & Data”。這將重新生成資料並作為外部CSS檔案載入。它將有助於正確快取頁面並提高速度，而不是動態注入無法快取的CSS。
Elementor中的安全模式和檔案重新生成
5.嘗試安全模式
如果您在建立或編輯頁面時遇到載入緩慢的Elementor編輯器，則可以使用“Elements > Tools > General”部分下的安全模式。安全模式會在載入緩慢時在編輯器中顯示建議。
Elementor Editor以安全模式開啟
同樣，您可以啟用“Debug Bar”選項來查詢頁面上載入的模板。當您嘗試解決問題時，此資訊可用於故障排除。
6.回滾外掛
最後，如果您在升級Elementor後遇到任何問題，可以選擇恢復到以前的版本。與任何回滾一樣，請確保備份資料庫以備不時之需。轉到“Elementor > Tools > Version Control”部分。您可以重新安裝當前版本，也可以選擇要回滾的任何先前版本。
回滾Elementor外掛
提高Elementor速度的其他因素
以上所有因素都在Elementor設定範圍內，以下是可能影響您網站速度的外部因素。
7.使用輕量級主題
儘管Elementor是一個獨立的外掛，但許多商業主題都將Elementor與其他功能捆綁在一起。由於這些主題是自定義編碼來建立頁面佈局的，因此很容易產生衝突並影響載入速度。我們建議使用帶有免費Elementor入門模板的輕量級主題，例如Astra或GeneratePress。
另一種選擇是使用來自同一外掛開發人員的Hello Elementor主題。這個主題有超過100萬個活動安裝，並且在不知不覺中可以與Elementor順利配合。它具有最小的設計，主要與Elementor模板一起使用。因此，如果您真的喜歡Elementor外掛，那麼Hello Elementor是您擁有優化網站的最佳主題。
免費Hello Elementor主題
8. 減少附加元件的數量
有數百個第三方外掛可用作Elementor頁面構建器外掛的附加元件。這些外掛將為基礎外掛新增額外的元素以建立漂亮的佈局。但是，這些外掛可能無法很好地與父Elementor外掛一起使用，尤其是當父外掛更新到較新版本時。此外，附加元件將新增額外的CSS/JS並增加HTTP請求。如果您喜歡 Elementor，請轉到提供足夠元素和模板庫的 Pro 版本。避免使用第三方外掛來新增一些可能會降低您網站速度的元素。
如果您想使用附加元件，請使用諸如Ultimate Add-ons for Elementor之類的外掛。您可以僅啟用所需的小工具並禁用其他小工具以減小檔案大小。
9.檢查快取設定
首先是確保在使用Elementor時有適當的快取或優化外掛。這將有助於將所有頁面作為靜態頁面提供並提高載入速度。WP Rocket和Perfmatters是可用於優化Elementor網站的兩個最佳外掛。但是，在使用WP Rocket或任何其他快取外掛優化CSS交付功能時需要小心。當您在Elementor中新增了動態CSS時，刪除未使用的CSS或生成關鍵路徑CSS將無法正常工作。
- 如果您優化網站上的CSS交付，請禁用“Improve CSS Loading”實驗並使用外部檔案選項。
- 或者，您可以從CSS優化中排除動態檔案。由於動態資源會在每個頁面上發生變化，因此您需要使用快取/優化外掛允許的萬用字元格式排除它們。
如果您將Elementor用於文章或任何其他自定義文章型別，那麼我們強烈建議您使用Perfmatters或Asset Cleanup外掛。使用這些外掛，您可以在特定文章和站點級別禁用未使用的CSS和JS檔案。
9. Cloudflare Rocket Loader
當使用者從全球訪問您的頁面時，CDN有助於將您的內容從最近的伺服器傳送到使用者的位置。這適用於Elementor頁面和您的整個網站。許多使用者使用託管公司提供的免費Cloudflare CDN以及Elementor設定。Cloudflare提供了一項名為Rocket Loader的功能，可幫助改進基於JavaScript的頁面的載入。但是，它可能會在Elementor編輯器中以及在已釋出的頁面上產生問題。如果您發現編輯器在滾動或釋出頁面損壞時執行緩慢和跳躍，請禁用Rocket Loader功能並檢查它是否有效。
如果Rocket Loader是問題所在，那麼您可以使用Cloudflare中的頁面規則忽略Elementor頁面和模板來解決問題。
10.優化託管設定
Elementor和WooCommerce等其他重型外掛需要優化的託管來更快地載入您的頁面。之前，您需要尋找SiteGround Cloud、 Cloudways或任何其他VPS託管平臺來使用Elementor頁面構建器。現在Elementor人自己提供了一個優化的託管與谷歌雲平臺和Cloudflare CDN。儘管這有10萬次訪問、100GB頻寬和20GB空間的限制，但您可以輕鬆啟動網站並以每年99美元的價格購買Elementor Pro。您可以獲得針對Elementor的完全優化設定，並且您的網站將使用Hello Elementor等主題快速載入。
11. 影象優化
最後，在摺疊區域上方使用的大尺寸影象將產生載入最大內容繪畫的問題。此外，其他影象如果未正確優化也會產生問題。
- 減小影象的大小和尺寸，尤其是用於摺疊區域上方的影象。
- 延遲載入影象以僅在使用者滾動到該位置時載入它們。
- 使用WebP格式來減小大小並更快地載入它們。
小結
像Elementor這樣的外掛因拖放元素和有吸引力的可重用模板而變得流行。然而，現在情況完全改變了，與漂亮的頁面佈局相比，速度是最重要的因素。您可以利用預設的Elementor實驗和其他設定來修復緩慢的站點並提高頁面載入速度。此外，您還可以嘗試他們優化的Hello Elementor主題和高階雲託管，讓您的網站更上一層樓。
評論留言