提高網站頁面打開速度的12個建議

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

其次，從SEO的角度來講，關鍵字的排名與網頁的打開速度也有關係，Google的Web搜索團隊曾在官方博客上宣佈，將把網站的速度做爲PR（PageRank）算法的一個因子，在全部因素都相等的狀況下，速度快的網站將排在速度慢的網站前面。同時指出不少網站都沒有利用最佳的頁面優化技術，頁面加載速度都存在很大缺陷。那麼，咱們該如何補救並提升網站頁面的加載速度呢？

一、合併Js文件和CSS

將JS代碼和CSS樣式分別合併到一個共享的文件，這樣不只能簡化代碼，並且在執行JS文件的時候，若是JS文件比較多，就須要進行屢次「Get」請求，延長加載速度，將JS文件合併在一塊兒後，天然就減小了Get請求次數，提升了加載速度（具體可查看馬海祥博客的《提升網站速度的6種網站前端優化方法》相關介紹）。

用戶打開用css設計的網頁，css通常被下載用戶本地計算機，不像html元素表現標籤，每次網站的網頁都要調用一次，使用css，只須要一次就行了！另外，css在某些地方能夠替代圖片，這就是爲何如今提倡div+css的緣由！

二、Sprites圖片技術

Spriting是一種網頁圖片應用處理方式，它是將一個頁面涉及到的全部零星圖片都包含到一張大圖中去，而後利用CSS技術展示出來。這樣一來，當訪問該頁面時，載入的圖片就不會像之前那樣一幅一幅地慢慢顯示出來了，能夠減小了整個網頁的圖片大小，而且利用CSSSprites能很好地減小網頁的http請求，從而大大的提升頁面的性能。

CSSSprites在國內不少人叫css精靈，很早就有了，在不少大型網站都有用到，特別是一些全部頁面都存在的圖標用得比較多，很好的提高加載速度。

三、壓縮文本和圖片

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

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

四、延遲顯示可見區域外的內容

爲了確保用戶能夠更快地看見可見區域的網頁能夠延遲加載或展示可見區域外的內容，爲了不頁面變形，可使用佔位符標籤制定正確的高度和寬度。

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

五、確保功能圖片優先加載

網站主要考慮可用性的重要性，一個功能按鈕要提早加載出來，用戶進入下載頁，一個只須要8s時間的下載花了5s在等待、尋找下載按鈕圖片，誰能忍受（對於其解決方法，你們可經過馬海祥博客的《實現網頁圖片預加載效果的3種技術方法》相關介紹來詳細的瞭解）？

還有個問題須要注意的是：一些人常常忘記寫圖片的長和寬了，這些標記是告訴瀏覽器打開圖片以前的尺寸，若是能提早設置好圖片的height和width，瀏覽器加載網頁時就會保留一塊區域，加快整個網頁顯示速度。

六、從新佈置Call-to-Action按鈕

其實這個和上面一條是差很少的，都是從用戶體驗速度着手，跳過了網頁的總體加載速度。速度沒變，只是讓一些行爲按鈕提早，Call-to-Action按鈕通常習慣設計在頁面底部，這樣的習慣對於用戶來講並不老是好的，購買用戶須要等到最下面加載出來才能點擊下一步操做。

能夠調整CTA按鈕的位置或使用滑動的圖片按鈕，不少大型購物網站的加入購物車就是這種類型。

七、圖片格式優化

不恰當的圖像格式是一種極爲常見的減慢加載速度的罪魁禍首。正確的圖片格式可讓圖片縮小數倍，若是保存爲最佳格式，能夠節省大量帶寬，減小處理時間時間，大大加快頁面加載速度，這是一種很常見的作法。

八、使用Progressive JPEGs

Progressive JPEGs圖片是JPEG格式的一個特殊變種，名爲「高級JPEG」。在建立高級JPEG文件時，數據是這樣安排的：在裝入圖像時，開始只顯示一個模糊的圖像，隨着數據的裝入，圖像逐步變得清晰，它至關於交織的GIF格式的圖片。

高級JPEG主要是考慮到使用調制解調器的慢速網絡而設計的，快速網絡的使用者一般不會體會到它和正常JPEG格式圖片的區別。對於網速比較慢的用戶，這無疑有很好的體驗。

九、精簡代碼

這個能夠說是最直接的一個方法，也是用得比較多的，對網頁代碼進行瘦身，刪除沒必要要的沉冗代碼，好比沒必要要的空格、換行符、註釋等，包括JS代碼中的無用代碼也須要清除。

在同等網絡環境下，頁面越小天然下載時間越快，因此在合理範圍內減小頁面大小是能夠優化下載速度的。而頁面大小主要是由HTML的代碼量來決定的（固然也可能包括一些css或者js的代碼，不過主體仍是HTML代碼），要想減少頁面的大小，就得根據W3C的標準來優化HTML代碼結構，去除一些垃圾無心義的代碼。

其中對於註釋代碼的清除可能有些人存在誤區，甚至有的在裏面堆砌關鍵詞。

十、延遲加載和執行非必要腳本

網頁中有不少腳本是在頁面徹底加載完前都不須要執行的，能夠延遲加載和執行非必要腳本。這些腳本能夠在onload事件以後執行，避免對網頁上重要內容的呈現形成影響。這些腳本多是你本身網頁的甲苯，每每更多的是一些第三方腳本，這樣的有不少，好比：評論、廣告、智能推薦、百度雲圖、分享和點擊次數統計等等（具體可查看馬海祥博客的《如何解決點擊次數影響網頁加載速度的問題》所提供的解決方法），這些徹底能夠等主體內容加載完後再執行。

十一、使用AJAX

對於網頁的打開，實際上是很複雜的過程。從網頁的申請打開，到web服務器的響應，編譯等動做，而後發回給瀏覽器，才顯示咱們面前的文字和圖片，多媒體文件等。因此我要儘可能減小響應次數，如今ajax在這方面就運用的不錯。固然，一個靜態頁面就例外了，靜態頁面多注意圖片大小和網頁設計上就好了。

AJAX即「Asynchronous Javascript +XML「，是指一種建立交互式網頁應用的網頁開發技術。經過在後臺與服務器進行少許數據交換，AJAX可使網頁實現異步更新。

這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。傳統的網頁(不使用AJAX)若是須要更新內容，必須重載整個網頁面。

十二、自動化的頁面性能優化

自動化的頁面性能優化也就是藉助工具了，網站提速工具備不少，相信你們在網上也看到了不少，具體的效果也很難判定，因此這裏也就很少說了。