現(xiàn)在很多的網(wǎng)站都會(huì)有各種高清無(wú)碼的圖片,但是一個(gè)網(wǎng)頁(yè)的圖片過(guò)多往往因?yàn)閳D片的加載而導(dǎo)致網(wǎng)站打開(kāi)速度過(guò)慢,這對(duì)于訪客的用戶體驗(yàn)而言是一個(gè)負(fù)能量,當(dāng)然如果你是高富帥你可以說(shuō),“這算啥,哥提高下服務(wù)器帶寬那效果還不是一樣一樣的?”。但是對(duì)于大多數(shù)普通站長(zhǎng)而言,我們?nèi)绾卧谫Y源有限的情況下進(jìn)行合理的優(yōu)化,提高網(wǎng)頁(yè)的加載速度呢?MsX北京網(wǎng)站設(shè)計(jì)開(kāi)發(fā),小程序開(kāi)發(fā),公眾號(hào),微信開(kāi)發(fā)-云智互聯(lián)
提高網(wǎng)站頁(yè)面的加載速度的方法其實(shí)有很多,那本文主要從下面四個(gè)角度進(jìn)行討論,分享常用的提高網(wǎng)頁(yè)加載速度的技巧:MsX北京網(wǎng)站設(shè)計(jì)開(kāi)發(fā),小程序開(kāi)發(fā),公眾號(hào),微信開(kāi)發(fā)-云智互聯(lián)
一、網(wǎng)頁(yè)壓縮技術(shù)MsX北京網(wǎng)站設(shè)計(jì)開(kāi)發(fā),小程序開(kāi)發(fā),公眾號(hào),微信開(kāi)發(fā)-云智互聯(lián)
對(duì)于網(wǎng)頁(yè)壓縮而言,相信各位站長(zhǎng)都比較熟悉,主要是啟用服務(wù)器Gzip,對(duì)頁(yè)面Gzip壓縮,減少元素的體積,從而減少數(shù)據(jù)的傳輸,進(jìn)而提高網(wǎng)頁(yè)的加載速度。MsX北京網(wǎng)站設(shè)計(jì)開(kāi)發(fā),小程序開(kāi)發(fā),公眾號(hào),微信開(kāi)發(fā)-云智互聯(lián)
二、CSS優(yōu)化MsX北京網(wǎng)站設(shè)計(jì)開(kāi)發(fā),小程序開(kāi)發(fā),公眾號(hào),微信開(kāi)發(fā)-云智互聯(lián)
(1)css位置MsX北京網(wǎng)站設(shè)計(jì)開(kāi)發(fā),小程序開(kāi)發(fā),公眾號(hào),微信開(kāi)發(fā)-云智互聯(lián)
CSS說(shuō)明如果出現(xiàn)在后,頁(yè)面需要重新渲染,打開(kāi)速度受到影響。所有css定義代碼的位置要放到網(wǎng)站之前。MsX北京網(wǎng)站設(shè)計(jì)開(kāi)發(fā),小程序開(kāi)發(fā),公眾號(hào),微信開(kāi)發(fā)-云智互聯(lián)
(2)css sprite技術(shù)MsX北京網(wǎng)站設(shè)計(jì)開(kāi)發(fā),小程序開(kāi)發(fā),公眾號(hào),微信開(kāi)發(fā)-云智互聯(lián)
網(wǎng)站上的一些圖片可以采用css sprite技術(shù)進(jìn)行合并,減少加載請(qǐng)求次數(shù),從而提高網(wǎng)頁(yè)的加載速度。MsX北京網(wǎng)站設(shè)計(jì)開(kāi)發(fā),小程序開(kāi)發(fā),公眾號(hào),微信開(kāi)發(fā)-云智互聯(lián)
(3)css代碼優(yōu)化MsX北京網(wǎng)站設(shè)計(jì)開(kāi)發(fā),小程序開(kāi)發(fā),公眾號(hào),微信開(kāi)發(fā)-云智互聯(lián)
通過(guò)對(duì)css代碼屬性的簡(jiǎn)寫、移除多余的結(jié)構(gòu)(frameworks)和重設(shè)(resets)等一系列的方法和技巧來(lái)簡(jiǎn)化css代碼,減小css文件的大小。MsX北京網(wǎng)站設(shè)計(jì)開(kāi)發(fā),小程序開(kāi)發(fā),公眾號(hào),微信開(kāi)發(fā)-云智互聯(lián)
三、JS優(yōu)化MsX北京網(wǎng)站設(shè)計(jì)開(kāi)發(fā),小程序開(kāi)發(fā),公眾號(hào),微信開(kāi)發(fā)-云智互聯(lián)
(1)JS位置MsX北京網(wǎng)站設(shè)計(jì)開(kāi)發(fā),小程序開(kāi)發(fā),公眾號(hào),微信開(kāi)發(fā)-云智互聯(lián)
網(wǎng)頁(yè)代碼中對(duì)js進(jìn)行優(yōu)化的時(shí)候,建議將JS放在頁(yè)面后,這樣可以加快頁(yè)面打開(kāi)速度。MsX北京網(wǎng)站設(shè)計(jì)開(kāi)發(fā),小程序開(kāi)發(fā),公眾號(hào),微信開(kāi)發(fā)-云智互聯(lián)
(2)合并JSMsX北京網(wǎng)站設(shè)計(jì)開(kāi)發(fā),小程序開(kāi)發(fā),公眾號(hào),微信開(kāi)發(fā)-云智互聯(lián)
合并相同域名下的js,通過(guò)減少網(wǎng)絡(luò)連接次數(shù)從而提高網(wǎng)頁(yè)的打開(kāi)速度。MsX北京網(wǎng)站設(shè)計(jì)開(kāi)發(fā),小程序開(kāi)發(fā),公眾號(hào),微信開(kāi)發(fā)-云智互聯(lián)
(3)LazyLoad(延遲加載)技術(shù)MsX北京網(wǎng)站設(shè)計(jì)開(kāi)發(fā),小程序開(kāi)發(fā),公眾號(hào),微信開(kāi)發(fā)-云智互聯(lián)
Lazy Load是一個(gè)用JavaScript 編寫的 jQuery 插件,它可以延遲加載長(zhǎng)頁(yè)面中的圖片。在瀏覽器可視區(qū)域外的圖片不會(huì)被載入,直到用戶將頁(yè)面滾動(dòng)到它們所在的位置。例如本人的破折君博客就采用這個(gè)圖片延遲加載功能。MsX北京網(wǎng)站設(shè)計(jì)開(kāi)發(fā),小程序開(kāi)發(fā),公眾號(hào),微信開(kāi)發(fā)-云智互聯(lián)
四、緩存靜態(tài)資源MsX北京網(wǎng)站設(shè)計(jì)開(kāi)發(fā),小程序開(kāi)發(fā),公眾號(hào),微信開(kāi)發(fā)-云智互聯(lián)
通過(guò)設(shè)置瀏覽器緩存,將css、js等不太經(jīng)常更新的文件緩存在瀏覽器端,這樣同一訪客再次訪問(wèn)你的網(wǎng)站的時(shí)候,瀏覽器就可以從瀏覽器的緩存中獲取css、js等,而不必每次都從你的服務(wù)器讀取,這樣在一定程度上加快了網(wǎng)站的打開(kāi)速度,又可以節(jié)約你的服務(wù)器流量。MsX北京網(wǎng)站設(shè)計(jì)開(kāi)發(fā),小程序開(kāi)發(fā),公眾號(hào),微信開(kāi)發(fā)-云智互聯(lián)
原創(chuàng)不易,未經(jīng)授權(quán),嚴(yán)禁轉(zhuǎn)載
原文地址:http://www.mpian.cn/web/seo/2014-04-30/215.html