⑴ 圖片網站如何加速
圖片作為網頁中的重要元素,雖然在網頁的修飾及內容的展示上給人一種視覺美感,但是它本身也是一種資源。只要是資源,那瀏覽器就會發出請求,請求一多自然就會影響網頁的載入速度。所以對於一般的圖片(圖床)網站,圖片較多,打開速度也較慢。此時我們就需要進行一些技術上的優化,以此來加快網頁載入速度了。具體有哪些優化措施呢?結合我的實際經驗分享一些供大家參考:
1、圖片資源單獨域名形式部署
每款瀏覽器其實都是有並發數限制的,如果一個頁面上所有的資源用的都是同一個域名來請求,那並發數無法突破,所以建議圖片資源可以搞1~3個獨立域名(或子域名)來部署訪問。這樣做的好處有:
便於後面的CDN加速實施;
可以提高瀏覽器的並發請求數;
減少了Cookie污染。
我們可以看看那些大型網站,圖片都是以單獨域名形纖團式部署的,而且域名還不止一個。2、CDN加速
圖片類網站最多的資源就是圖片,而正常的圖片都是靜態文件,所以我們完全可以把圖片全部走CDN加速,這樣做的好處主要有:
節省源站伺服器的帶寬;
利用CDN可以解決邊緣網路訪問問題,使得用戶就近獲取資源,加快了網頁載入速度;
3、圖片尺寸控制、適當裁剪
見過不少網站存在一些無法理解的低級錯誤,如:一張圖片幾兆,一個頁面下來光圖片資源就佔了幾十兆;圖片顯示區大小為200x200,但引用的圖片卻是1024x768這種大尺寸的圖。
上面這些錯誤相信很多人都遇到過,這是需要規避的。網頁上的圖片一定要做到適當裁剪、控制好尺寸大小。
4、啟用WebP格式
WebP格式是由谷歌開發的一種圖片格式,它即支持無損壓縮也支持有損壓縮,不管是哪種壓縮方式,相比傳統的JPEG,其物理大小要小得多。所以如果我們將JPEG的圖片轉為WebP,無疑是加快了網頁載入速度,只不過要注意,一些低端瀏覽器可能對WebP的支持不夠,這里要做好兼容處理。
另外,如果伺服器無法支持WebP,那就盡可能使用GIF代替PNG圖片。
5、啟用Gzip壓縮
Gzip同樣能有效的壓縮靜態資源,據說靜態資源文件啟用了Gzip後,壓縮率能達50%以上。
Gzip要想正常發揮作用,需要客戶端和伺服器端都支持Gzip壓縮。伺服器端主流的HTTPServer都支持Gzip壓縮,而現在主流的瀏覽器也都支持Gzip壓縮,所以問題不大。
6、惰性載入
惰性載入也稱為「懶載入」,當圖片出現在瀏覽器可視區域內圖片才載入,如果不在可視區域圖片則不主動載入,這就是懶載入的由來。
通過惰性載入技術可以有效的減少頁面短時間內的請求數量,這橋弊樣就緩解了頁面載入速度。
如何實現呢?主要藉助JQ插件來實現,常見的有:jQuery.lazyload等。
上毀消橘述這些方案在現實中是最常用的,當然了,方案遠不止這些。