建站
咨詢
售后
建站咨詢
新聞中心
我們提供的服務(wù)有：成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、尼勒克ssl等。為上千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的尼勒克網(wǎng)站制作公司
根據(jù)HTTP Archive，網(wǎng)頁平均體積為3719 kB，其中圖像和視頻占總體積的近78％。 這對(duì)于網(wǎng)站訪問者的瀏覽器下載和渲染來說是很多字節(jié)，并且未來的趨勢(shì)網(wǎng)頁越來越大及使用更多的圖像或者視頻內(nèi)容。 在共享媒體和將媒體文件整合到網(wǎng)站設(shè)計(jì)中時(shí)，wordpress正在引領(lǐng)潮流。 使用WordPress，可以輕松地將圖像和視頻集成到文章，頁面甚至主題的背景中。
但是，過多的媒體資源使得網(wǎng)頁加載變得非常緩慢，因?yàn)橛脩粼诓榭淳W(wǎng)頁之前必須等待下載大文件（包括最初未顯示的文件）。 這是為什么我們要對(duì)WordPress做圖片或者視頻懶加載（延遲加載）的原因。
- 什么是延遲加載以及它如何工作？
- 為什么要做圖像懶加載？
- WordPress延遲加載
- 使用延遲加載插件提高頁面加載速度
- 懶加載對(duì)SEO的影響
什么是延遲加載以及它如何工作？
延遲加載（又稱懶加載）是一種加載可見內(nèi)容的優(yōu)化技術(shù)，即延遲下載和呈現(xiàn)在首屏下方需要顯示的內(nèi)容。延遲加載不是一次加載所有圖像，而是僅下載用戶屏幕上可見的圖像。它用占位符圖像或空白區(qū)域替換所有其他圖像。當(dāng)用戶向下滾動(dòng)時(shí)，您的網(wǎng)站會(huì)加載在瀏覽器查看區(qū)域中可見的圖像。
這也是谷歌極力推廣的網(wǎng)頁優(yōu)化策略“縮減首屏內(nèi)容的大小”，如果您的WordPress文章和頁面包含大量嵌入式視頻和高分辨率圖像，這是一種應(yīng)該考慮的技術(shù)。
延遲加載的工作方式如下：
- 瀏覽器在不下載圖像和預(yù)加載視頻下構(gòu)建網(wǎng)頁DOM而。
- JavaScript用于確定要下載哪些圖像以及根據(jù)頁面加載時(shí)最初可見的內(nèi)容預(yù)加載哪些視頻。這些圖像和視頻會(huì)根據(jù)需要下載和預(yù)加載。
- 下載和呈現(xiàn)其他視頻會(huì)延遲，直到網(wǎng)站訪問者向下滾動(dòng)頁面并且其他內(nèi)容進(jìn)入視圖。
最終結(jié)果是，在實(shí)際需要之前，不會(huì)下載圖像和加載視頻。這可以為包含大量高分辨率圖像和嵌入視頻的網(wǎng)站實(shí)現(xiàn)顯著的性能提升。
延遲加載對(duì)您的WordPress網(wǎng)站非常有利。
- 它減少了初始網(wǎng)頁加載時(shí)間，因此用戶會(huì)更快地看到您的網(wǎng)站
- 它通過僅提供可查看的圖像來節(jié)省帶寬，并可節(jié)省托管成本
WordPress 5.5的發(fā)布添加了延遲加載作為默認(rèn)功能。
但是，如果您想自定義圖像延遲加載和背景圖像延遲加載的方式，則需要使用WordPress插件。
注意：雖然延遲加載有助于提高網(wǎng)站加載速度，但在上傳到WordPress之前，您應(yīng)該始終針對(duì)網(wǎng)絡(luò)優(yōu)化圖像以獲得最佳性能。
為什么要做圖像懶加載？
延遲加載您的WordPress圖片可以加快您的網(wǎng)站速度并提供更好的用戶體驗(yàn)。
沒有人喜歡慢速網(wǎng)站。事實(shí)上，一項(xiàng)性能研究發(fā)現(xiàn)，頁面加載時(shí)間延遲一秒會(huì)導(dǎo)致轉(zhuǎn)化次數(shù)減少7%，頁面瀏覽量減少11%，客戶滿意度降低16%。
任何搜索引擎也不喜歡加載緩慢的網(wǎng)站。這就是速度越快的網(wǎng)站在搜索結(jié)果中排名越高的原因。
與其他網(wǎng)絡(luò)元素相比，圖像在您的網(wǎng)站上加載所需的時(shí)間最長(zhǎng)。如果您在文章中添加大量圖片，那么每張圖片都會(huì)增加您的頁面加載時(shí)間。
處理這種情況的一種方法是使用CDN服務(wù)，例如又拍云CDN。CDN將讓用戶從離他們最近的Web服務(wù)器下載圖像并降低網(wǎng)站加載速度。
但是，您的圖像仍將被加載并影響整體頁面加載時(shí)間。為了解決這個(gè)問題，您可以通過在您的網(wǎng)站上實(shí)現(xiàn)延遲加載來延遲圖像加載。
WordPress延遲加載
與許多其他網(wǎng)站性能問題一樣，WordPress延遲加載也是可以通過插件來解決。 實(shí)際上，WordPress插件庫有許多插件可用于延遲加載圖像和視頻。 這樣的插件林林總總，我們從中挑了五個(gè)可以顯著提高網(wǎng)站性能的插件。 如果您已準(zhǔn)備好實(shí)施延遲加載，可以考慮這五個(gè)插件。
圖像和視頻真的會(huì)讓網(wǎng)站變慢嗎？
首先，在將任何圖像上傳到WordPress之前，請(qǐng)確保已經(jīng)執(zhí)行了優(yōu)化（關(guān)于圖片體積優(yōu)化，可以參考文章《如何做到Google PageSpeed Insights測(cè)試滿分/100分》里面的圖片優(yōu)化章節(jié)）。
我們需要一個(gè)基線分?jǐn)?shù)，以便可以看到添加圖像和視頻的對(duì)網(wǎng)站加載速度的影響。 如果開始就沒有問題，就沒有解決問題的必要。 為了測(cè)試我在測(cè)試主機(jī)上安裝標(biāo)準(zhǔn)的WordPress，并啟用了默認(rèn)主題TwentySixteen，且沒有啟用優(yōu)化插件或緩存等技術(shù)。
以下截圖是在添加任何圖片或視頻之前，使用Pingdom（查閱更多網(wǎng)站測(cè)速工具）對(duì)網(wǎng)站進(jìn)行速度測(cè)試的結(jié)果。
不添加任何圖片或視頻網(wǎng)站測(cè)速
正如您所看到的，頁面非常小，只有不到155 kb，并且在不到半秒的時(shí)間內(nèi)加載。 如果網(wǎng)站加載包含大型圖片文件和嵌入式Y(jié)ouTube視頻，測(cè)速結(jié)果將會(huì)如何？
不使用懶加載插件執(zhí)行網(wǎng)站測(cè)速
在測(cè)試網(wǎng)站添加圖片和視頻后，我們可以看到頁面體積到了1.7 MB，頁面加載時(shí)間增加到1.3秒。 我們可以看到添加圖像和視頻后使頁面體積變大，并大大降低了頁面加載速度。
使用延遲加載插件提高頁面加載速度
這次我們將對(duì)五個(gè)WordPress延時(shí)加載插件BJ Lazy Load，Lazy Load XT，a3 Lazy Load和Lazy Load（Lazy Load for Videos）進(jìn)行測(cè)試。 讓我們來看看每個(gè)插件變現(xiàn)如何。 當(dāng)你嘗試使用WordPress延遲加載插件時(shí)，一定要做一個(gè)前后測(cè)試，以確保能夠達(dá)到你預(yù)期的結(jié)果。
- BJ Lazy Load
- Lazy Load XT
- a3 Lazy Load
- Lazy Load
- Lazy Load for Videos
- WP Rocket
- Optimole
1. BJ Lazy Load
BJ Lazy Load是一個(gè)非常受歡迎的懶加載插件。目前它在超過9w+個(gè)啟用安裝，獲得4星評(píng)分。
WordPress延時(shí)加載插件-BJ Lazy Load
該插件安裝和設(shè)置都非常簡(jiǎn)單。只需通過“插件-安裝插件”搜索該插件，并安裝啟用。啟用后，通過“設(shè)置 ”>“BJ Lazy Load”即可進(jìn)入插件設(shè)置界面。默認(rèn)情況下會(huì)選擇所有延遲加載選項(xiàng)，除非您在啟用插件后，網(wǎng)站前端遇到問題，否則您無需對(duì)插件執(zhí)行過多的設(shè)置。
此插件提供了一個(gè)選項(xiàng)，其他兩個(gè)選項(xiàng)都無法為圖像添加URL，以用作延遲加載的圖像和視頻的占位符，直到下載實(shí)際的圖像和視頻資源。當(dāng)然，如果您使用此選項(xiàng)，您將需要使用非常小的文件而不是高分辨率圖像。
為了頁面美觀不破壞頁面整體，建議您創(chuàng)建一個(gè)與您的網(wǎng)站背景顏色相同的純色圖像，并將其保存為png格式。
您還可以指定排除延遲加載的HTML類。然后，您可以將該類應(yīng)用于您希望從延遲加載中排除的任何圖像或視頻。最后，您可以設(shè)定懶加載圖片和視頻下載的時(shí)機(jī)（即觸發(fā)圖片和視頻離下載渲染的目標(biāo)離當(dāng)前可視窗口位置值）
在使用了懶加載插件BJ Lazy Load后，頁面加載速度變化如下：
使用延時(shí)加載插件BJ Lazy Load后的測(cè)速
再經(jīng)過多次測(cè)試統(tǒng)計(jì)后，結(jié)論是使用BJ Lazy Load插件可以讓頁面加載時(shí)間保持在300到400毫秒之間。
雖然安裝此插件后頁面加載速度驚人，但頁面的大小實(shí)際上還是增加。 怎么回事？ 理論上，激活延遲加載后，頁面大小也應(yīng)該會(huì)減少，因?yàn)椴⒎撬袌D像都是在初始頁面加載時(shí)下載的。
在對(duì)這種情況進(jìn)行一些調(diào)查后，發(fā)現(xiàn)：
WordPress默認(rèn)的圖片讀取規(guī)則
WordPress嵌入圖像時(shí)會(huì)img元素添加srcset屬性，向?yàn)g覽器顯示各種尺寸的圖像。 瀏覽器根據(jù)不同的設(shè)備分辨率加載最合適的尺寸的圖片。
這意味著如果您上傳一個(gè)非常大的圖像文件，WordPress將自動(dòng)為您的網(wǎng)站訪問者提供該圖像的多個(gè)尺寸版本，瀏覽器再根據(jù)設(shè)備分辨率選擇其中一個(gè)最合適的圖片Size。
BJ Lazy Load改變WordPress圖片讀取規(guī)則
BJ Lazy Load會(huì)覆蓋WordPress默認(rèn)的圖片讀取。 srcset屬性已替換為與插件腳本一起使用的data-lazy-srcset屬性。 然而，最終結(jié)果是，不是下載最佳尺寸版本的圖像，而是下載和渲染全分辨率圖像。
這也就解釋了前面的頁面速度測(cè)試，為什么頁面體積大小變化不大的現(xiàn)象問題。所以建議你使用此插件執(zhí)行懶加載時(shí)，確保在上傳圖片之前對(duì)圖片進(jìn)行最優(yōu)化，即上傳較為合適分辨率的圖片。
2. Lazy Load XT
Lazy Load XT在我們的測(cè)試中表現(xiàn)良好，是另一個(gè)值得考慮的WordPress延遲加載插件。 但需要注意的是這個(gè)插件不像BJ Lazy Load那么受歡迎，且已經(jīng)有三年未更新了（鑒于技術(shù)支持保障及安全性考慮，不建議優(yōu)先考慮此插件）。
WordPress懶加載插件-Lazy Load XT
啟用插件后，通過WordPress儀表盤“設(shè)置> Lazy Load XT”配置插件。 你會(huì)注意到這個(gè)插件不僅僅提供延遲加載圖片和視頻支持，還提供壓縮JS和CSS文件，使用Cloudflare CDN加載JavaScript和CSS庫，并將腳本移動(dòng)到站點(diǎn)頁腳等功能。
您可以使用其他選項(xiàng)來微調(diào)網(wǎng)站性能。 但由于我們本次只是測(cè)試延遲加載，此次僅采用了默認(rèn)設(shè)置，并沒有縮小或移動(dòng)CSS和JavaScript，清除服務(wù)器緩存。最終通過Pingdom網(wǎng)站運(yùn)行速度測(cè)試結(jié)果如下：
WordPress延時(shí)加載插件Lazy Load XT后測(cè)速
啟用Lazy Load XT插件后頁面體積大小還是2 MB，頁面加載時(shí)間不如BJ Lazy Load快，但相對(duì)于未啟用懶加載，頁面加載時(shí)間減少50％。
快速瀏覽一下測(cè)試結(jié)果中的文件樹，啟用Lazy Load XT插件與我們?cè)贐J Lazy Load中看到的那樣。 啟用這兩個(gè)插件均不是加載圖像的優(yōu)化版本，而是下載并呈現(xiàn)圖像的全分辨率版本。
雖然插件沒有產(chǎn)生與BJ Lazy Load相同的速度提升，但是Lazy Load XT支持眼球測(cè)試。 與BJ Lazy Load不同，Lazy Load XT使用的占位符是透明的。 因此，在加載圖像和視頻時(shí)，沒有難看的空白框，您不必?fù)?dān)心創(chuàng)建和上傳占位符圖像。
3. a3 Lazy Load
a3 Lazy Load是WordPress插件市場(chǎng)其中一個(gè)非常流行的WordPress延遲加載插件。 此插件目前已有超過10w+個(gè)有效激活安裝，并且得到了4.5星評(píng)分。
WordPress懶加載插件-A3 Lazy Load
啟用插件后，在WordPress儀表盤新增了“設(shè)置>a3 Lazy Load”菜單。 出于測(cè)試目的，使用了插件的默認(rèn)設(shè)置，但有一個(gè)例外，“Loading Background Colour ”選項(xiàng)將占位符顏色與網(wǎng)頁背景的顏色相匹配。
安裝啟用A3 Lazy Load插件后的測(cè)速狀況
啟用插件后再次測(cè)速，頁面加載時(shí)間不到半秒。 考慮到此網(wǎng)頁上包含的圖像和視頻數(shù)量，這樣的效率還是非常不錯(cuò)的。
測(cè)速結(jié)果對(duì)比
毫無疑問，您會(huì)注意到頁面大小和請(qǐng)求數(shù)量已大大減少。 是什么造成不同插件之間的這種戲劇性的差異？ 我們通過Pingdom提供內(nèi)容大小的快照，快速比較后發(fā)現(xiàn)了其中的答案。 首先，這是激活a3 Lazy Load時(shí)內(nèi)容大小快照如下圖所示：
啟用A3 Lazy Load插件的頁面內(nèi)容大小
啟用A3 Lazy Load插件后頁面圖像占用空間很小，超出150 kb一點(diǎn)點(diǎn)。 BJ Lazy Load和Lazy Load XT都生成了2.0 MB的頁面大小。 以下是啟用Lazy Load XT插件頁面內(nèi)容的組成分析截圖。
啟用Lazy Load XT插件的頁面內(nèi)容大小
啟用A3 Lazy Load和Lazy Load XT延時(shí)加載插件后頁面的腳本，HTML，CSS和其他內(nèi)容大小幾乎相同。但是后者的頁面圖像大小為1.86 MB – 而不是前者的僅僅150 kb。發(fā)生什么了？正如我之前提到的，WordPress自動(dòng)提供各種尺寸的圖像，瀏覽器根據(jù)設(shè)備屏幕分辨率呈現(xiàn)不同尺寸的圖像版本。
BJ Lazy Load和Lazy Load XT都會(huì)覆蓋WordPress默認(rèn)的讀圖規(guī)則并最終提供全分辨率圖像。但是，a3 Lazy Load保留了默認(rèn)的WordPress讀圖規(guī)則，傳送的圖像文件要小得多。
奇怪的是，盡管頁面大小不同，但激活BJ Lazy Load時(shí)網(wǎng)站加載速度比激活a3 Lazy Load時(shí)加載速度快。安裝了每個(gè)插件后，對(duì)該站點(diǎn)進(jìn)行了多次測(cè)試，以確保測(cè)速結(jié)果不是例外情況。最終將差異歸結(jié)為加載頁面所需的HTTP請(qǐng)求數(shù)。乍一看，看起來BJ Lazy Load需要更多請(qǐng)求。但是，如果我們看一下文件樹，我們才能看到實(shí)際所發(fā)生的事情。
啟用Lazy Load插件的Data URIs
激活了BJ Lazy Load的站點(diǎn)文件包含大約20個(gè)以 data:image/gif 開頭的請(qǐng)求。 這些是數(shù)據(jù)URIs而不是HTTP請(qǐng)求。 實(shí)際上，它們告訴瀏覽器在本地創(chuàng)建一個(gè)gif，而不是從服務(wù)器請(qǐng)求那個(gè)gif。 因此，BJ Lazy Load實(shí)際上只需要17個(gè)HTTP請(qǐng)求來構(gòu)建頁面而不是a3 Lazy Load所需的27個(gè)。 這就解釋了為什么頁面加載速度為什么可以做到那么快。
Lazy Load XT采用了類似的策略，但仍需要比BJ Lazy Load插件更多的請(qǐng)求，這就解釋了為什么它不能產(chǎn)生完全相同的結(jié)果。
4. Lazy Load
推薦的第四個(gè)插件是Lazy Load，這是知名的WP Rocket團(tuán)隊(duì)開發(fā)的免費(fèi)插件。 該插件目前已經(jīng)有4w+的激活安裝，并且獲得了4星評(píng)分。 如果您正在尋找一個(gè)速度很快且簡(jiǎn)單WordPress延遲加載方案，這個(gè)插件是一個(gè)很好的選擇。
由WP Rocket開發(fā)的WordPress懶加載插件-Lazy Load
此插件適用于縮略圖，文章內(nèi)容或小部件文本中的所有圖像，頭像和表情符號(hào)。 這個(gè)插件的最大優(yōu)點(diǎn)是沒有使用JavaScript庫，例如jQuery，腳本大小不到10 KB。 沒有配置選項(xiàng)，只需安裝插件，延遲加載即可實(shí)現(xiàn)。
5. Lazy Load for Videos
如果您只需要延遲加載視頻，Lazy Load for Videos 插件即可。 雖然上面的一些插件也支持視頻延遲加載，但對(duì)于視頻內(nèi)容來說Lazy Load for Videos是一個(gè)很好的解決方案。
Lazy Load for Videos plugin
6. WP Rocket
我們建議使用WP Rocket插件在 WordPress 中延遲加載圖像。它是市場(chǎng)上最好的WordPress緩存插件，可讓您輕松打開圖像延遲加載。
除此之外，它還是一個(gè)非常強(qiáng)大的插件，可以幫助您優(yōu)化網(wǎng)站速度，而無需了解復(fù)雜的技術(shù)術(shù)語。
開箱即用，他們所有的默認(rèn)推薦緩存設(shè)置將大大加快您的WordPress網(wǎng)站。
要啟用圖像延遲加載，您只需選中幾個(gè)框即可。您甚至可以為視頻啟用延遲加載，這將進(jìn)一步提高您的網(wǎng)站速度。
有關(guān)更多詳細(xì)信息，請(qǐng)參閱有關(guān)如何在WordPress中正確安裝和設(shè)置WP Rocket的指南。
7. Optimole
此方法使用免費(fèi)的Optimole插件。它是最好的WordPress圖像壓縮插件之一，可讓您輕松啟用圖像延遲加載。
如果您每月有超過5,000名訪客，那么您將需要高級(jí)版。
首先，您需要安裝并啟用插件。轉(zhuǎn)到媒體?Optimole，然后您需要注冊(cè)一個(gè)API密鑰。
只需單擊“Register & Email API key”，它就會(huì)通過電子郵件發(fā)送給您。
然后，輸入您的API密鑰并單擊“Connect to Optimole Service”。
之后，單擊“Setting”選項(xiàng)卡。
在這里，您可以確保啟用了“Scale images and & Lazy load”設(shè)置。這將根據(jù)訪問者的屏幕尺寸生成圖像并提高加載速度。
接下來，單擊“Advanced”菜單選項(xiàng)并選擇“Lazyload”。
在此屏幕上，有一些不同的設(shè)置可讓您自定義圖像延遲加載的方式。
首先，您可以調(diào)整“Scale images and & Lazy load”設(shè)置。這將阻止延遲加載文章或頁面頂部的圖像，因此折疊上方的圖像將始終顯示。
如果您希望每個(gè)圖像都延遲加載，您可以將其設(shè)置為0。
接下來，您可以啟用“Scale Images”開關(guān)。
這會(huì)將圖像縮放到訪問者的屏幕大小，并使您的頁面加載速度更快。
之后，您可以打開“Enable lazyload for background images”設(shè)置。
這將延遲加載您的背景圖片，這可能是您網(wǎng)站上一些最大的圖片。
您可以啟用的另一個(gè)設(shè)置是延遲加載嵌入式視頻和 iframe。如果您有很多嵌入的視頻內(nèi)容，那么您需要啟用此設(shè)置。
這將加載占位符圖像代替視頻。當(dāng)它被點(diǎn)擊時(shí)，完整的視頻將加載。
您可以繼續(xù)自定義這些設(shè)置，并查看最適合您的網(wǎng)站和圖像的設(shè)置。
在退出插件設(shè)置之前，請(qǐng)確保單擊“保存更改”按鈕。
懶加載對(duì)SEO的影響
無論你最終使用哪個(gè)插件進(jìn)行WordPress延遲加載，都要考究到對(duì)SEO的影響。需要確保以下兩件事：
小結(jié)和建議
那會(huì)給我們留下什么？所有這四個(gè)選項(xiàng)都通過延遲加載圖像和視頻來提高頁面加載速度。選擇哪個(gè)最好取決于個(gè)人偏好以及如何在將圖像上傳到WordPress網(wǎng)站之前準(zhǔn)備圖像。
- 如果在上傳前沒有對(duì)圖像進(jìn)行任何優(yōu)化 – 建議使用a3 Lazy Load，因?yàn)樵摬寮?nèi)置圖像優(yōu)化功能。
- 如果在上傳前優(yōu)化圖像且是個(gè)懶人，那么BJ Lazy Load和Lazy Load比較適合。
- 如果在上傳前優(yōu)化圖像，并希望有額外的選項(xiàng)給到你配置CSS和JS資源發(fā)送處理，那么建議你選擇Lazy Load XT。
延遲加載只是一種可用于優(yōu)化WordPress網(wǎng)站的技術(shù)。但是，如果您使用大量圖像和視頻，它可能會(huì)對(duì)網(wǎng)站速度產(chǎn)生深遠(yuǎn)影響。盡管如此，一旦您實(shí)施了延遲加載，您可以考慮并實(shí)施幾種其他技術(shù)來提升網(wǎng)站性能。關(guān)于WordPress延遲加載解決方案？或者你有更好的建議，歡迎留言交流。
除此之外，WordPress要獲得更好的性能，我們其實(shí)還有很多事情可以做，比如CDN加速，WP緩存，CSS和JS等文件極簡(jiǎn)化，必要的Gzip壓縮等等。要知道您的WordPress網(wǎng)站的性能如何，你可以通過一些專業(yè)的網(wǎng)站測(cè)速工具進(jìn)行全面的檢測(cè)，然后有針對(duì)性地進(jìn)行優(yōu)化。如果你能夠做到Google PageSpeed Insights測(cè)試滿分（其實(shí)90分以上），網(wǎng)站就很OK了。
本文題目：如何實(shí)現(xiàn)WordPress圖片和視頻懶加載（圖文教程）
當(dāng)前路徑：http://www.dlmjj.cn/article/cooophp.html
