優化網站加載速度的14個技巧

本文是碼農網原創翻譯，轉載請看清文末的轉載要求，謝謝合做！

優化了加載速度的網站不只能夠提升其搜索引擎的排名，同時也能夠下降網站的跳出率，提升其轉換率，還能提供更好的終端用戶體驗，這是當今基於Web環境取得成功的關鍵。

下面我將介紹幾個優化網站加載網頁速度的簡單方法，一塊兒來看一下。

1.服務器響應時間

即便網站已經格外優化，可是除非服務器響應時間很是快，不然就不會有什麼大的效果。當涉及到提升網站的速度，服務器響應時間起着重要的做用。下面是一些提升服務器響應時間的小貼士。

• 有獨立的服務器，而不是選擇共享/託管服務器。
• 提升Web服務器的質量。
• 移除沒必要要的插件，只有那些必要的插件，才須要一直保持啓用狀態。

2.瀏覽器緩存

瀏覽器緩存能夠減小HTTP請求，從而反過來提升網站的加載速度。下面就是如何利用瀏覽器緩存的代碼示例：

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>

注意：若是過時時間與文件掛鉤，而此時文件中的內容須要更改的話，那必須先重命名文件，以便瀏覽器能夠獲取新添加的代碼。

3.gzip壓縮

gzip壓縮是一個壓縮實用程序，咱們能夠用它來快速加載網站。它的工做原理是在發送HTML和CSS文件到互聯網瀏覽器以前，先壓縮文件大小。容許mod_defalte模塊啓用Gzip壓縮，下面是如何使用它的代碼示例：

<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>

4.異步腳本

還有一個能夠提升網站頁面速度的超棒選擇就是異步加載腳本。如此一來網頁負載就並沒必要依賴於這些異步腳本，網站訪問者也再也不須要不得不按捺下性子，等待全部的腳本加載完以後才能呈現頁面。在異步模式中，腳本是在後臺下載的。一般，咱們會將第三方腳本做爲異步腳本，由於下載這些腳本時常會讓網站速度變得很是慢。

<script async src="http://www.yoursite.com/script.js"></script>

5.內容分發網絡（CDN）

內容分發網絡（CDN）是位於不一樣地理位置的服務器組成的網絡。每一個服務器都擁有全部網站的文件副本。要是有網站訪問者請求文件和網頁時，就能夠直接從就近的網站服務器發送過來（也能夠是從負載最小的服務器）。

6.優化JavaScript、HTML和CSS

優化JavaScript和CSS也能夠提升一個網站的網頁速度，並且這個方法很是簡單。優化JavaScript、HTML和CSS就是刪除全部沒必要要的空格和註釋，從而減少文件大小。下面是一些最小化JavaScript和CSS的流行工具，很是有用。

• CSS Minifier
• Avivo
• HTML Compressor

7.置於頂部的樣式表和底部的腳本

將樣式表放在頂部有助網站的迅速加載，由於這樣可使得網頁漸進式呈現。通常地，全部的互聯網瀏覽器都支持在給定時間內並行下載兩個組件（圖像、樣式和腳本）。可是一般而言，霸道的腳本會在並行下載時會阻止其餘的下載，直到腳本下載完畢。

8.避免阻塞型的JavaScript和CSS

在瀏覽器呈現網頁以前，它首先須要經過解析HTML標記語言來構建一個DOM樹。在此過程當中，若是遇到了腳本，此過程就會停止，轉而先執行腳本，完了纔會繼續原先的活動。所以建議避免阻塞型的JavaScript，尤爲是外部腳本。

阻塞型JavaScript還會致使網站的延遲。因此不妨推遲加載那些不重要的JavaScript，或者採用異步加載的方式。另外一種選擇是將這些HTML代碼內嵌到網站上，同時須要確保CSS的優化。

9.JavaScript的延遲解析

爲了加載網頁，瀏覽器必須解析全部的<script>標記內容，從而增長了網站的加載時間。經過延遲解析腳本，那麼就能夠減小初始網站的加載時間了。

10.啓用Keep Alive

當用戶經過瀏覽器請求網頁時，瀏覽器首先須要訪問HTML文件。而後它才能讀取這些文件，並請求與其餘資料相關聯（此處的資料能夠是CSS，JavaScript，也能夠是任何相關的圖像）。

若是「Keep Alive」選項被禁止，那麼下載網站的進程一般就會增長，從而拖累了網站速度。啓用KeepAlive的另外一個好處是，它能夠減小CPU的使用。

語法: KeepAlive On

11.圖像和文件格式

圖像對於任何網站都很是有價值，由於它能傳達一些強有力的信息給網站的訪問者。最多見的圖像格式是GIF、JPEG、PNG等。每種格式都有其長處和侷限。建議使用JPEG格式，而不是GIF和PNG圖像，除非圖像包含Alpha因子或者是透明的。

12.優化代碼：不使用內聯CSS

內聯了樣式就不能清清楚楚地將內容從設計中剝離開來。同時可能還會須要大量的維護工做，給網站管理員帶來各類不便，還會進一步增長網頁的大小。

13.文件分離

網站的文件能夠分爲CSS、JavaScripts和圖像。文件分離雖然並不能直接改善網站的加載時間。可是，這麼作能夠提升服務器的穩定性，特別是當網站流量忽然出現了尖峯的時候。子域也能夠用於託管文件，這樣能夠增長並行下載的數量。

14.儘可能減小HTTP請求

還有一種簡單的優化網頁速度的方法是，減小HTTP請求。當一個網站一會兒收到太多的HTTP請求，它的訪客就會有響應時間延遲的體驗，這不只增長了CPU使用率也增長了頁面的加載時間。那麼，又該如何減小HTTP請求？請見如下步驟。

• 減小網站上的對象數量。
• 最小化網站上的重定向數量。
• 使用CSS Sprites技術（只要你須要的那部分圖片內容）。
• 結合JavaScripts和CSS。

上述建議已被證實在優化網站的頁面加載速度上很是有效。總之，炫彩奪目的圖形，有趣的內容和更好的導航能夠幫助你得到更多的網站訪問者，但更快的網頁加載速度則能幫助你留住他們。