最佳化網站載入速度的14個技巧

標籤：

本文為轉載，原作者著作權聲明在最下方。個人覺得總結的很好

最佳化了載入速度的網站不僅可以提高其搜尋引擎的排名，同時也可以降低網站的跳出率，提高其轉換率，還能提供更好的終端使用者體驗，這是當今基於Web環境取得成功的關鍵。

下面我將介紹幾個最佳化網站載入網頁速度的簡單方法，一起來看一下。

1.伺服器回應時間

即使網站已經格外最佳化，但是除非伺服器回應時間非常快，否則就不會有什麼大的效果。當涉及到提高網站的速度，伺服器回應時間起著重要的作用。下面是一些提高伺服器回應時間的小貼士。

●有獨立的伺服器，而不是選擇共用/託管伺服器。

●提高Web伺服器的品質。

●移除不必要的外掛程式，只有那些必要的外掛程式，才需要一直保持啟用狀態。

2.瀏覽器緩衝

瀏覽器緩衝可以減少HTTP請求，從而反過來提高網站的載入速度。下面就是如何利用瀏覽器緩衝的程式碼範例：

<IfModule mod_expires.c>ExpiresActive OnExpiresByType 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>

View Code

注意：如果到期時間與檔案掛鈎，而此時檔案中的內容需要更改的話，那必須先重新命名檔案，以便瀏覽器可以擷取新添加的代碼。

3.gzip壓縮

gzip壓縮是一個壓縮公用程式，我們可以用它來快速載入網站。它的工作原理是在發送HTML和CSS檔案到互連網瀏覽器之前，先壓縮檔大小。允許mod_defalte模組啟用Gzip壓縮，下面是如何使用它的程式碼範例：

<IfModule mod_deflate.c># Compress HTML, CSS, JavaScript, Text, XMLAddOutputFilterByType DEFLATE application/javascriptAddOutputFilterByType DEFLATE application/xhtml+xmlAddOutputFilterByType DEFLATE application/xmlAddOutputFilterByType DEFLATE text/cssAddOutputFilterByType DEFLATE text/htmlAddOutputFilterByType DEFLATE text/javascriptAddOutputFilterByType DEFLATE text/plainAddOutputFilterByType DEFLATE text/xml# Remove browser bugs (only needed for really old browsers)BrowserMatch ^Mozilla/4 gzip-only-text/htmlBrowserMatch ^Mozilla/4\.0[678] no-gzipBrowserMatch \bMSIE !no-gzip !gzip-only-text/htmlHeader append Vary User-Agent</IfModule>

View Code

4.非同步指令碼

還有一個可以提高網站頁面速度的超棒選擇就是非同步載入指令碼。如此一來網頁負載就並不必依賴於這些非同步指令碼，網站訪問者也不再需要不得不按捺下性子，等待所有的指令碼載入完之後才能呈現頁面。在非同步模式中，指令碼是在後台下載的。通常，我們會將第三方指令碼作為非同步指令碼，因為下載這些指令碼時常會讓網站速度變得非常慢。

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的使用。

11.映像和檔案格式

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

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

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

13.檔案分離

網站的檔案可以分為CSS、JavaScripts和映像。檔案分離雖然並不能直接改善網站的載入時間。但是，這麼做可以提高伺服器的穩定性，特別是當網站流量突然出現了尖峰的時候。子域也可以用於託管檔案，這樣可以增加並行下載的數量。

14.盡量減少HTTP請求

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

●減少網站上的對象數量。

●最小化網站上的重新導向數量。

●使用CSS Sprites技術（只要你需要的那部分圖片內容）。

●結合JavaScripts和CSS。

 

著作權聲明：本文是碼農網原創翻譯，已按轉載要求註明資訊。譯文連結：http://www.codeceo.com/article/14-ways-website-page-speed.html英文原文：13+ Ways to Optimize Your Website’s Page Speed翻解碼農網 – 小峰

 

上述建議已被證明在最佳化網站的頁面載入速度上非常有效。總之，炫彩奪目的圖形，有趣的內容和更好的導航可以協助你獲得更多的網站訪問者，但更快的網頁載入速度則能協助你留住他們。

 

最佳化網站載入速度的14個技巧