延遲加載允許您的網(wǎng)站僅在用戶向下滾動(dòng)到特定圖像時(shí)加載圖像,從而減少網(wǎng)站加載時(shí)間并提高網(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%,網(wǎng)頁瀏覽量減少 11%,客戶滿意度降低 16%。

像谷歌這樣的搜索引擎也不喜歡加載緩慢的網(wǎng)站。這就是為什么更快的網(wǎng)站在搜索結(jié)果中排名更高的原因。
與其他網(wǎng)絡(luò)元素相比,圖像在您的網(wǎng)站上加載所需的時(shí)間最多。如果您在文章中添加大量圖像,則每張圖像都會(huì)增加頁面加載時(shí)間。
處理這種情況的一種方法是使用 等 。CDN 將允許用戶從離他們最近的 Web 服務(wù)器下載圖像并降低網(wǎng)站加載速度。
但是,您的圖像仍將被加載并影響整個(gè)頁面加載時(shí)間。要解決此問題,您可以通過在網(wǎng)站上實(shí)施延遲加載來延遲圖像加載。
圖像的延遲加載如何工作?
延遲加載不是一次加載所有圖像,而是僅下載用戶屏幕上可見的圖像。它將所有其他圖像替換為占位符圖像或空白區(qū)域。
當(dāng)用戶向下滾動(dòng)頁面時(shí),您的網(wǎng)站會(huì)加載在瀏覽器查看區(qū)域中可見的圖像。
延遲加載對(duì)您的 非常有益:
-
它減少了初始網(wǎng)頁加載時(shí)間,以便用戶更快地看到您的網(wǎng)站。
-
它通過僅提供查看的圖像來節(jié)省帶寬,這可以為您節(jié)省 成本。
的發(fā)布添加了延遲加載作為默認(rèn)功能。
但是,如果您想自定義圖像延遲加載和延遲加載背景圖像的方式,則需要使用 WordPress 插件。
讓我們來看看如何使用兩個(gè)不同的插件在 WordPress 中延遲加載圖像。您可以使用下面的快速鏈接直接跳轉(zhuǎn)到要使用的方法:
方法1:使用WP Rocket在WordPress中延遲加載圖像
我們建議使用 插件在 WordPress 中延遲加載圖像。這是市場(chǎng)上,可讓您輕松打開圖像延遲加載。
除此之外,它還是一個(gè)非常強(qiáng)大的插件,可幫助您優(yōu)化網(wǎng)站速度,而無需了解復(fù)雜的技術(shù)術(shù)語或配置專家設(shè)置。
開箱即用,他們所有默認(rèn)推薦的緩存設(shè)置將大大加快您的 速度。
您需要做的第一件事是安裝并激活 插件。
要啟用圖像延遲加載,您所要做的就是選中幾個(gè)框。您甚至可以為視頻啟用延遲加載,這將進(jìn)一步提高您的網(wǎng)站速度。
您需要做的就是轉(zhuǎn)到 WordPress 儀表板中的設(shè)置 ? WP Rocket,然后單擊“媒體”選項(xiàng)卡。然后,您可以滾動(dòng)到“LazyLoad”部分,然后選中“為圖片啟用”和“為 iframe 和視頻啟用”旁邊的框。

注意:如果您使用 作為您的 WordPress 托管服務(wù)提供商,那么您可以使用免費(fèi)的 插件,該插件具有類似的延遲加載功能。
方法2:使用Optimole在WordPress中延遲加載圖像
此方法使用免費(fèi)的 插件。它是之一,可讓您輕松啟用圖像延遲加載。
如果您每月有超過 5,000 名訪問者,那么您將需要 。
首先,您需要安裝并激活 Optimole 插件。
激活后,您將看到一個(gè)屏幕,要求您注冊(cè) API 密鑰。您也可以通過導(dǎo)航到管理菜單中的 Optimole 來找到此屏幕。

您需要確保列出的電子郵件地址正確無誤,然后單擊“創(chuàng)建并連接您的帳戶”按鈕。或者,如果您是現(xiàn)有用戶,只需單擊“我已經(jīng)擁有 API 密鑰”按鈕即可。
當(dāng)插件連接到 Optimum 時(shí),您可能需要等待幾秒鐘。之后,該插件將自動(dòng)開始優(yōu)化您的圖像,以便您的訪問者現(xiàn)在將看到適合其設(shè)備的最佳圖像。
發(fā)生這種情況時(shí),您可以單擊“設(shè)置”選項(xiàng)卡來配置延遲加載。
在這里,您需要確保啟用了“縮放圖像和延遲加載”設(shè)置。這將根據(jù)訪問者的屏幕尺寸生成圖像并提高加載速度。

接下來,單擊“高級(jí)”菜單選項(xiàng),然后選擇“延遲加載”。在此屏幕上,有一些不同的設(shè)置可讓您自定義圖像的延遲加載方式。
首先,您可以調(diào)整“從延遲加載中排除第一個(gè)圖像數(shù)量”設(shè)置。這將阻止頂部的圖像延遲加載,因此首屏圖像將始終顯示。

如果希望每個(gè)圖像延遲加載,則可以將其設(shè)置為 0。
您可以檢查 Optimole 中的其他一些高級(jí)延遲加載設(shè)置。默認(rèn)情況下,這些設(shè)置處于啟用狀態(tài)。
第一個(gè)是“縮放圖像”設(shè)置。這會(huì)將圖像縮放到訪問者的屏幕尺寸,并使您的頁面加載速度更快。

之后,您將看到“為背景圖像啟用延遲加載”設(shè)置。這將延遲加載您的背景圖像,這可能是您網(wǎng)站上最大的。
另一個(gè)設(shè)置是延遲加載和 iframe。如果您有很多嵌入的視頻內(nèi)容,則需要保留此設(shè)置。它將加載一個(gè)占位符圖像來代替視頻。單擊占位符后,將加載完整視頻。
您可以繼續(xù)自定義這些設(shè)置,看看哪些設(shè)置最適合您的網(wǎng)站和圖像。
在退出插件設(shè)置之前,請(qǐng)確保單擊頁面底部的“保存更改”按鈕。
優(yōu)化 WordPress 圖像的額外提示
雖然延遲加載將有助于提高網(wǎng)站加載速度,但還有其他幾種方法可以優(yōu)化您的 WordPress 圖像以獲得最佳性能。
例如,我們建議您先壓縮圖像,然后再使用 或 等工具將其上傳到您的網(wǎng)站?;蛘?,您可以使用自動(dòng)圖像壓縮插件,例如 或 。
為您的圖像選擇正確的 WordPress 圖像大小和文件格式也很重要。JPEG 最適合具有多種顏色的照片或圖像,PNG 適用于簡(jiǎn)單或透明的圖像,而 GIF 僅適用于動(dòng)畫圖像。






