Elementor 如何優先考慮和提高網站性能

我們來談談 Elementor 的 2021 年產品路線圖，特別是性能優化。 在我們繼續規劃和開發社區要求的很酷的新功能的同時，今年我們將提高用戶網站的性能作為我們的使命。 在這篇文章中，我想與您分享我們為實現這一目標已經採取的一些行動，並談談即將到來的一年會發生什麼。

自互聯網誕生以來，網站性能一直是網絡創建者的一個問題。 作為一名網絡創建者，我總是會問這樣的問題：

• “我的網站太慢了嗎？ 是導致用戶離開還是損害了我的 Google 排名？”
• “我應該放棄某些功能以提高網站速度嗎？”
• 當然：“到底是什麼導致了我的性能問題？ 我以為我覆蓋了這裡的所有基地！”

所以是的，無論我們使用什麼平台或工具，從網站獲得出色的性能一直是網絡創建者的挑戰。 由於影響性能的相關因素如此之多，要隔離真正的問題並不總是那麼容易，更不用說找到解決方案了。 這正是我們創建這個由五部分組成的性能視頻課程的原因。 在本系列中，我們深入研究了可能影響您網站性能的每個重要因素，無論是否與 Elementor 相關，並指導您如何對其進行優化。

為了讓事情變得真正有趣，谷歌最近宣佈網站性能現在將正式在其排名算法中發揮作用。 這將性能問題置於聚光燈下，引發了全球網站所有者的擔憂。 這就是為什麼在過去的六個月中，我們的研發和 SEO 團隊一直在不知疲倦地工作，以確保 Elementor 網站通過此更新並以優異的成績通過。

當談到 Google 的神秘算法時，我們知道要讓您感到安全，需要付出的遠不止我們說的話。 因此，作為對我們的用戶和網絡創建者社區的一項服務，我們將與領先的 SEO 專家一起舉辦免費的網絡性能網絡研討會，討論即將發生的變化。 這不僅會涵蓋更新本身，還會詳細說明此更改可能會如何影響您的網站以及您可以做哪些準備工作。 網絡研討會將於 4 月 28 日舉行，因此請確保您預留座位。

但是，撇開所有課程和網絡研討會不談，我們的主要目標是確保我們的產品不會對您網站的性能產生負面影響。 這一直是並將繼續是我們的首要任務。 因此，事不宜遲，讓我們深入了解 Elementor 的性能優化工作，如我們的 2021 產品路線圖中所述。

除了優化我們的產品開發週期之外，我們提高 Elementor 性能的願景還包括五個方面的方法。 我們已經在其中一些領域進行了一些重大改進，而其他方面將在 Elementor 即將推出的版本中得到解決。

我們還可以自豪地說，性能已經成為我們開發和發布渠道不可或缺的一部分。 現在，每個版本的 Elementor 都根據各種性能指標進行驗證，以確保沒有新功能、調整或修復對使用 Elementor 構建的現有網站產生​​任何負面影響。

現在讓我們一一回顧我們的曲目：

我們正在改進 Elementor 加載資產的方式，以確保它只加載每個頁面上需要的內容。 在 Elementor 和 Elementor Pro 的最新版本中，我們引入了優化的資產加載實驗，以提高網站的前端性能，僅通過加載所需的功能來加速每個頁面。 您可以在此處了解更多信息。

我們還為某些小部件添加了延遲加載選項，並將在未來繼續這樣做。 例如，視頻小部件包括一個延遲加載選項，使您能夠用靜態圖像縮略圖替換嵌入的完整視頻播放器。 一旦訪問者與之交互，圖像就會切換回完整的視頻。

通過利用這些延遲加載技術，您可以在初始頁面加載期間大大減少頁面大小和 HTTP 請求數量，這將為訪問者帶來更快的體驗。

自從我們在大約五年前推出 Elementor 以來，Web 瀏覽器已經發展了很多。 現在，五年前需要外部庫的一些功能可以使用本機瀏覽器支持來實現。 這使得實現效率更高，並且在某些情況下可以大大減少 JavaScript 執行時間。

一個例子是 Waypoints 庫，在某些情況下，它被替換為原生的 Intersection Observer API。

我們的目標是減少使用這些類型的 CSS 和 JavaScript 庫，並儘可能用原生瀏覽器支持替換它們。

我們計劃繼續改進和優化 Elementor 現有的內部 JavaScript 和 CSS。

這方面的示例包括配置 Google Fonts 加載方法的能力以及添加到 Font Awesome 庫的 font-display 屬性。 這些改進應該會減少這些文件的渲染阻塞過程，並提供對現有 CSS 和 JS 文件的額外優化。

在 Elementor 3.0 中，我們改進了動態 CSS 加載和渲染機制。 Elementor 用於在每個頁面加載時掃描頁面以查找具有動態值的元素。 從 Elementor 3.0 開始，當第一次創建和訪問頁面時，Elementor 會創建一個包含所有具有動態值的元素的緩存。 然後，不是每次訪問頁面時掃描頁面的動態元素，而是從緩存中獲取列表並立即呈現。 這顯著縮短了服務器端渲染時間，並帶來了顯著的改進。 我們計劃在未來對 Elementor 實施額外的解析改進。 您可以在這篇博文中了解更多相關信息。

最後，我們計劃繼續改進和精簡 Elementor 生成的代碼輸出，以減小 DOM 的大小。

我們已經開始在 Elementor 3.0 中進行這些改進，我們刪除了三個包裝元素以創建更小的 DOM 並簡化代碼輸出。

在 Elementor 3.2 中，我們刪除了另外兩個元素，以進一步縮小 DOM 的大小。 計劃在不久的將來進行更多的削減。

如您所見，預計 2021 年及以後會有新功能、改進和大修。 這一切都是為了幫助您繼續構建具有更好性能的出色網站。 如果您還沒有升級到最新版本，請確保您喜歡這些和其他改進。

您可能知道，有許多與 Elementor 無關的因素會影響 WordPress 網站的性能。 其中包括圖像優化、網絡託管、服務器提供商、CDN 等。 由於我們的目標是讓我們的用戶能夠實施完整的 WordPress 優化，因此我們創建了大量免費教程、網絡研討會和文章的資源庫，以幫助您了解有關性能的更多信息。

• 我們創建了一個關於性能的視頻課程- 在這個由五部分組成的系列中，我們討論了可能影響您的性能的每個重要因素，以及如何優化它。

• 4 月 28 日，我們將與領先的 SEO 專家一起舉辦關於 Core Web Vitals 的網絡研討會，討論即將到來的 Google 算法更改及其對您網站的影響。 在這裡保留您的座位。

• 我們還發布了一篇關於如何加快 WordPress 網站速度的詳細博客文章，以及其他關注性能的文章，主題包括選擇網絡託管、緩存插件、運行速度測試、使用 WP Rocket 等。

我們將繼續創建免費的網絡研討會、博客文章和視頻，以解決 WordPress 性能的其他方面問題，以繼續支持網絡創建者社區。