Web 性能和速度：最佳技術

已發表: 2021-08-30

在 SEO 和 webperf 社區以及更廣泛的電子營銷和電子商務中，加載速度和網絡性能是每個人的話題。

正如 Web 性能顧問和參考顧問 Andy Davies 提醒我們的那樣：
“環境影響體驗，
 經驗影響行為，
 行為會影響業務收入。”

因此，無論您是想增加收入、搜索引擎優化還是兩者兼而有之，您都必須知道快速頁面對您的用戶體驗質量至關重要。 速度還有助於向谷歌發送正確的信號，谷歌自頁面體驗更新以來一直在考慮速度。

您也知道，網站必須先滿足用戶的期望，然後才能滿足搜索引擎的期望。 因此，顯示速度和交互性是優質用戶體驗的先決條件的一部分，主要是為了促進參與和轉化！ 例如，請注意，根據 Google 的一項研究，77% 的互聯網用戶更傾向於在允許他們快速完成購買的網站或應用程序上訂購。

但是哪些技術對訪問者的影響最為明顯，以便為他們提供流暢的瀏覽體驗和真正的速度感？

這是一個由優化槓桿組織的清單，以提高顯示速度和交互性。

優化網站的顯示速度

頁面越輕，顯示所需的時間就越少。
除了資源優化之外，您還可以設置組成頁面的不同元素的顯示速率和尺寸，以增強速度和可用性的感覺。 以下是一些基本技術：

  • 將圖像壓縮為最有效的格式
    與 JPEG 相比，新一代 WebP（由 Google 推薦）和 AVIF（提供更好的結果）格式允許您將圖像的重量減少多達 50%，同時保持最佳的視覺質量。 知道圖像的重量約佔頁面重量的 50%，它是使您的頁面快速的重要槓桿。
  • 使媒體和圖像的顯示適應不同的屏幕
    根據用戶是從手機還是計算機訪問您的網站，調整和定義媒體和圖像的大小。
  • 減少頁面資源的權重
    優化您的代碼：HTML、JS 和 CSS 文件的縮小（刪除不必要的字符），以及資源壓縮（Gzip 和 Brotli 格式），在某些情況下，串聯，這些都是減少頁面重量的好做法，因此可以加快速度瀏覽器中的顯示。
  • 延遲加載
    該技術包括僅加載屏幕上可見的內容，而不是加載整個頁面。 換句話說，瀏覽器僅提供與訪問者需要在其屏幕上看到的內容相關的嚴格必要的工作。
  • 優化字體
    您可以優化字體的格式（例如 WOFF2，它可以節省 30% 到 50% 的文件大小），並且即使瀏覽器尚未加載字體，也可以選擇顯示文本，以加快渲染速度。
  • 消除阻塞資源並異步加載它們
    避免阻塞頁面的渲染：更喜歡異步加載資源，尤其是 CSS（關鍵 CSS）、JS（異步和延遲）和字體（display:swap）。
    當然，如果你因為在頁面加載開始時某些資源是必不可少的而別無選擇，那麼這些資源必須盡可能輕。
  • 採用正確的緩存策略
    為了讓用戶盡可能快地顯示頁面，緩存靜態元素。
    為此，您需要事先識別動態內容和靜態內容，並定義緩存靜態內容的規則：多長時間，以及在哪個緩存上（瀏覽器、源或 CDN）。

[案例研究] 管理 Google 的機器人抓取

1001Pneus 擁有超過 26,000 個產品參考，需要一個可靠的工具來監控他們的 SEO 性能，並確保 Google 將其抓取預算用於正確的類別和頁面。 了解如何使用 OnCrawl 成功管理電子商務網站的抓取預算。
閱讀案例研究

提高交互性：即時響應頁面

除了元素在瀏覽器中顯示的速度之外，交互能力對於讓用戶完全滿意是必不可少的。

否則，您會讓他們感到沮喪，這會轉化為諸如憤怒點擊、鼠標在頁面上瘋狂移動或隨機滾動以檢查頁面是否正常運行等行為。
在最壞的情況下，您的訪問者會返回上一頁，或者永遠離開您的網站，在 Google 上進行新的搜索，或者轉到您的競爭對手。
請記住，如果出現負面體驗，43% 的互聯網用戶會去競爭對手的網站進行下一次購買。 因此，您必須為自己提供吸引和留住訪客的方法。

大多數情況下，第三方腳本和 Javascript 可能會導致交互性不佳。 事實上，只要瀏覽器忙於檢索、解析和執行 JavaScript，它就無法響應用戶的交互。

同樣，這裡有一些技術可以優化您的代碼和第三方，並讓您的訪問者享受最佳體驗：

  • 通過延遲加載來減少第三方的影響
    您可以在頁面上顯示優先內容元素後開始加載和執行腳本。 但請注意：請記住，延遲加載 JavaScript 並不能使其在性能方面免費！
    這可能是在顯示主要元素後推遲加載某些功能（聊天、小部件、跟踪……）以使用戶放心的問題，但這並不會取消瀏覽器處理代碼所需的時間，它只會及時轉移它。
  • 減少 JavaScript 執行時間
    劃分佔用瀏覽器時間的任務（長任務），並確保支持短處理以響應用戶交互（例如，避免主動監聽某些事件，如滾動；並利用瀏覽器有時間空閒時間運行某些 JavaScript 處理）。
  • 減少主線程的工作
    通過減少請求的數量和交換的大小，瀏覽器將能夠更快地響應交互。

也節省時間：自動化您網站的優化技術

我們剛剛介紹了用戶體驗的兩個非常重要的方面：顯示速度和交互性。 好消息是，我們剛剛在此清單中提到的所有優化都可以自動化！

此外，您可能已經鏈接到 Google 的兩個核心 Web VItals，它們允許您分別評估這些方面：最大內容繪製和首次輸入延遲。
當然，您還應該考慮通過處理累積佈局偏移分數來提高頁面的視覺穩定性以獲得最佳用戶體驗。

您應該知道，這 3 個指標（LCP、CLS 和總阻塞時間，或 TBT，相當於 FID）佔 PageSpeed Insights 評分的 70%。
因此，從邏輯上講，您為加快頁面速度和優化這些指標所做的任何事情都會對您的用戶以及您的性能得分產生積極影響。
簡而言之，您可以將與 SEO 相同的方法應用於您的 UX：優質內容和體驗保證用戶滿意度，並有助於更好地被 Go​​ogle 索引。

此外，與 SEO 一樣，webperf 優化必須隨著時間的推移而保持。
這需要時間和專業知識，因為技術和指標發展迅速。 此外，即使在大型團隊中，技術資源也不總是有時間或知識來有效地保持網站的速度； 為一場像蛋奶酥一樣的突擊行動部署資源和精力非常令人沮喪，甚至令人沮喪。

因此，與其浪費時間在維護上，擔心網站每次演變的副作用，並且冒著超載的風險增加插件，不如用一個工具自動化所有前端優化技術的應用！

您應該知道，在大多數情況下，對於高流量的電子商務網站，webperf 優化解決方案的 ROI 很容易衡量。
事實上，谷歌估計 -0.1 秒的加載時間可以帶來 +8% 的轉化率，而前端優化解決方案可以輕鬆實現這一目標。
在 Fasterize，我們發現，通常，即使轉化率提高不到 1 個百分點，也足以確保我們 SaaS 解決方案的投資回報率； 更不用說技術團隊節省的時間了。
生意是戰神，你自己算算，做起來很簡單！ 它使您能夠了解自動化性能優化的興趣，並說服您的內部團隊並讓其參與進來。

在各個方面節省時間！