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