我們 WP Engine 的朋友最近推出了一個用 Beaver Builder 建造的漂亮的新主頁。我們在 Beaver Builders Facebook 群組中分享了該頁面的鏈接，有些人指出該頁面的整體加載時間相當長。我們的好朋友、傑出的 WordPress 開發人員 Jon Brown 給出了一個很好的解釋。

臉書對話

讓我快速地解釋一下這裡的對話：

關心的 Beaver Builder：我用 XYZ 測試工具做了一個頁面加載測試，加載花了將近 10 秒！

喬恩：速度和效能是一種設計選擇，對於銷售轉換至關重要，但這並不意味著它不需要與其他更有價值的工具進行權衡。

我看到人們經常查看字母等級和總加載時間而不了解瀑布。除非您正在查看非常簡單的網站，否則這會讓您誤入歧途…

這些測試工具的等級確實很粗糙，忽略了許多實際情況。他們會說，當重定向用於廣告、追蹤腳本和其他必須以這種方式工作的東西時，請避免重定向。他們經常忽略 HTTP/2，並建議減少請求並連接無關緊要甚至可能造成傷害的資源……他們不關注速度指數和首屏渲染…

真實頁面載入<1.5s

讓我們更深入地挖掘

我問喬恩是否願意再問一些有關表演的問題，他非常慷慨地同意了。這些是我（羅比）的問題和喬恩的答案。

哦，我有沒有提到 Jon 經營著一家名為 9seeds 的客製化開發商店，因此可以僱用他來幫助您微調 WordPress 網站的效能！

1.你提到了「瀑布」。能多解釋一下瀑布是什麼嗎？

有很多工具可以評估網站效能。其中許多都會提供包含易於理解的字母等級的報告。不過，這些字母等級是相當生硬的工具，雖然當你得到全部時很好，因為它不是特別有洞察力，更不用說有幫助了，當你沒有看到直截了當的時候。我發現唯一有用的字母等級是圖像壓縮，這是一個簡單的修復，透過優化器運行你的圖像。

我經常看到外行人和新手開發人員被這些字母蒙蔽了雙眼。影響前端 Web 效能的因素有很多，人們確實需要查看“瀑布”，它只是一張顯示所有 HTTP 請求的圖表，包括它們何時開始、何時完成。我使用 WebPageTest.org 來產生這些。

「瀑布」是您「看到」載入時間過長和/或阻止其他內容載入的特定資產的地方。

最後，認識到直接獲得A 可能需要設計選擇（例如刪除滑桿）並消除第三方資產（例如Google Analytics、HotJar 等），這對網站所有者來說比獲得A 更有價值。可以達到無需做出痛苦的犧牲就可以直接獲得成功。

2. 您推薦WebPageTest 作為您選擇的測試工具。為什麼您喜歡它？

就我個人而言，我從未發現過比 WebPageTest.org 更好、更靈活的方法。不過，我過去也使用過 GTMetrix、Pingdom、Google Page Speed 等，它們都很好。像 Lighthouse 這樣的一些新應用程式對於漸進式 Web 應用程式（不是 99% 的 WordPress 網站）來說確實很酷。我當然不是告訴人們更換工具，而是使用你知道和理解的工具。如果您不知道任何工具，WPT 是一個很好的免費學習工具。只要超越字母等級並開始了解造成這些字母等級的原因即可。

3. 關於“減少請求、串聯資產”，這是否不再是最佳實踐？為什麼？

當大多數網站都是 HTTP（而不是 HTTPS）時，Web 伺服器都使用 HTTP/1.1 協議，Web 伺服器只能並行發送這麼多資產。每個資源（圖像、腳本、樣式表）都是單獨發送的，每個資源都有自己的開銷，這會減慢速度。將所有可能的內容連接在一起減少了 HTTP 請求的數量，並帶來了巨大的效能優勢。

在過去幾年中，各地都大力推動 HTTPS，Web 伺服器也開始支援新的 HTTP/2 協定。 HTTP/2 具有預取和預先載入等巨大優勢，而且還可以並行傳送所有這些微小資源，因此無需將它們連接起來。事實上，最好不要這樣做，這樣每個微小的資源都可以獨立快取。

重要的是要記住，只有當您的 Web 伺服器支援 HTTP/2 時，這才會發揮作用，並且只有當您的網站是 HTTPS 時才可能。

也就是說，我們現在工作的所有網站都是 HTTPS 並在支援 HTTP/2 的伺服器上運行，所以我什至不再考慮連接資產，而且我當然不會錯過它！

4. 您是否還有其他反對的「神話」或過時的性能建議？

最重要的是，每個網站都可以直接獲得A，而無需做出痛苦的讓步，例如設計變更或消除您無法控制的第三方資產。不過，這真的沒關係，因為您應該開始查看稱為“速度指數”的東西！ WPT對此有很好的描述，但基本上它考慮的是用戶何時認為「首屏」已滿。這是關於速度的使用者體驗，而不是頁面是否真正完整。這是 WP Engine 的新首頁設計的一個特點，速度指數非常棒。延遲的腳本需要很長時間才能載入和完成。

5. 您還有其他可以推薦給其他人的性能工具、提示或技巧嗎？

多年來我一直依賴的工具：

• WebPageTest.org – 我的最愛！
• ImageOptim – 用於壓縮 JPG/PNG 的桌面應用程式
• ImageAlpha – 用於壓縮 PNG 的桌面應用程式（主要是透過減少顏色數量）
• CloudFlare – 免費的大型全球 CDN 和基本 WAF。加上令人印象深刻的付費專業功能，如動態影像優化、路線優化等。

插件：

• WP Rocket – 即使在 WP Engine 上，我們也使用 WP Rocket，它也能正常運作。
• Imagify.io – 基於 WordPress/雲端的圖片優化。
• BeaverBuilder – 我沒有得到報酬才這麼說！我們被要求在許多網站上進行效能審核，並且經常看到其他流行頁面建立器的主要前端和後端問題（我不會指名道姓），但Beaver Builder 卻沒有，這就是為什麼我們在自己的網站上使用它出色地！

再次感謝喬恩花時間引導我們了解更現代的性能方法。我想給 Jon 的經紀公司 9seeds 最後一個機會。如果您正在尋求任何類型的自訂 WordPress 開發協助，請向他們喊話！

關於喬恩布朗

流浪者。 WordPress 開發人員。攝影師。生命之肝。