怎樣提高網頁加載速度

所周知，如果一個網站打開速度特別慢的話會流失很多用戶，因為用戶有很多選擇，沒必要去花時間等待你這個網站,導致網站流量大大下跌。所以提高網頁加載速度顯得尤其重要。

1.選擇可靠服務器或者虛擬主機為提高速度打基礎

2.開啟gzip功能對網站源文件進行壓縮

3.精簡網頁網頁源文件降低網頁大小

4.減少flash或者大圖片的使用

5.非必要js放到頁面底部延時加載

6.使用cdn對網站進行加速

7.js css文件外部調用減小文件大小

8.生成靜態文件提高加載速度

9.使用緩存技術提高加載速度

有的搜索引擎排名與網站的加載速度或多或少有些關系，而這次百度閃電算法來了，將網站首屏打開速度被列入優化排名行列，并明確指定打開時間為2秒，那么我們在如何做好網頁首屏的打開速度呢？

要做好網站速度優化，就必須要做好軟件和硬件兩個方面，從網站程序以及頁面設計本身解決網頁資源的加載，然后就是服務器本身需要有足夠的帶寬及處理資源，下面子凡就依次來與大家探討。

首先我們打開一個網頁看到的都只是前端，所以我們看到一個頁面背后的支持就是HTML代碼，其中就包含了各種網頁標簽，其中包括網站優化中的TKD，載入的渲染資源：javascript、css，已經頁面內容：圖片、音頻、視頻等。

一、代碼的足夠簡潔

減少代碼冗余，保持簡潔的代碼風格，這是作為一個網頁程序員的必修，能同樣實現一個效果的能用css就盡量不用js，能用兩行代碼解決問題的就別寫三行，這是最基礎的一點。

二、減少資源載入

這里子凡所說的資源主要是指js、css文件，因為我知道現在很多的前端開發設計人員喜歡用各種開源的特效或者別人做好的效果，其中包括為了給網站添加幾個圖標就引入一個開源的圖標字體庫，為了某個特效又在引入幾個js和css文件，這無形之中就為網站加重了“份量”。

三、圖片使用懶加載，視頻或音頻禁止自動播放

還記得子凡曾在淚雪博客寫過關于“圖片懶加載是否會影響網站SEO優化”的文章，其中就說到過如何合理的使用圖片懶加載技術提升用戶體驗而不影響網站優化，因為懶加載是為了防止頁面一被打開就立即載入圖片，這樣就會占用網絡帶寬，從而影響網站的打開速度以及網站首屏的請求，所以非正文圖片都是可以做懶加載的。

圖片是每個網站基本都少不了的東西，但是對于做視頻、音頻的站點來說，如果打開頁面就自動播放，占用的網站帶寬資源都更多了，所以這也是一個網站打開速度優化的一個小知識。

四、使用CDN加速靜態資源

關于使用CDN加速是否影響網站優化的文章子凡也曾有過討論，子凡對于網站整體做CDN加速還是有些不太認同，但是對于將網站靜態資源做CDN加速鏡像或者緩存優化卻是非常認同的，例如將網站的js、css、圖片等文件做CDN加速是更有利于整個網站的加載和打開速度的。

五、提升頁面渲染速度

將CSS樣式寫在頭部樣式表中，減少由CSS文件網絡請求造成的渲染阻塞。
將JavaScript放到文檔末尾，或使用async方式加載，避免JS執行阻塞渲染。
對非文字元素（如圖片，視頻）指定寬高，避免瀏覽器重排重繪。

六、服務器本身的速度優化

啟用服務器Gzip壓縮功能；
開啟數據庫查詢及頁面緩存功能（如果是直接生成靜態頁面的網站可忽略）；
升級或者保證服務器足夠的網絡帶寬；
開啟網站緩存，充分利用本地緩存。

同樣隨著網絡安全的重視程度，如果你的網站已經安裝SSL證書啟用了HTTPS協議，那么你可以開啟HTTPS/2或者SPDY這個功能，可以在某些程度上加速網站的打開。

總結

雖然百度“閃電算法”是正對移動搜索排名的算法，而子凡上述的所有知識點都是通用的，并沒有移動端或電腦端的區分，寫得不算非常詳細，子凡只是將這些非常容易出現的問題或者被忽略的問題按照自己的思路寫出來了，雖然語句都寫得非常簡單，但是要真的操作起來，如果你不懂網頁代碼或者服務器，操作起來可能也會是已經非常困難的事情。

最后最后子凡還想給自己的 Fanly MIP 主題打個廣告，如果你使用WordPress程序，并且重視百度這次的閃電算法，你可以使用子凡開發的這個MIP主題和插件，因為主題和插件都提供免費版本，所以大家可以非常方便的接入，當然你也可以支持子凡或者想要更好的服務可以購買我的收費版本。

好啦，如果你看這里，本文從標題到正文，再到最后的廣告你都已經閱讀完畢。see you。。。

除非注明，否則均為淚雪博客原創文章，轉載請以鏈接形式標明本文地址

本文鏈接：https://zhangzifan.com/website-speed-seo.html

么是CSS Sprite精靈？

是用于前端的一種圖片應用技術，通常情況，我們的開發的網頁或許有很多張圖片，假如在一個頁面上有50多張小圖片，這意味著瀏覽器要逐個下載50張圖片。Css Sprite它允許你將一個頁面涉及到的所有零星圖片都包含到一張圖中，這樣一來，當訪問頁面時，就只需要下載1張圖片了，這顯然大大減低了服務器請求壓力。

這個技術加速網頁響應速度，加速的關鍵，不是降低質量，而是減少個數。傳統切圖講究精細，圖片規格越小越好，重量越小越好，其實規格大小無所謂，計算機統一都按byte計算。客戶端每顯示一張圖片都會向服務器發送請求。所以，圖片越多請求次數越多，造成延遲的可能性也就越大。

什么是雪碧圖？

雪碧圖就是許多在網頁中需要的小圖片被合并到了一張圖片當中，那么這張圖片就叫雪碧圖，例如:

可以用來合并動畫幀等用途，最多常在網頁游戲中應用

如何毫不費力的制作雪碧圖并加以使用?

前往Css Sprites在線工具地址：https://www.toptal.com/developers/css/sprite-generator

將需要的圖片導入到在線網頁工具中，就會自動生成雪碧圖，如下圖

可以看到在線工具自動生成了雪碧圖你可以點擊下載，然后還生成了css樣式，會基本網頁的你就應該自然會用了

我們下載生成的雪碧圖得到如圖:

使用后的效果案例：

案例來自：http://mc.163.com/index.html 我的世界官網

并非本人開發，我只是拿這個作為例子。

Css Sprite原理：

CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字精確的定位出背景圖片的位置。