11個頁面加載速度優(yōu)化的建議
1、合并網(wǎng)頁中Js文件和CSS
將JS代碼和CSS樣式分別合并到一個共享的文件,這樣不僅能簡化代碼,而且在執(zhí)行JS文件的時候,如果JS文件比較多,就需要進行多次“Get”請求,延長加載速度,將JS文件合并在一起后,自然就減少了Get請求次數(shù),提高了加載速度。
2、使用Sprites圖片技術(shù)
Spriting是一種網(wǎng)頁圖片應(yīng)用處理方式,它是將一個頁面涉及到的所有零星圖片都包含到一張大圖中去,然后利用CSS技術(shù)展現(xiàn)出來。這樣一來,當(dāng)訪問該頁面時,載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了,可以減少了整個網(wǎng)頁的圖片大小,并且利用CSSSprites能很好地減少網(wǎng)頁的http請求,從而大大的提高頁面的性能。
3、壓縮文本和圖片
壓縮技術(shù)如gzip可以有效減少頁面加載的時間。包括HTML,XML,JSON(JavaScript對象符號),JavaScript和CSS等,壓縮率都可以在大小70%左右。文本壓縮用得比較多,一般直接在空間開啟就行,而圖片的壓縮就很多的處理者比較隨意,很多都是直接上傳,其實這樣不好,一張未經(jīng)壓縮的圖片和壓縮到80%品質(zhì)的圖片,在視覺上區(qū)別不大,但文件大小卻相差4-5倍,所以為了提高加載速度和降低存儲空間的占用,圖片還是要處理的好。
4、延遲顯示可見區(qū)域外的內(nèi)容
為了確保用戶可以更快地看見可見區(qū)域的網(wǎng)頁可以延遲加載或展現(xiàn)可見區(qū)域外的內(nèi)容,為了避免頁面變形,可以使用占位符標簽制定正確的高度和寬度。比如WP的jQueryImage LazyLoad插件就可以在用戶停留在第一屏的時候,不加載任何第一屏以下的圖片信息,只有當(dāng)用戶把鼠標往下滾動的時候,這些圖片才開始加載。這樣很明顯提升可見區(qū)域的加載速度,提高用戶體驗。
5、確保功能圖片優(yōu)先加載
網(wǎng)站主要考慮可用性的重要性,一個功能按鈕要提前加載出來,用戶進入下載頁,一個只需要8s時間的下載花了5s在等待、尋找下載按鈕圖片,誰能忍受?
6、重新布置Call-to-Action按鈕
其實這個和上面一條是差不多的,都是從用戶體驗速度著手,跳過了網(wǎng)頁的整體加載速度。速度沒變,只是讓一些行為按鈕提前,Call-to-Action按鈕一般習(xí)慣設(shè)計在頁面底部,這樣的習(xí)慣對于用戶來說并不總是好的,購買用戶需要等到最下面加載出來才能點擊下一步操作??梢哉{(diào)整CTA按鈕的位置或使用滑動的圖片按鈕。很多大型購物網(wǎng)站的加入購物車就是這種類型。
7、圖片格式優(yōu)化
不恰當(dāng)?shù)膱D像格式是一種極為常見的減慢加載速度的罪魁禍首。正確的圖片格式可以讓圖片縮小數(shù)倍,如果保存為最佳格式。可以節(jié)省大量帶寬,減少處理時間時間,大大加快頁面加載速度,這是一種很常見的做法。一般色彩比較豐富的圖片采用JPG格式(80%)的品質(zhì),象圖標按鈕,如果是單色系,可以采用GIF或PNG。如果有漸變的圖標和按鈕,則需要保存為PNG,這時可以保存為8位,而不需要保存24位。
8、使用 Progressive JPEGs
ProgressiveJPEGs圖片是JPEG格式的一個特殊變種,名為“高級JPEG”。在創(chuàng)建高級JPEG文件時,數(shù)據(jù)是這樣安排的:在裝入圖像時,開始只顯示一個模糊的圖像,隨著數(shù)據(jù)的裝入,圖像逐步變得清晰。它相當(dāng)于交織的GIF格式的圖片。高級JPEG主要是考慮到使用調(diào)制解調(diào)器的慢速網(wǎng)絡(luò)而設(shè)計的,快速網(wǎng)絡(luò)的使用者通常不會體會到它和正常JPEG格式圖片的區(qū)別。對于網(wǎng)速比較慢的用戶,這無疑有很好的體驗。
9、精簡代碼
這個可以說是最直接的一個方法,也是用得比較多的,對網(wǎng)頁代碼進行瘦身,刪除不必要的沉冗代碼,比如不必要的空格、換行符、注釋等,包括JS代碼中的無用代碼也需要清除。其中對于注釋代碼的清除可能有些人存在誤區(qū),甚至有的在里面堆砌關(guān)鍵詞。
10、延遲加載和執(zhí)行非必要腳本
網(wǎng)頁中有很多腳本是在頁面完全加載完前都不需要執(zhí)行的,可以延遲加載和執(zhí)行非必要腳本。這些腳本可以在onload事件之后執(zhí)行,避免對網(wǎng)頁上重要內(nèi)容的呈現(xiàn)造成影響。這些腳本可能是你自己網(wǎng)頁的甲苯,往往更多的是一些第三方腳本,這樣的有很多,比如評論、廣告、智能推薦、百度云圖、分享等等,這些完全可以等主體內(nèi)容加載完后再執(zhí)行。
11、使用AJAX
AJAX即“Asynchronous Javascript +XML“,是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。通過在后臺與服務(wù)器進行少量數(shù)據(jù)交換,AJAX可以使網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下,對網(wǎng)頁的某部分進行更新。傳統(tǒng)的網(wǎng)頁(不使用AJAX)如果需要更新內(nèi)容,必須重載整個網(wǎng)頁面。
- 上一篇:新手選擇CMS的幾點考慮
- 下一篇:企業(yè)網(wǎng)站更新中注意的問題