延遲加載允許您的網(wǎng)站僅在用戶向下滾動(dòng)到特定圖像時(shí)加載圖像,這減少了網(wǎng)站加載時(shí)間并提高了網(wǎng)站性能。許多流行的圖像密集型網(wǎng)站使用延遲加載來提高網(wǎng)站速度和性能。
在本文中,我們將逐步向您展示如何在 WordPress 中輕松延遲加載圖像。
為什么在 WordPress 中延遲加載圖像?
延遲加載 WordPress 圖像可以加快您的網(wǎng)站速度并提供更好的用戶體驗(yàn)。
沒有人喜歡緩慢的網(wǎng)站。事實(shí)上,一項(xiàng)性能研究發(fā)現(xiàn),頁面加載時(shí)間延遲 1 秒會(huì)導(dǎo)致轉(zhuǎn)化次數(shù)減少 7%,綜合瀏覽量減少 11%,客戶滿意度下降 16%。
像谷歌這樣的搜索引擎也不喜歡加載緩慢的網(wǎng)站。這就是為什么速度較快的網(wǎng)站在搜索結(jié)果中排名較高的原因。
與其他網(wǎng)絡(luò)元素相比,圖像在網(wǎng)站上加載所需的時(shí)間最長。如果您在文章中添加大量圖像,那么每個(gè)圖像都會(huì)增加頁面加載時(shí)間。
處理這種情況的一種方法是使用CDN 服務(wù),例如BunnyCDN。CDN 將允許用戶從距離他們最近的網(wǎng)絡(luò)服務(wù)器下載圖像并降低網(wǎng)站加載速度。
但是,您的圖像仍將被加載并影響整個(gè)頁面加載時(shí)間。要解決此問題,您可以通過在網(wǎng)站上實(shí)現(xiàn)延遲加載來延遲圖像加載。
圖像延遲加載是如何工作的?
延遲加載不是一次加載所有圖像,而是僅下載用戶屏幕上可見的圖像。它將所有其他圖像替換為占位符圖像或空白區(qū)域。
當(dāng)用戶向下滾動(dòng)頁面時(shí),您的網(wǎng)站會(huì)加載在瀏覽器查看區(qū)域中可見的圖像。
延遲加載對您的WordPress 博客非常有益:
- 它減少了初始網(wǎng)頁加載時(shí)間,以便用戶更快地看到您的網(wǎng)站。
- 它通過僅傳送查看的圖像來節(jié)省帶寬,這可以節(jié)省您的WordPress 托管成本。
WordPress 5.5的發(fā)布添加了延遲加載作為默認(rèn)功能。
但是,如果您想自定義圖像延遲加載以及延遲加載背景圖像的方式,那么您將需要使用 WordPress 插件。
讓我們看一下如何使用兩個(gè)不同的插件在 WordPress 中延遲加載圖像。您可以使用下面的快速鏈接直接跳轉(zhuǎn)到您要使用的方法:
- 使用 WP Rocket 在 WordPress 中延遲加載圖像(推薦)
- 使用 Optimole 在 WordPress 中延遲加載圖像(免費(fèi))
- 優(yōu)化 WordPress 圖像的額外提示
方法 1:使用 WP Rocket 在 WordPress 中延遲加載圖像
我們建議使用WP Rocket插件在 WordPress 中延遲加載圖像。它是市場上最好的 WordPress 緩存插件,可讓您輕松打開圖像延遲加載。
除此之外,它是一個(gè)非常強(qiáng)大的插件,可以幫助您優(yōu)化網(wǎng)站速度,而無需了解復(fù)雜的技術(shù)術(shù)語或配置專家設(shè)置。
開箱即用,他們所有默認(rèn)推薦的緩存設(shè)置將大大加快您的WordPress 網(wǎng)站的速度。
您需要做的第一件事是安裝并激活WP Rocket插件。有關(guān)更多詳細(xì)信息,您可以參閱我們有關(guān)如何安裝 WordPress 插件的指南。
要啟用圖像延遲加載,您只需選中幾個(gè)復(fù)選框即可。您甚至可以啟用視頻延遲加載,這將進(jìn)一步提高您的網(wǎng)站速度。
您所需要做的就是轉(zhuǎn)到WordPress 儀表板中的設(shè)置 ? WP Rocket,然后單擊“媒體”選項(xiàng)卡。然后,您可以滾動(dòng)到“LazyLoad”部分并選中“啟用圖像”和“啟用 iframe 和視頻”旁邊的框。
有關(guān)更多詳細(xì)信息,請參閱有關(guān)如何在 WordPress 中正確安裝和設(shè)置 WP Rocket 的指南。
注意:如果您使用Siteground作為 WordPress 托管提供商,則可以使用具有類似延遲加載功能的免費(fèi)SiteGround Optimizer插件。
方法 2:使用 Optimole 在 WordPress 中延遲加載圖像
此方法使用免費(fèi)的Optimole插件。它是最好的 WordPress 圖像壓縮插件之一,可讓您輕松啟用圖像延遲加載。
如果您每月的訪問量超過 5,000 名,那么您將需要Optimole 的高級(jí)版本。
首先,您需要安裝并激活 Optimole 插件。有關(guān)更多詳細(xì)信息,請參閱我們有關(guān)如何安裝 WordPress 插件的分步指南。
激活后,您將看到一個(gè)屏幕,要求您注冊 API 密鑰。您還可以通過導(dǎo)航到管理菜單中的Optimole來找到此屏幕。
您需要確保列出的電子郵件地址正確,然后單擊“創(chuàng)建并連接您的帳戶”按鈕?;蛘?,如果您是現(xiàn)有用戶,則只需單擊“我已經(jīng)有 API 密鑰”按鈕。
當(dāng)插件連接到 Optimole 時(shí),您可能需要等待幾秒鐘。之后,該插件將自動(dòng)開始優(yōu)化您的圖像,以便您的訪問者現(xiàn)在可以看到適合其設(shè)備的最佳圖像。
發(fā)生這種情況時(shí),您可以單擊“設(shè)置”選項(xiàng)卡來配置延遲加載。
在這里,您需要確保啟用“縮放圖像和延遲加載”設(shè)置。這將根據(jù)訪問者的屏幕尺寸生成圖像并提高加載速度。
接下來,單擊“高級(jí)”菜單選項(xiàng)并選擇“延遲加載”。在此屏幕上,有一些不同的設(shè)置可讓您自定義圖像延遲加載的方式。
首先,您可以調(diào)整“從延遲加載中排除第一張圖像”設(shè)置。這將阻止帖子或頁面頂部的圖像延遲加載,因此折疊上方的圖像將始終出現(xiàn)。
如果您希望延遲加載每個(gè)圖像,可以將其設(shè)置為 0。
您可以檢查 Optimole 中的其他一些高級(jí)延遲加載設(shè)置。默認(rèn)情況下啟用這些設(shè)置。
第一個(gè)是“縮放圖像”設(shè)置。這會(huì)將圖像縮放到訪問者的屏幕尺寸,并使頁面加載速度更快。
之后,您將看到“啟用背景圖像延遲加載”設(shè)置。這將延遲加載您的背景圖像,這可能是您網(wǎng)站上最大的圖像。
另一個(gè)設(shè)置是延遲加載嵌入視頻和 iframe。如果您有大量嵌入的視頻內(nèi)容,那么您將需要保留此設(shè)置。它將加載占位符圖像來代替視頻。單擊占位符后,將加載完整視頻。
您可以繼續(xù)自定義這些設(shè)置,看看什么最適合您的網(wǎng)站和圖像。
在退出插件設(shè)置之前,請確保單擊頁面底部的“保存更改”按鈕。
優(yōu)化 WordPress 圖像的額外提示
雖然延遲加載有助于提高網(wǎng)站加載速度,但還有一些其他方法可以優(yōu)化 WordPress 圖像以獲得最佳性能。
例如,我們建議在將圖像上傳到您的網(wǎng)站之前使用TinyPNG或JPEGmini等工具對其進(jìn)行壓縮。或者,您可以使用自動(dòng)圖像壓縮插件,例如Optimole或EWWW Image Optimizer。
為您的圖像選擇正確的 WordPress 圖像大小和文件格式也很重要。JPEG 最適合具有多種顏色的照片或圖像,PNG 適合簡單或透明圖像,GIF 僅適用于動(dòng)畫圖像。
我們希望本文能幫助您了解如何在 WordPress 中延遲加載圖像。您可能還想查看我們的教程如何在不損失質(zhì)量的情況下輕松優(yōu)化網(wǎng)絡(luò)圖像,以及我們專家精選的最佳網(wǎng)頁設(shè)計(jì)軟件。