快速的頁面載入對提升搜尋引擎排名、網站轉化率和整體的使用者體驗是非常重要的。網站頁面的載入速度也是衡量網站效能的一個重要因素。

如果網站不是以最好的效能在執行，遲緩的載入會讓你在低的排名和搜尋流量上花費更大的代價。頁面的載入速度會對使用者的行為和轉化率產生很大的影響。

那麼？有哪些簡單的方式可以優化載入速度呢？

1、圖片優化

首先，你需要優化你網站上的圖片，來獲得絲毫加速網站的機會。從原圖上移除額外的註解、不必要的空間和無用的顏色，將圖片儲存為JPEG格式，因為它即使佔用空間小，也能保證圖片的高質量。

對於WordPress網站，建議使用smush.it外掛來自動優化網站的圖片。如果圖片是PNG格式，可以使用

2、開啟GZip壓縮

GZip壓縮聽起來很複雜，但實際上很簡單，被用於減少HTTP請求的大小來縮短響應時間。因為這允許你傳送GZip壓縮檔案而不是HTML檔案給瀏覽器，它將縮短頁面等待時間和載入時間。對於Apache伺服器，可以將下面的程式碼新增到.htaccess檔案中來開啟GZip壓縮。

<code class="hljs parser3 has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="xml" style="box-sizing: border-box;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ifModule</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">mod_gzip.c</span>></span>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler </span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">^cgi-script</span><span class="xml" style="box-sizing: border-box;">$
mod_gzip_item_include mime </span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">^text</span><span class="xml" style="box-sizing: border-box;">/.*
mod_gzip_item_include mime </span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">^application</span><span class="xml" style="box-sizing: border-box;">/x-javascript.*
mod_gzip_item_exclude mime </span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">^image</span><span class="xml" style="box-sizing: border-box;">/.*
mod_gzip_item_exclude rspheader </span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">^Content-Encoding:.</span><span class="xml" style="box-sizing: border-box;">*gzip.*
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ifModule</span>></span></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li></ul>

如果上面的程式碼沒有開啟GZip壓縮，則刪除，使用下面的程式碼：

<code class="hljs applescript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"># compress text, html, javascript, css, xml:</span>
AddOutputFilterByType DEFLATE <span class="hljs-type" style="box-sizing: border-box;">text</span>/plain
AddOutputFilterByType DEFLATE <span class="hljs-type" style="box-sizing: border-box;">text</span>/html
AddOutputFilterByType DEFLATE <span class="hljs-type" style="box-sizing: border-box;">text</span>/xml
AddOutputFilterByType DEFLATE <span class="hljs-type" style="box-sizing: border-box;">text</span>/css
AddOutputFilterByType DEFLATE <span class="hljs-type" style="box-sizing: border-box;">application</span>/xml
AddOutputFilterByType DEFLATE <span class="hljs-type" style="box-sizing: border-box;">application</span>/xhtml+xml
AddOutputFilterByType DEFLATE <span class="hljs-type" style="box-sizing: border-box;">application</span>/rss+xml
AddOutputFilterByType DEFLATE <span class="hljs-type" style="box-sizing: border-box;">application</span>/javascript
AddOutputFilterByType DEFLATE <span class="hljs-type" style="box-sizing: border-box;">application</span>/x-javascript
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"># Or, compress certain file types by extension:</span>
<files *.html>
SetOutputFilter DEFLATE
</files></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li></ul>

或者在HTML/PHP檔案的頂部新增下列的PHP程式碼：

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="php" style="box-sizing: border-box;"><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;"><?php</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (substr_count(<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$_SERVER</span>[<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'HTTP_ACCEPT_ENCODING'</span>], <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'gzip'</span>)) ob_start(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"ob_gzhandler"</span>); <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span> ob_start(); <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">?></span></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

3、伺服器響應時間

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

1. 有獨立的伺服器，而不是選擇共享/託管伺服器。
2. 提高Web伺服器的質量。
3. 移除不必要的外掛，只有那些必要的外掛，才需要一直保持啟用狀態。

4、瀏覽器快取

瀏覽器具有快取的功能，可以儲存指定的檔案，減少HTTP請求，從而提高網站的載入速度。你可以通過在.htaccess檔案中設定expires頭來開啟瀏覽器快取，利用下面的程式碼可以實現：

<code class="hljs applescript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">## EXPIRES CACHING ##</span>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"access plus 1 year"</span>
ExpiresByType image/jpeg <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"access plus 1 year"</span>
ExpiresByType image/gif <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"access plus 1 year"</span>
ExpiresByType image/png <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"access plus 1 year"</span>
ExpiresByType <span class="hljs-type" style="box-sizing: border-box;">text</span>/css <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"access plus 1 month"</span>
ExpiresByType <span class="hljs-type" style="box-sizing: border-box;">application</span>/pdf <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"access plus 1 month"</span>
ExpiresByType <span class="hljs-type" style="box-sizing: border-box;">text</span>/x-javascript <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"access plus 1 month"</span>
ExpiresByType <span class="hljs-type" style="box-sizing: border-box;">application</span>/x-shockwave-flash <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"access plus 1 month"</span>
ExpiresByType image/x-icon <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"access plus 1 year"</span>
ExpiresDefault <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"access plus 2 days"</span>
</IfModule>
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">## EXPIRES CACHING ##</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li></ul>

注意：如果過期時間與檔案掛鉤，而此時檔案中的內容需要更改的話，那必須先重新命名檔案，以便瀏覽器可以獲取新新增的程式碼。

5、開啟長連線（Keep-Alive）

Keep-Alive頭對縮短瀏覽器和伺服器之間的分散式請求的潛伏期是非常重要的。當用戶通過瀏覽器請求網頁時，瀏覽器會讀取伺服器傳送的特定的HTML檔案，如果請求的頁面中包含了外部的CSS和JavaScript檔案，瀏覽器會再次傳送獨立的請求來獲取這些檔案。正如你想的，這會延長頁面的載入時間。

使用Keep-Alive頭可以一直保持連線，直到瀏覽器從伺服器獲取到所有與這個頁面相關的資源。在.htaccess檔案中加入下面的程式碼可以開啟這個功能：

<code class="hljs bash has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>Module mod_headers.c> Header <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">set</span> Connection keep-alive </<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>Module></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

6、使用CDN

內容分發網路（CDN）是位於不同地理位置的伺服器組成的網路。每個伺服器都擁有所有網站的檔案副本。當用戶請求檔案和網頁時，就可以直接從就近的網站伺服器獲取相應資源（也可以是從負載最小的伺服器）。你可以使用Amazon cloud front 或者MaxCDN為網站開啟CDN加速。

7、壓縮CSS、JavaScript和HTML檔案

通過刪除所有不必要的空格和註釋，從而減小檔案大小，提高頁面的載入速度。下面是一些優化CSS、JavaScript和HTML檔案的流行工具，非常有用。

8、避免重定向

重定向是對網站訪問者的一種極大的刺激。就類似你去一個朋友家，卻發現你朋友早已經搬到三個街區遠的地方了。重定向會消耗額外的時間，降低載入速度。

9、指定字符集

指定字符集是加速瀏覽器渲染頁面的另一個有用的技巧。下面的程式碼就能輕鬆實現：

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">meta</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">http-equiv</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"Content-Type"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">content</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"text/html; charset=utf-8"</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

10、避免錯誤請求

當用戶在網站上搜索時，收到404或410錯誤是比較失望的。錯誤請求會對網站的頁面載入速度產生不利影響。因此，建議你無論如何都要避免錯誤請求。Check My Link 能幫你找出404連結，清除它們，改善使用者體驗。

11、丟棄跟蹤程式碼、嵌入視訊的元素和分享按鈕

很多網站管理員認為使用多個跟蹤程式碼提供嵌入和分享按鈕會帶給使用者更好的體驗，實際上這隻會給網站增加更多的服務請求。例如，一個iframe會請求一個新頁面，這會自動降低網站的載入速度。所以，丟棄這些跟蹤程式碼，可以提高網站載入速度，提升使用者體驗。

12、非同步指令碼

還有一個可以提高網站頁面速度的超棒選擇就是非同步載入指令碼。如此一來網頁負載就並不必依賴於這些非同步指令碼。在非同步模式中，指令碼是在後臺下載的，不會影響瀏覽器對頁面的渲染和載入。

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">async</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">src</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"http://www.yoursite.com/script.js"</span>></span><span class="javascript" style="box-sizing: border-box;"></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

13、樣式表置頂，指令碼置底

將樣式表放在頂部有利於頁面迅速載入，因為這樣可以使得頁面慢慢呈現。一般來說，在同一時間，大部分瀏覽器支援並行下載兩個元件（影象、樣式和指令碼）。但是通常而言，指令碼會在並行下載時會阻止其他的下載，直到指令碼下載完畢。

14、JavaScript的延遲解析

為了載入網頁，瀏覽器必須解析所有的

15、避免阻塞型的JavaScript和CSS

在瀏覽器呈現網頁之前，它首先需要通過解析HTML標記語言來構建一個DOM樹。在此過程中，如果遇到了指令碼，此過程就會中止，轉而先執行指令碼，然後才會繼續原先的活動。因此建議避免阻塞型的JavaScript，尤其是外部指令碼。

阻塞型JavaScript還會導致網站的延遲。所以不妨推遲載入那些不重要的JavaScript，或者採用非同步載入的方式。另一種選擇是將這些HTML程式碼內嵌到網站上，同時需要確保CSS的優化。

16、優化程式碼：不使用內聯的CSS

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

17、檔案分離

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

18、儘量減少HTTP請求

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

1. 減少網站上的物件數量。
2. 最小化網站上的重定向數量。
3. 使用CSS Sprites 技術（只要你需要的那部分圖片內容）。
4. 合併JavaScripts和CSS檔案。