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圖片懶加載則不使用!

皖公網(wǎng)安備 34162202000270號(hào)