【譯】如何對網站進行優化提速？

快速的頁面加載對提高搜索引擎排名、網站轉化率和總體的用戶體驗是很是重要的。網站頁面的加載速度也是衡量網站性能的一個重要因素。

若是網站不是以最好的性能在運行，遲緩的加載會讓你在低的排名和搜索流量上花費更大的代價。頁面的加載速度會對用戶的行爲和轉化率產生很大的影響。

那麼？有哪些簡單的方式能夠優化加載速度呢？

一、圖片優化

首先，你須要優化你網站上的圖片，來得到絲毫加速網站的機會。從原圖上移除額外的註解、沒必要要的空間和無用的顏色，將圖片保存爲JPEG格式，由於它即便佔用空間小，也能保證圖片的高質量。

對於WordPress網站，建議使用smush.it插件來自動優化網站的圖片。若是圖片是PNG格式，可使用tinypng 優化圖片，提升圖片質量。

二、開啓GZip壓縮

GZip壓縮聽起來很複雜，但實際上很簡單，被用於減小HTTP請求的大小來縮短響應時間。由於這容許你發送GZip壓縮文件而不是HTML文件給瀏覽器，它將縮短頁面等待時間和加載時間。對於Apache服務器，能夠將下面的代碼添加到.htaccess文件中來開啓GZip壓縮。

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

若是上面的代碼沒有開啓GZip壓縮，則刪除，使用下面的代碼：

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# Or, compress certain file types by extension:
<files *.html>
SetOutputFilter DEFLATE
</files>

或者在HTML/PHP文件的頂部添加下列的PHP代碼：

<?php 
   if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip'))     
   ob_start("ob_gzhandler"); else ob_start(); 
?>

三、服務器響應時間

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

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

四、瀏覽器緩存

瀏覽器具備緩存的功能，能夠存儲指定的文件，減小HTTP請求，從而提升網站的加載速度。你能夠經過在.htaccess文件中設置expires頭來開啓瀏覽器緩存，利用下面的代碼能夠實現：

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

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

五、開啓長鏈接（Keep-Alive）

Keep-Alive頭對縮短瀏覽器和服務器之間的分佈式請求的潛伏期是很是重要的。當用戶經過瀏覽器請求網頁時，瀏覽器會讀取服務器發送的特定的HTML文件，若是請求的頁面中包含了外部的CSS和JavaScript文件，瀏覽器會再次發送獨立的請求來獲取這些文件。正如你想的，這會延長頁面的加載時間。

使用Keep-Alive頭能夠一直保持鏈接，直到瀏覽器從服務器獲取到全部與這個頁面相關的資源。在.htaccess文件中加入下面的代碼能夠開啓這個功能：

<ifModule mod_headers.c> Header set Connection keep-alive </ifModule>

六、使用CDN

內容分發網絡（CDN）是位於不一樣地理位置的服務器組成的網絡。每一個服務器都擁有全部網站的文件副本。當用戶請求文件和網頁時，就能夠直接從就近的網站服務器獲取相應資源（也能夠是從負載最小的服務器）。你可使用Amazon cloud front 或者MaxCDN爲網站開啓CDN加速。

七、壓縮CSS、JavaScript和HTML文件

經過刪除全部沒必要要的空格和註釋，從而減少文件大小，提升頁面的加載速度。下面是一些優化CSS、JavaScript和HTML文件的流行工具，很是有用。

1. CSS Minifier
2. Avivo
3. HTML Compressor

八、避免重定向

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

九、指定字符集

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

十、避免錯誤請求

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

十一、丟棄跟蹤代碼、嵌入視頻的元素和分享按鈕

不少網站管理員認爲使用多個跟蹤代碼提供嵌入和分享按鈕會帶給用戶更好的體驗，實際上這隻會給網站增長更多的服務請求。例如，一個iframe會請求一個新頁面，這會自動下降網站的加載速度。因此，丟棄這些跟蹤代碼，能夠提升網站加載速度，提高用戶體驗。

十二、異步腳本

還有一個能夠提升網站頁面速度的超棒選擇就是異步加載腳本。如此一來網頁負載就並沒必要依賴於這些異步腳本。在異步模式中，腳本是在後臺下載的，不會影響瀏覽器對頁面的渲染和加載。

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

1三、樣式表置頂，腳本置底

將樣式表放在頂部有利於頁面迅速加載，由於這樣可使得頁面慢慢呈現。通常來講，在同一時間，大部分瀏覽器支持並行下載兩個組件（圖像、樣式和腳本）。可是一般而言，腳本會在並行下載時會阻止其餘的下載，直到腳本下載完畢。

1四、JavaScript的延遲解析

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

1五、避免阻塞型的JavaScript和CSS

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

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

1六、優化代碼：不使用內聯的CSS

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

1七、文件分離

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

1八、儘可能減小HTTP請求

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

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

譯文出處：http://www.ido321.com/1604.html

參考文章

12 Actionable Ways To Improve Page Speed

13+ Ways to Optimize Your Website’s Page Speed