在網站建設中,圖像通常是負責緩慢頁面加載時間的第一元素。通過選擇正確的文件格式和圖像壓縮組合,您可以更快地使您的網站,現在看看如何做到這一點。圖像通常可以提高網站的質量,而且它們是實施視覺營銷策略的關鍵。但是,您的網站對媒體的影響越大,對您的加載時間的影響就越大。如果您的網站需要很長時間才能加載,它看起來多么令人驚嘆并不重要,它會嚇跑游客。
答案是壓縮或優化您的圖像,使它們變小,而不會失去任何質量。在本文中,我們將更多地討論圖像? 壓縮,它如何幫助您,以及使用數據來準確展示它在加載時間方面可以產生多大的差異。
什么是圖像壓縮
圖像壓縮是優化網站加載時間的絕佳方式。簡而言之,壓縮圖像涉及減小文件大小,因此占用的空間更少,有兩種方法:“有損”和“無損”。前者可以極大地優化您的圖像,同時可能會降低視覺質量,而后者只會盡可能地壓縮您的文件,而不會影響它們的外觀。
通常,您會想要進行無損優化。然而,有損技術的差異并不一定是肉眼可見的。讓我們看看左邊的原始圖像和右邊的優化版本的示例:
如果你放大得足夠近,你應該能夠發現一些差異。但是,由于我們沒有以全分辨率顯示任何一個圖像,因此差異很難得出。考慮到許多網站的空間限制,當壓縮的500KB版本同樣合適時,沒有理由上傳高質量的5MB圖像。
無論如何,圖像優化的主要好處是易于理解。圖形占用的存儲空間越小,頁面越輕。這意味著用戶可以更快地加載您的網站,這應該會對其可用性和“粘性”產生直接影響。考慮到這一點,讓我們看一下影響圖像壓縮對普通網站的性能有多大影響。
圖像壓縮會影響網站加載速度
沒有兩個網站會有相同的加載時間,因為它們都是獨一無二的。簡而言之,此測試的目的是確定(平均)影響圖像優化對加載時間的影響程度。為此,我們建立了一個包含三個單獨頁面的網站,使用Rare構建? 。第一頁包含? 主頁組合 布局,我們將其設置為包含十個圖像:
這些圖像都沒有被優化,總共頁面重1.7MB。我們在此測試網站上也沒有任何活動插件,以避免任何可能影響我們結果的元素。設置完所有內容后,我們使用Pingdom Tools的? San Jose,California服務器測試了此頁面加載的時間? :
稍后,我們將向您展示我們的測試結果。目前,我們將設置一個額外的Divi測試頁面,因此我們有更多數據來備份我們的結果。對于我們的第二次參賽,我們選擇了? Masonry Blog 布局,因為它為我們提供了一個精美展示幾個特色圖像的機會(在本例中為七個):
這個頁面的重量為1.3MB,與我們之前的例子一樣,具有相同的未優化圖像集 - 只是使用不同的布局:
現在,我們將創建兩個頁面的碳副本,并用優化版本替換它們的圖像。為此,我們將分別使用兩個不同的圖像優化插件壓縮JPEG和PNG圖像? 以及? WP Smush。這里有大量的信息需要解壓縮,所以讓我們來談談這些數字的含義。
結果告訴了什么
根據我們的結果,圖像優化? 確實 對網站加載時間有重大影響。更具體地說,我們的測試發現,如果您優化網站上的每個圖像,您可以預期加載時間至少會提高10%。有些人可能會認為10%不足以證明壓縮網站上每個圖像的麻煩。但是,有很多方法可以在WordPress中自動執行該過程。如果你沒有這樣做,你基本上會說“不”以獲得更好的表現。
更重要的是,圖像優化只是您應在網站制作上實施的許多調整之一,以縮短加載時間。例如,可以考慮緩存,GZIP壓縮,使用優化良好的主題以及許多其他方面。如果你實施所有這些,你的網站應該非常快!最后,值得注意的是,10%是我們得分結果的低端。您的收益將取決于您的網頁平均包含的圖片數量,以及您使用的壓縮工具。很有可能,您的裝載時間可能會進一步提高。但是,在您親自嘗試之前,您不會發現它。
結論
優化圖像是減少網站加載時間的眾多方法之一。但是,通常很難想象它對整體性能的影響有多大。無論如何,WordPress提供了大量可用于優化圖像的工具。如果您愿意,您甚至可以自動執行該過程,因此沒有理由避免它。
在我們的測試中,我們發現在大多數情況下,圖像壓縮可將加載時間提高10%左右。不過,這是規模的低端。在測試期間,我們看到了更好的結果,一直到24.29%的性能提升。您自己的結果很大程度上取決于您的網頁平均包含的圖片數量以及您使用的優化工具。