確保您的 WordPress 網站在 2022 年針對移動速度進行優化的 7 個技巧

已發表: 2021-08-16

WordPress 網站針對移動速度進行了優化

根據市場研究公司 Gartner 的數據，到 2022 年，大約一半的在線購買是在移動設備上進行的。

考慮到如果網站加載時間超過 3 秒，一半的移動訪問者會點擊後退按鈕，因此優先考慮速度對於跟上您的競爭對手至關重要。

以下是 Web 開發人員可以採取的一些步驟，以在 2022 年及以後為移動訪問者加速其 WordPress 網站。

為什麼每一毫秒都很重要

您的 WordPress 網站加載時間越長，您失去的潛在客戶就越多。由於谷歌現在將頁面速度考慮到移動搜索排名，因此讓您的網站更快也可以提高您接觸新朋友的機會。

事實上，谷歌正在逐步走向“移動優先”索引，這意味著其搜索算法將使用網站的移動版本來確定整體搜索排名。

Google 建議將移動網站的加載時間設定在 1 秒以內。雖然這對所有開發者來說可能不是一個現實的目標，但 2 秒以上的加載時間對於 2022 年的電子商務網站來說被認為是不可接受的。

在開始優化頁面之前，請進行一些速度測試並建立一些基準。 Google 的速度記分卡可以顯示您網站的移動速度與競爭對手相比如何。

如果您有一個零售網站，Google 的影響計算器可以幫助您估算通過將移動速度提高幾秒鐘來獲得多少收入。

每當您進行重大更改時，請運行更多測試以查看它是否產生了影響。如果您可以通過慢速 3G 連接在不到 5 秒的時間內加載您的網站，那麼您的大多數用戶都會很高興。

移動用戶的期望與桌面用戶不同。例如，在智能手機上購物的人可能不太關心圖像質量，而是關心他們完成交易的速度。

因此，向您的移動訪問者提供分辨率稍低的圖像實際上可能是有益的。高分辨率圖像對於在線商店來說尤其重要，但它們可以趕走那些為收到的每一字節數據付費的移動用戶。

因此，您必須實施響應式網頁設計，通過提供針對其設備的移動速度優化的資產站點來適應所有用戶。

某些 WordPress 主題和插件可以輕鬆為不同用戶確定內容可見性的優先級。只需轉到 WordPress 模板中的響應選項來自定義您的移動訪問者可以看到的內容。

您可以隱藏移動用戶不一定關心的較大圖像和其他內容。

否則，如果您的主題或插件沒有響應選項，您可以使用媒體查詢隱藏頁面的某些視覺元素。

您可以在 CSS 文件中定義這些，並根據視口的大小隱藏或顯示頁面的某些元素。例如，如果視口大小低於 480 像素，以下代碼片段將隱藏 CSS 類.big_image ：

 @media screen and (max-width: 480px) {
    .big_image {
        顯示：無；
    }
}

針對移動速度優化網站性能的所有方面的最簡單方法是投資 CDN 或內容交付網絡。 CDN 是戰略性地分佈在世界各地的服務器網絡。

這些服務器（稱為存在點）託管您網站的副本，以確保遠近的訪問者擁有一致的用戶體驗。

當來自其他國家/地區的用戶請求您的網站時，CDN 將通過地理位置最接近他們的入網點傳送您的內容。 CDN 還優化了緩存，以便用戶在回訪時更快地加載頁面。

除了減少第一個字節的時間之外，CDN 還可以在繁忙時間從您的主機服務器上卸載資源，這樣用戶就不會因為流量高峰而遇到中斷。

由於您網站的副本存儲在世界各地的服務器上，因此使用 CDN 可以確保您的網站永遠不會崩潰。如果一台服務器出現故障，CDN 會將訪問者重新路由到下一個最近的存在點。

使用 CDN 服務的其他好處包括防止 DDoS 攻擊、改進 SEO 等等。投資 CDN 還可以簡化擴展，因為您的網站已經在全球範圍內分佈。

說到這一點，現在可能是從使用 JPEG 和 GIF 等傳統圖像格式過渡到 WebP 等更高效替代方案的最佳時機。

這種較新的格式使用比其前身更好的壓縮算法，因此更高質量的圖像可以放入更小的文件中。

因此，轉換您的圖像可以為大多數訪問者帶來更快的加載時間。並非所有瀏覽器都支持新穎的圖像格式，但您仍應提供該選項。

圖片通常佔網站權重的大部分，因此您可以採取任何措施來優化它們將對頁面速度產生積極影響。

利用 HTTP 緩存指令使網站上不變的元素更快地為返回用戶加載。

Google AMP 是一種開源框架，可針對移動設備優化網站。 AMP WordPress 插件允許您向移動訪問者提供網站的“精簡”版本，從而促進響應式網頁設計。

Forrester 進行的研究發現，AMP 將電子商務網站的移動轉化率提高了 20% 。

在 HTML 標記中內聯少量 JavaScript 和 CSS 有助於防止延遲和阻塞。 Google PageSpeed Insights 可以幫助您識別阻止渲染的代碼，並且有許多插件可以提供 JavaScript 和 CSS 優化，例如 Autoptimize。

相關文章：提高移動轉化率的 8 種有效方法

有時主題和插件可能是性能瓶頸背後的罪魁禍首。通過定期檢查新更新，確保您使用的所有內容都是最新的。

如果您懷疑您的某個插件引起了問題，請嘗試在暫存站點上逐一停用它們，直到查明問題為止。如果您使用的是自定義主題，請嘗試切換到默認的 WordPress 主題之一，看看它是否有所作為。

安裝緩存插件可以讓您的 WordPress 網站被進一步緩存，從而比您單獨使用 CDN 獲得更好的加載時間。

像 Cache Enabler 這樣的插件會自動創建頁面的靜態 HTML 版本，因此在頁面加載時不需要執行 PHP 進程。這意味著延遲的減少和更快樂的移動訪問者。

概括
針對移動速度進行優化的網站並非一勞永逸。這是一場永無止境的比賽，朝著不斷移動的球門柱前進。

隨著您的網站發展並吸引更多訪問者，使用分析來衡量這些變化如何影響性能。及時了解新的 WordPress 插件和更新，以便您能夠跟上用戶不斷變化的期望。