jQuery lazyLoad這個(gè)對(duì)于一個(gè)網(wǎng)頁開發(fā)者來說并不陌生，而對(duì)于普通網(wǎng)站的SEOer就未必可知了，而子凡作為一個(gè)開發(fā)、SEO及一身的人來說，我就要來給大家普及一下這個(gè)了，也算是子凡對(duì)最近在寫SEO診斷系列文章中的一個(gè)拓展知識(shí)吧！

LazyLoad介紹

Lazy Load是一個(gè)用 JavaScript 編寫的 jQuery 插件，它可以延遲加載長頁面中的圖片，在瀏覽器可視區(qū)域外的圖片不會(huì)被載入，直到用戶將頁面滾動(dòng)到它們所在的位置，這與圖片預(yù)加載的處理方式正好是相反的。

在包含很多大圖片長頁面中延遲加載圖片可以加快頁面加載速度，瀏覽器將會(huì)在加載可見圖片之后即進(jìn)入就緒狀態(tài)，在某些情況下還可以幫助降低服務(wù)器負(fù)擔(dān)。

LazyLoad分析

<img class=”lazy” alt=”” width=”” height=”” src=”占位圖片” data-original=”真實(shí)圖片地址” />

頁面加載時(shí)就不會(huì)加載這些圖片了，然后 JS 控制頁面滾動(dòng)時(shí)才將 data-original 中的內(nèi)容填到 src 里面去。

也就是因?yàn)檫@個(gè)問題，所以才有了子凡今天要討論的話題，因?yàn)樗阉饕娲蠖鄬?duì)js的理解能力還是有限了，而搜索引擎抓取源代碼的時(shí)候，它并不能正確的抓取到真實(shí)的圖片地址，所以這是不利于網(wǎng)站圖片優(yōu)化的。

而如果你又是一個(gè)以圖片為主的網(wǎng)站，如果再使用LazyLoad可能就會(huì)變得更不利于網(wǎng)站的優(yōu)化了。

所以結(jié)論顯而易見，lazyload延遲加載技術(shù)不利于SEO的原因很簡單，即搜索引擎不會(huì)像我們?nèi)耸褂檬髽?biāo)那樣，上下拖動(dòng)網(wǎng)頁。搜索引擎只會(huì)選擇它看到的第一頁的內(nèi)容，其它的內(nèi)容都是空白。這樣當(dāng)然是不利于SEO的。

使用LazyLoad可以對(duì)網(wǎng)站用戶體驗(yàn)達(dá)到一個(gè)提升，加載速度就是最明顯的了，因?yàn)槭褂肔azyLoad可以在用戶沒看到的地方不會(huì)加載，減少了網(wǎng)頁請(qǐng)求和下載，所以速度就是用戶體驗(yàn)的重要因素之一，同樣LazyLoad可以在一定程度上降低服務(wù)器資源，這個(gè)子凡已經(jīng)在本文最開始就已經(jīng)提及到了。

lazyload對(duì)SEO的影響還有另外一方面，即會(huì)影響搜索引擎對(duì)網(wǎng)站圖片的收錄，圖片搜索也是網(wǎng)站的流量來源之一。

那么如何適當(dāng)?shù)睦肔azyLoad而不影響網(wǎng)站SEO優(yōu)化呢？

如果使用LazyLoad肯定是不可能完全不影響的，但是我們卻可以適當(dāng)?shù)睦肔azyLoad來提升網(wǎng)站的用戶體驗(yàn)，LazyLoad功能可以使用在除網(wǎng)站主體內(nèi)容的其它圖片上，也就是在網(wǎng)站正文中，以及首頁或者頻道的分縮略圖中最好不要使用！而像網(wǎng)站的用戶頭像或其它的一些無關(guān)緊要的圖片上，加上LazyLoad懶加載還是很不錯(cuò)的選擇，這樣是有利于用戶體驗(yàn)而又幾乎不影響網(wǎng)站SEO優(yōu)化的了。

寫在最后：lazyload雖然對(duì)提升用戶體驗(yàn)有好處，但是提升的效果到底有多少，是個(gè)疑問。出現(xiàn)延遲加載技術(shù)是為了加快網(wǎng)頁打開速度，提高帶寬利用率，但是，現(xiàn)在帶寬越來越大，網(wǎng)速越來越快，移動(dòng)已經(jīng)到了4G時(shí)代，開視頻都嗖嗖的，帶寬這個(gè)理由，似乎已經(jīng)快不成立了。

在SEO和用戶體驗(yàn)提升之間，沒有唯一答案， 因?yàn)閷?duì)于網(wǎng)站來說SEO很重要，而對(duì)于用戶來說，用戶體驗(yàn)是首選，所以就像上面提出的解決辦法一樣，既可以不影響網(wǎng)站優(yōu)化，又可以提升用戶體驗(yàn)，你學(xué)到了嗎？

最后的總結(jié)：能不用lazyload圖片懶加載則不使用！