提升網(wǎng)站頁面打開速度的12個建議

時間：2022-05-29 07:45:02 | 來源：網(wǎng)絡(luò)營銷

時間：2022-05-29 07:45:02 來源：網(wǎng)絡(luò)營銷

我們知道用戶都喜歡瀏覽速度快的網(wǎng)站，不喜歡花費太多的時間等待網(wǎng)頁的打開，等待的時間過長，會讓用戶失去耐心，甚至煩躁時會直接關(guān)閉網(wǎng)頁，這樣就會失去一些潛在的客戶了。

其次，從SEO的角度來說，關(guān)鍵字的排名與網(wǎng)頁的打開速度也有關(guān)系，Google的Web搜索團隊曾在官方博客上宣布，將把網(wǎng)站的速度作為PR（PageRank）算法的一個因子，在所有因素都相等的情況下，速度快的網(wǎng)站將排在速度慢的網(wǎng)站前面。同時指出很多網(wǎng)站都沒有利用最佳的頁面優(yōu)化技術(shù)，頁面加載速度都存在很大缺陷。那么，我們該如何補救并提高網(wǎng)站頁面的加載速度呢？

1、合并Js文件和CSS

將JS代碼和CSS樣式分別合并到一個共享的文件，這樣不僅能簡化代碼，而且在執(zhí)行JS文件的時候，如果JS文件比較多，就需要進行多次“Get”請求，延長加載速度，將JS文件合并在一起后，自然就減少了Get請求次數(shù)，提高了加載速度（具體可查看億企邦的《提高網(wǎng)站速度的6種網(wǎng)站前端優(yōu)化方法》相關(guān)介紹）。

用戶打開用css設(shè)計的網(wǎng)頁，css一般被下載用戶本地計算機，不像html元素表現(xiàn)標簽，每次網(wǎng)站的網(wǎng)頁都要調(diào)用一次，使用css，只需要一次就好了！另外，css在某些地方可以替代圖片，這就是為什么現(xiàn)在提倡div+css的原因！

2、Sprites圖片技術(shù)

Spriting是一種網(wǎng)頁圖片應(yīng)用處理方式，它是將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，然后利用CSS技術(shù)展現(xiàn)出來。這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了，可以減少了整個網(wǎng)頁的圖片大小，并且利用CSSSprites能很好地減少網(wǎng)頁的http請求，從而大大的提高頁面的性能。

CSSSprites在國內(nèi)很多人叫css精靈，很早就有了，在很多大型網(wǎng)站都有用到，特別是一些所有頁面都存在的圖標用得比較多，很好的提升加載速度。

3、壓縮文本和圖片

壓縮技術(shù)如gzip可以有效減少頁面加載的時間。包括HTML，XML，JSON(JavaScript對象符號)，JavaScript和CSS等，壓縮率都可以在大小70%左右。

一般文本壓縮用得比較多，通常都是直接在空間開啟就行，而圖片的壓縮就比較隨意，很多都是直接上傳，其實還有很大的壓縮空間。

4、延遲顯示可見區(qū)域外的內(nèi)容

為了確保用戶可以更快地看見可見區(qū)域的網(wǎng)頁可以延遲加載或展現(xiàn)可見區(qū)域外的內(nèi)容，為了避免頁面變形，可以使用占位符標簽制定正確的高度和寬度。

比如：WP的jQueryImage LazyLoad插件就可以在用戶停留在第一屏的時候，不加載任何第一屏以下的圖片信息，只有當用戶把鼠標往下滾動的時候，這些圖片才開始加載。這樣很明顯提升可見區(qū)域的加載速度，提高用戶體驗。

5、確保功能圖片優(yōu)先加載

網(wǎng)站主要考慮可用性的重要性，一個功能按鈕要提前加載出來，用戶進入下載頁，一個只需要8s時間的下載花了5s在等待、尋找下載按鈕圖片，誰能忍受（對于其解決方法，大家可通過億企邦的《實現(xiàn)網(wǎng)頁圖片預(yù)加載效果的3種技術(shù)方法》相關(guān)介紹來詳細的了解）？

還有個問題需要注意的是：一些人經(jīng)常忘記寫圖片的長和寬了，這些標記是告訴瀏覽器打開圖片之前的尺寸，如果能提前設(shè)置好圖片的height和width，瀏覽器加載網(wǎng)頁時就會保留一塊區(qū)域，加快整個網(wǎng)頁顯示速度。 6、重新布置Call-to-Action按鈕

其實這個和上面一條是差不多的，都是從用戶體驗速度著手，跳過了網(wǎng)頁的整體加載速度。速度沒變，只是讓一些行為按鈕提前，Call-to-Action按鈕一般習慣設(shè)計在頁面底部，這樣的習慣對于用戶來說并不總是好的，購買用戶需要等到最下面加載出來才能點擊下一步操作。

可以調(diào)整CTA按鈕的位置或使用滑動的圖片按鈕，很多大型購物網(wǎng)站的加入購物車就是這種類型。

7、圖片格式優(yōu)化

不恰當?shù)膱D像格式是一種極為常見的減慢加載速度的罪魁禍首。正確的圖片格式可以讓圖片縮小數(shù)倍，如果保存為最佳格式，可以節(jié)省大量帶寬，減少處理時間時間，大大加快頁面加載速度，這是一種很常見的做法。

8、使用Progressive JPEGs

Progressive JPEGs圖片是JPEG格式的一個特殊變種，名為“高級JPEG”。在創(chuàng)建高級JPEG文件時，數(shù)據(jù)是這樣安排的：在裝入圖像時，開始只顯示一個模糊的圖像，隨著數(shù)據(jù)的裝入，圖像逐步變得清晰，它相當于交織的GIF格式的圖片。

高級JPEG主要是考慮到使用調(diào)制解調(diào)器的慢速網(wǎng)絡(luò)而設(shè)計的，快速網(wǎng)絡(luò)的使用者通常不會體會到它和正常JPEG格式圖片的區(qū)別。對于網(wǎng)速比較慢的用戶，這無疑有很好的體驗。

9、精簡代碼

這個可以說是最直接的一個方法，也是用得比較多的，對網(wǎng)頁代碼進行瘦身，刪除不必要的沉冗代碼，比如不必要的空格、換行符、注釋等，包括JS代碼中的無用代碼也需要清除。

在同等網(wǎng)絡(luò)環(huán)境下，頁面越小自然下載時間越快，所以在合理范圍內(nèi)減少頁面大小是可以優(yōu)化下載速度的。而頁面大小主要是由HTML的代碼量來決定的（當然也可能包括一些css或者js的代碼，不過主體還是HTML代碼），要想減小頁面的大小，就得根據(jù)W3C的標準來優(yōu)化HTML代碼結(jié)構(gòu)，去除一些垃圾無意義的代碼。

其中對于注釋代碼的清除可能有些人存在誤區(qū)，甚至有的在里面堆砌關(guān)鍵詞。

10、延遲加載和執(zhí)行非必要腳本

網(wǎng)頁中有很多腳本是在頁面完全加載完前都不需要執(zhí)行的，可以延遲加載和執(zhí)行非必要腳本。這些腳本可以在onload事件之后執(zhí)行，避免對網(wǎng)頁上重要內(nèi)容的呈現(xiàn)造成影響。這些腳本可能是你自己網(wǎng)頁的甲苯，往往更多的是一些第三方腳本，這樣的有很多，比如：評論、廣告、智能推薦、百度云圖、分享和點擊次數(shù)統(tǒng)計等等（具體可查看億企邦的《如何解決點擊次數(shù)影響網(wǎng)頁加載速度的問題》所提供的解決方法），這些完全可以等主體內(nèi)容加載完后再執(zhí)行。

11、使用AJAX

對于網(wǎng)頁的打開，其實是很復(fù)雜的過程。從網(wǎng)頁的申請打開，到web服務(wù)器的響應(yīng)，編譯等動作，然后發(fā)回給瀏覽器，才顯示我們面前的文字和圖片，多媒體文件等。所以我要盡量減少響應(yīng)次數(shù)，現(xiàn)在ajax在這方面就運用的不錯。當然，一個靜態(tài)頁面就例外了，靜態(tài)頁面多注意圖片大小和網(wǎng)頁設(shè)計上就行了。

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)頁面。

12、自動化的頁面性能優(yōu)化

自動化的頁面性能優(yōu)化也就是借助工具了，網(wǎng)站提速工具有很多，相信大家在網(wǎng)上也看到了很多，具體的效果也很難斷定，所以這里也就不多說了。

億企邦點評：

重視網(wǎng)站的用戶體驗可以說是互聯(lián)網(wǎng)發(fā)展由技術(shù)為中心到以用戶為中心的一種轉(zhuǎn)變，主流的搜索引擎都將網(wǎng)站的用戶體驗作為評價網(wǎng)站的重要標準，畢竟搜索引擎蜘蛛也只是網(wǎng)站的一個普通用戶，要想在搜索引擎獲得好的評價，就不得不重視用戶體驗的優(yōu)化，而網(wǎng)站的加載速度則是用戶體驗的首要條件。