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