添加時(shí)間:2017/12/12 12:00:37 編輯:奇億網(wǎng)站建設(shè)公司
無(wú)論網(wǎng)站是否是圖片站點(diǎn),奇億網(wǎng)絡(luò)都覺(jué)得圖片內(nèi)容是每個(gè)網(wǎng)站的必須品,是提升用戶(hù)體驗(yàn)達(dá)到一個(gè)更優(yōu)秀的閱讀效果的表現(xiàn),也就是說(shuō)一篇好的文章都應(yīng)該擁有最合適的配圖來(lái)提高用戶(hù)閱讀體驗(yàn)。那么針對(duì)于整個(gè)網(wǎng)站優(yōu)化來(lái)說(shuō),該如何將圖片做到最優(yōu)呢?
奇億網(wǎng)絡(luò)在前些時(shí)候一文中也提到過(guò)文章的配圖的重要性,圖文并茂有利于整篇文章的結(jié)構(gòu)和重點(diǎn),那么今天奇億網(wǎng)絡(luò)所要說(shuō)到的網(wǎng)站圖片優(yōu)化和懶加載,更多的是關(guān)于網(wǎng)站用戶(hù)體驗(yàn)的優(yōu)化和升級(jí)。
網(wǎng)站圖片優(yōu)化的重要性
網(wǎng)站圖片的使用在提升用戶(hù)閱讀體驗(yàn)和網(wǎng)站整體的視覺(jué)設(shè)計(jì)效果都是有非常大的提升和幫助,以至于在網(wǎng)頁(yè)設(shè)計(jì)上面幾乎每一個(gè)文章鏈接都會(huì)調(diào)用文章縮略圖,從而也就存在一個(gè)潛在且影響用戶(hù)體驗(yàn)的問(wèn)題。
網(wǎng)頁(yè)中加載的圖片越多,對(duì)于網(wǎng)站主和訪客用戶(hù)來(lái)說(shuō),都是對(duì)服務(wù)器和本地網(wǎng)絡(luò)資源的極大浪費(fèi),同時(shí)也拉低了網(wǎng)站的打開(kāi)速度,及時(shí)視覺(jué)效果方面提升了,但性子急的用戶(hù)可以早就選擇離開(kāi)而看不到了。
圖片懶加載的必要性
網(wǎng)站圖片優(yōu)化的重要性就體現(xiàn)在了網(wǎng)站整體的加載速度,雖然我們可以通過(guò)CDN加速或者提升服務(wù)器帶寬,這無(wú)疑是增加了網(wǎng)站運(yùn)營(yíng)成本,而同樣會(huì)浪費(fèi)用戶(hù)的帶寬或流量,雖然可能用戶(hù)并不能察覺(jué)到,但是既然是奇億網(wǎng)絡(luò)這個(gè)追求極致的人來(lái)說(shuō),這點(diǎn)是絕對(duì)不能容忍的。
所以圖片懶加載的必要性就體現(xiàn)出來(lái)了,懶加載的方式就是把用戶(hù)能看到的頁(yè)面中的圖片第一時(shí)間渲染并加載,那么非首屏外的圖片,當(dāng)用戶(hù)翻頁(yè)或者滾動(dòng)到可是區(qū)域時(shí)在實(shí)時(shí)的加載,可以說(shuō)是真正的做到了按需加載吧,這樣從本質(zhì)上來(lái)減少圖片對(duì)服務(wù)器帶寬的壓力,以及對(duì)用戶(hù)的最佳考慮,更是提升網(wǎng)站首屏打開(kāi)速度的一個(gè)好方法,當(dāng)然奇億網(wǎng)絡(luò)已經(jīng)詳細(xì)的分享過(guò)關(guān)于“網(wǎng)站該如何做好首屏的打開(kāi)加載速度優(yōu)化?”的文章,感興趣的可以去看看。
如何將網(wǎng)站圖片優(yōu)化做到極致?
對(duì)于網(wǎng)站圖片優(yōu)化的重要性已經(jīng)不言而喻,而圖片懶加載的重要性也就更不用多說(shuō),針對(duì)與網(wǎng)站圖片的優(yōu)化,我們?cè)谌绾卫脩屑虞d的方式來(lái)做到頁(yè)面的最佳化呢?
首先我們需要知道整個(gè)網(wǎng)站或者一個(gè)頁(yè)面中在哪些板塊會(huì)出現(xiàn)圖片,因?yàn)楦鱾(gè)網(wǎng)站的不同,奇億網(wǎng)絡(luò)這里就以一種最通用的頁(yè)面來(lái)舉例:
其中首頁(yè)一般頂部第一個(gè)是LOGO圖片,這個(gè)應(yīng)該是沒(méi)有必要做懶加載的,因?yàn)?/span>LOGO肯定是會(huì)在首屏顯示和第一時(shí)間加載的;然后可能就是幻燈效果或者是大圖的展現(xiàn)效果,如果圖片是在首屏的話(huà)做懶加載就沒(méi)有必要了,可以選擇直接引入或者css內(nèi)鏈樣式以背景的方式引入圖片;接著就是左側(cè)的文章列表以及右側(cè)的推薦文章等相關(guān)的內(nèi)容和縮略圖,這些地方的圖片就是做懶加載的必要地方;對(duì)于像博客或者一些資訊的站點(diǎn),可能還會(huì)存在一個(gè)用戶(hù)頭像圖片,這個(gè)也是做懶加載的必要地方;
以上四點(diǎn)是針對(duì)與一個(gè)通用的網(wǎng)頁(yè)以及整個(gè)網(wǎng)站都是適用的,而對(duì)于文章內(nèi)容頁(yè)面,奇億網(wǎng)絡(luò)還有更多的看法與觀點(diǎn),一般而言文章內(nèi)容為了讓搜索引擎良好的抓取文章整體內(nèi)容包括圖片,所以是不會(huì)做圖片的懶加載的,但是對(duì)于想奇億網(wǎng)絡(luò)的淚雪網(wǎng)的某些評(píng)測(cè)或者需要多張甚至大量的圖片展現(xiàn)該怎么辦呢?有什么好的解決方法?
奇億網(wǎng)絡(luò)的觀點(diǎn)是對(duì)于有多張或大量圖片的文章內(nèi)容而已,懶加載依舊是非常有必要的,否則當(dāng)文章頁(yè)面打開(kāi),所有的圖片都同時(shí)請(qǐng)求加載圖片,依舊會(huì)形成網(wǎng)頁(yè)半天打不開(kāi)或者頁(yè)面加載中的狀態(tài),通過(guò)奇億網(wǎng)絡(luò)的個(gè)人經(jīng)驗(yàn)和對(duì)內(nèi)容傳播的總結(jié)來(lái)看,文章中的前三張圖片不做懶加載,其余圖片都是可以做懶加載圖片的,從搜索引擎的角度來(lái)看,文章中的圖片會(huì)被搜索引擎索引并且可能用于搜索結(jié)果的縮略圖展現(xiàn),所以不能全部做圖片懶加載,否則搜索引擎就不能正確獲取到文章圖片,至于為什么是三張圖片嘛,奇億網(wǎng)絡(luò)可能也說(shuō)不出具體的參考源或者依據(jù),純屬經(jīng)驗(yàn)與個(gè)人判斷,同時(shí)也因?yàn)槿N縮略圖是比較通用常見(jiàn)的一個(gè)樣式的緣故吧。
寫(xiě)在最后的簡(jiǎn)單總結(jié)
對(duì)于網(wǎng)站圖片的優(yōu)化,懶加載可能只是其中一種方式,但確實(shí)最行之有效的方式,例如現(xiàn)在第三方的CDN就可以直接處理和壓縮圖片,相當(dāng)?shù)暮?jiǎn)單方便,雖然說(shuō)奇億網(wǎng)絡(luò)也很喜歡CDN,但是網(wǎng)站處于一個(gè)流量不高不低的狀態(tài),服務(wù)器帶寬優(yōu)化一下也是可以支持的,所以就不愿意用CDN,因?yàn)?/span>CDN流量也是需要花錢(qián)的啊!對(duì)于一個(gè)網(wǎng)站而已,圖片比內(nèi)容更占用空間和帶寬,但是只要做到足夠的優(yōu)化,也是可以完美應(yīng)對(duì)的。