如何使用延遲加載來獲得完美的移動速度結果
已發表: 2022-12-03
您的站點是否通過了 Google 移動站點速度測試？ 不？ 您可能想查看延遲加載圖像。
網站性能至關重要。 如果您的博客或網站加載緩慢，用戶體驗就會很糟糕。
沒有人會等待五到十秒鐘來加載您的網站。 網速或下載速度需要快。 一個緩慢的網站會增加您的跳出率並降低您的轉化率。
當您為您的站點進行網站速度測試時，您的桌面速度通常還可以。 但是您的頁面如何執行移動速度測試？
為移動用戶做準備
大多數博客和網站程序都相當適合桌面查看。
他們使用響應式設計來提供移動版本。
雖然這是一個實用的解決方案，但它有一個明顯的缺點。
如果您的網站是響應式的，它將在移動設備上運行。
但是你的圖片文件大小是針對桌面的，所以你的移動網站速度要慢得多。
如果你做一個谷歌 Pagespeed Insights 測試，你的結果可能是合理的並且在桌面上是綠色的，但它看起來像你的移動版本。
當您考慮到一半甚至更多的網站訪問者使用移動設備時，您確實需要改善頁面加載時間和移動速度。
谷歌正在轉向使用其移動優先索引作為排名因素。
您可以使用許多免費的網站速度測試服務來監控性能。
但是，並非所有速度測試應用程序都會測量移動網站速度。 因此，不要因桌面站點頁面速度的良好結果而放心。
WebpageTest 允許您選擇不同的移動版本，因此它是 Google 的替代品。
始終確保您可以檢查您的移動版本，因為設備連接的互聯網連接速度要慢得多。
如果你的結果不令人滿意，你還有工作要做。
您如何提高移動性能？
許多因素都會導致桌面和移動設備的網站速度變慢。
Javascript 和 CSS 文件可能會過早加載並阻止渲染。 如果您使用的是 WordPress，則可以使用緩存插件輕鬆修復此問題。
您的網絡主機可能存在問題，導致您的 TTFB（首字節時間）略高於半秒。
但是，大多數主機最多只比這個時間高出 10% 到 20%，這不是什麼大問題。
最大的問題幾乎總是圖像和 iframe。 當您將圖像添加到帖子時，它不會針對移動設備進行壓縮、調整大小或格式化。
您可以使用插件來提供幫助。 Smush 是一個流行的插件，用於在上傳時壓縮圖像。 結果會稍微改善您的桌面版本，但不會改善您的移動版本。
要縮短移動設備上的頁面加載時間，您需要提供更小的圖片。 但這涉及很多工作。
直到最近，最好的解決方案還是擁有一個單獨的網站移動版本或使用 AMP 頁面。 無論哪種方式，現有站點上的所有圖像都必須替換為下一代圖像。
這兩種解決方案所涉及的工作都可能需要數週或數月的時間，具體取決於您網站的規模。
對於大多數站點所有者，如果您不了解 intersection observer API 或 img src、data src 屬性、惰性類、img 標籤或 img 類，那麼您將不會構建新的移動站點。
面對現實吧。 這太難了，太費時了。
更多閱讀：如何停止聯繫表格和評論垃圾郵件
應用延遲加載行為
幸運的是，有一種簡單的方法可以修復您的移動頁面加載時間。 答案是讓所有圖像延遲加載。
延遲加載延遲圖像的傳遞，直到讀者需要它們。 當讀者滾動網頁時，可查看內容下方的圖像會被阻止。
通過這樣做，頁面的初始加載時間與預先加載的時間相比大大減少了。 有許多插件和解決方案可用於向您的博客或網站添加延遲加載。
運行延遲加載測試
在過去的幾周里，我一直在對一種使移動網站充滿活力的新方法進行 Beta 測試。
您可能聽說過內容分發網絡、延遲加載和延遲離屏圖像。
如果沒有，它們是僅在加載頁面和用戶向下滾動頁面時提供圖像的元素。 您可能已經在 Medium 等網站上看到了這一點。
當你第一次訪問一個網站時，圖像會在一瞬間顯得模糊。 它們被稱為佔位符圖像。
然後圖像在瞬間清晰出現。
這是實際的延遲加載。 當用戶向下滾動頁面時，直到需要圖像時才會加載圖像。
它使頁面運行速度超快，尤其是在移動設備上。 延遲加載器可以應用於網頁上任意數量的圖像。
但是這個解決方案仍然缺少一個元素。 這些圖像不是下一代格式。
幸運的是，現在有一個解決方案，因此您不必替換所有圖像。 Optimole 是一個 WordPress 插件，可以完成很多繁重的工作。
它不僅會延遲加載圖像，還會用提供下一代圖像的新圖像 URL 替換您的圖像。
最重要的是，它可以動態調整圖像大小。
測試 Optimole
我做了很多測試，每次我檢查一個頁面時，它在谷歌移動速度測試中的得分都很高。
我的一項測試是使用包含十張未壓縮和未調整大小的大圖像的全寬網頁。
換句話說，我只是在一個頁面上拍了一堆大圖並發布了它。 （圖片由 Pixabay 提供，因此它們不需要知識共享署名。）
頁面太大，我無法給你看圖片。 因此，我將在視頻中向您展示。
當我在 Google 上測試該頁面時，結果是這樣的。
考慮到所有圖像的大小，這並不奇怪。
然後我激活了 Optimole。 您可以在下面看到我使用的設置。 這就是你所要做的。 
那麼結果如何呢？
對於桌面，滿分。
對於移動設備，得分近乎完美。
在GTmetrix上，分數再次接近完美。
請記住，這些是充滿高分辨率巨大圖像的頁面的真實結果。
安裝插件和獲取 API 密鑰只需要幾分鐘，然後只需幾秒鐘即可激活設置。
所以在不到五分鐘的時間裡，我就有了一個近乎完美的移動頁面和網站。
了解更多關於 Optimole 的信息
要在現實世界中查看插件的運行情況，請訪問 CodeinWP 網站。 它在 Optimole 上運行，因此您可以對其站點速度進行測試。
您可以訪問 Optimole 網站來檢查您的網站。
單擊“檢查我的網站”按鈕並輸入您網站的 URL。 您將看到所有圖像的列表以及可以在您的網站上節省的費用。
如果您的站點較小，則可以使用該插件的免費版本。 但是，如果您的站點很大，則可能需要考慮高級選項。
閱讀這篇文章所花費的時間比讓您的網站為移動訪問者超快運行所花費的時間還要長。 那你還在等什麼？
更多延遲加載替代方案
如果您不想設置 Nextgen 圖像的 CDN 交付，您可以使用許多免費選項。
WordPress 現在默認包含延遲加載。 但是，您幾乎無法控制它的工作方式。 通常最好使用插件，這樣您就可以微調性能。
Smush 是一個流行的免費 WordPress 插件，用於在將圖像加載到媒體庫時減少圖像。
但是它有一個選項可以激活延遲加載。 我已經在我的網站上嘗試過一些，而且效果很好。 只需激活該選項，即可完成。
A3 Lazy Load 是另一個免費插件。 我已經在我的許多網站上使用它很長時間了，包括這個。
我喜歡它的一點是我可以改進很多選項。 它可以選擇排除小部件，這解決了某些主題的一些跳躍問題。
BJ Lazy Load 已經存在很長時間了。 它擁有超過 90,000 名用戶。 但是，它已經有一段時間沒有更新了。
Lazy Load 是一款免費插件，安裝量達 60,000 次。 它是 WP Rocket 的免費組件，是用於站點速度優化的多合一解決方案。
最後一個插件是 Lazy Load for Videos。 如果您的網站上有很多 Youtube 視頻，這是一個很好的工具。
多麼好的選擇！ 現在您完全沒有理由擁有一個緩慢的移動網站。
注意：我與該產品沒有任何關係。 我的 Optimole 評論基於我作為用戶的經驗。
更多閱讀：免費網站檢查器和 SEO 工具