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