加速網(wǎng)頁響應(yīng)時(shí)間的簡單而有效的5種方法小結(jié)

1. 使用Yslow概覽與測量網(wǎng)站加載時(shí)間

在決定什么出問題之前，知道網(wǎng)站的加載時(shí)間是第一步。它也能讓你知道你是否需要為網(wǎng)站加速進(jìn)行更改。

在我們開始之前，如果你還沒有安裝YSlow， 請安裝。他是Mozilla Firefox的一個(gè)擴(kuò)展，你可從下面的鏈接找到它：

https://addons.mozilla.org/en-US/firefox/addon/5369

第一，讓我們?yōu)g覽Six Revisions網(wǎng)站，我們都使用相同的例子進(jìn)行測試（僅需要在新的標(biāo)簽或者瀏覽器窗口中打開）。

在瀏覽器的右下角的插件欄（如圖1）。當(dāng)網(wǎng)頁完成加載以后，你會(huì)看到”YSlow”和數(shù)字。數(shù)字代表瀏覽器加載網(wǎng)站所花費(fèi)的時(shí)間 （以秒計(jì)）。我們希望這個(gè)數(shù)字保持盡可能低的水平。

圖 1： YSlow圖標(biāo)和顯示網(wǎng)頁加載時(shí)間的里程表

多數(shù)情況下，導(dǎo)致網(wǎng)頁加載時(shí)間長的一個(gè)或者一組原因如下：

1、太多的HTTP請求

2、非壓縮的 (或未經(jīng)縮小的) JavaScript文件

3、No expiration headers for靜態(tài)圖片文件

我們一會(huì)將要討論這些。

為了fimilarize自己網(wǎng)站加載時(shí)間的表現(xiàn)，瀏覽了一些網(wǎng)站?？纯碐oogle，facebook，和一些你喜歡的博客與網(wǎng)站。你會(huì)注意到網(wǎng)站 利用越多的圖片與js網(wǎng)頁的響應(yīng)時(shí)間越久。

YSlow的使用特點(diǎn)

除了測量它網(wǎng)頁加載的速度， YSlow為您提供一些深入了解，如你可以為提高自己的網(wǎng)站性能做些什么，以及網(wǎng)站的負(fù)載性能的不足。

下面的圖片是 ‘性能’ 標(biāo)簽 （如圖 2）。 但你點(diǎn)擊它，它會(huì)分級展示每個(gè)影響到加載時(shí)間與整體性能的領(lǐng)域的細(xì)節(jié)。

圖 2： 性能標(biāo)簽

在這個(gè)領(lǐng)域，最主觀的選擇是使用CDN （內(nèi)容分發(fā)網(wǎng)絡(luò)）.CDN針對大型網(wǎng)站非常有效果。他們所作的事情是跨越遍及各個(gè)地區(qū)的服務(wù)器傳播網(wǎng)站內(nèi)容。當(dāng)物理服務(wù)器越是接近用戶加載一個(gè)網(wǎng)站，一個(gè)頁面的速度越快速。因此本質(zhì)上來說，使用CDN是從服務(wù)器上將內(nèi)容分發(fā)到最接近的訪問的頁面用戶旁。

圖 3： 性能標(biāo)簽使用字母（A， B， C， D， F） 表示等級以及當(dāng)前等級（1-100）。

等級領(lǐng)域：讓我們貫穿每個(gè)等級因素，下面是每個(gè)等級領(lǐng)域的簡短秒速，以及如何解決這些問題，實(shí)現(xiàn)最佳的性能。

減少HTTP請求：當(dāng)網(wǎng)頁從服務(wù)器獲取文件的時(shí)候，便有HTTP請求產(chǎn)生。范圍包括腳本，CSS文件，圖片以及 asynchroneous客戶端/服務(wù)端請求 （Ajax和其他變化的技術(shù)）。這是提高性能的關(guān)鍵處，但是只需費(fèi)點(diǎn)體力便能很容易解決。例如，盡可能的合并腳本，CSS，以及圖像，在用戶的機(jī)器上緩存文件常常有幫助。

添加期限頭部： 80% 的頁面加載時(shí)間都于下載腳本，圖片以及CSS有關(guān)。 多數(shù)情況下，這些元素在用戶的機(jī)器中不會(huì)發(fā)生改變，你可以通過在.htaccess中添加代碼緩存在用戶本地機(jī)器中（我們會(huì)在文章的后面對如何操作進(jìn)行討論）。

Gzip 部件： Gziping或者壓縮JS文件，圖片，HTML文檔，CSS文檔等等。用戶可以下載較小的文件版本，增加網(wǎng)頁的加載速度。 這樣可以降低服務(wù)器的消耗，但是解壓縮部件也可能導(dǎo)致頁面響應(yīng)變慢，這取決于用戶的瀏覽器。

把CSS放在頂端： 把CSS文件放在網(wǎng)站的頂端，可以是網(wǎng)站盡可能同時(shí)加載其他部件，如圖像和文字。

把js放在底端： 把CSS放在文檔的頭部，僅需要在關(guān)閉boby>前插入js.在這些腳本在后臺加載的同時(shí)，用戶先得到看似完整的頁面。

避免使用CSS表達(dá)式： 我從來沒有使用過CSS 表達(dá)式（被稱之為動(dòng)態(tài)特性）， 這僅是IE專有的一個(gè)增加編程概念（如控制/有條件的結(jié)構(gòu)）的CSS特性，截止到IE8，三叉戟布局引擎（在IE中使用的）不再提供支持。在某種程度上，我會(huì)基于不同的條件使用PHP腳本加載不同的CSS樣式規(guī)則，例如一個(gè)隨機(jī)數(shù)，一天的時(shí)間，或者瀏覽器。

外部調(diào)用JS與CSS： 將JS和CSS文件放在外部文件中，瀏覽器緩存他們要比每次調(diào)用擁有更快的頁面加載速度。

減少DNS查找： 只要用戶在瀏覽器的地址欄中鍵入域名，瀏覽器總會(huì)執(zhí)行DNS查找IP地址，網(wǎng)站擁越多的入口位置，必要的DNS查找也會(huì)越多。盡可能的保持較低的水平，平 均60-100毫秒進(jìn)行一次DNS查詢。

縮小JS： 不同于一般的gzip壓縮，縮小js文檔是去除不必要的空格，減少文件的總尺寸，較小的頁面可以獲得更快的加載速度，你可以使用 JSMIN來縮小JavaScript.

避免重定向：無論是服務(wù)器端頭重定向，js重定向，或者HTML元素重定向。你的網(wǎng)站都會(huì)加載空白的頁面的頭， 然后再加載新的一頁，用戶為了獲得需要的頁面花費(fèi)越來越多的時(shí)間，所以要不惜一切代價(jià)避免這種情況。

去除重復(fù)的腳本： 瀏覽器加載相同的腳本會(huì)增加頁面的加載時(shí)間，這是非常簡單的數(shù)學(xué)問題，更多的文件等于更多的加載時(shí)間。仔細(xì)檢查你的網(wǎng)站，確保你沒有調(diào)用兩次或三次jQuery或者其他的腳本。

圖 4： 部件標(biāo)簽。

部件標(biāo)簽（如圖 4）可以洞察增加網(wǎng)站加載速度的效果。在這里，你可以看到當(dāng)前文檔加載需要的時(shí)間，如果這些文件被壓縮，響應(yīng)的時(shí)間，以及假如他們緩存在用戶的機(jī)器中和什么時(shí)候緩存過期。這是對網(wǎng)站很好的考核，衡量其性能 與速度優(yōu)化情況。最后，統(tǒng)計(jì)資料標(biāo)簽（如圖 4），它向我們展示了所有的 HTTP請求，同時(shí)下載的文檔，以及緩存的文件。Empty cache顯示了瀏覽器需要下載的呈現(xiàn)頁面的文件。Primed Cache是另一方面，顯示了已經(jīng)存在于用戶瀏覽器緩存中的文件列表，從而節(jié)省了瀏覽器不必再次下載文件的請求。

圖 5： Stats tab.

2. 使用CSS精靈減少HTTP請求

CSS sprites 可以通過合并你的css背景圖片，減少頁面向服務(wù)的HTTP請求，輕松的降低頁面的加載時(shí)間。

許多教程只是教你如何使用CSS精靈制作導(dǎo)航，我要說的是使用它制作整個(gè)網(wǎng)站的用戶界面。

首先，讓我們快速瀏覽一下YouTube，看一看他們是如何使用CSS Sprites的（如圖 6）。 你不能在這里看到Y(jié)ouTube的CSS Sprite：

master-vfl87445.png

圖 6： YouTube的 “主要的” CSS Sprite.

這是怎么做到的，使用CSS，YouTube設(shè)定了一個(gè)將這張圖片作為背景（如上圖）的類， 然后其他元素只需要通過css的背景位置屬性background-position設(shè)定相應(yīng)的類來使 用這些圖片。

讓我們來試試，我們打算使用YouTube圖片來制作一個(gè)實(shí)例。

在以下示例中，我們使YouTube標(biāo)志顯示在屏幕上。使用相同的使用相同的sprite類與相同的圖標(biāo)，制作一個(gè)簡單的翻轉(zhuǎn)圖標(biāo)。

 style>
.sprite {
  background:url(http://s.ytimg.com/yt/img/master-vfl87445.png);
}

#logo {
  width:100px;
  height:45px;
  background-position:0 0;
}
/style>

div id="logo"> /div> 

現(xiàn)在我們所作的是通過單一的HTTP請求滿足所有的靜態(tài)網(wǎng)站需求。這樣可以大大降低網(wǎng)頁加載時(shí)間。

當(dāng)你使用sprites制作懸停翻轉(zhuǎn)效果時(shí)，圖片更替看起來間隔時(shí)間非常短。不同于翻轉(zhuǎn)狀態(tài)時(shí)加載文件，留下大量的空白直到該文件完全被加載。 

style>
.sprite {
  background:url(http://s.ytimg.com/yt/img/master-vfl87445.png);
}
#logo {
  width:100px;
  height:45px;
  background-position:0 0;
}

#button {
  background-position:0 -355px;
  padding:5px 8px;
}

#button:hover{
  background-position:-25px -355px;
}

/style>

div id="logo"> /div>

a href="#" id="button">/a>

3. 先加載CSS最后加載JavaScript

某些站點(diǎn)，你根本無法避開所有的擾亂了你功能的HTTP請求。

在這方面，以下幾個(gè)建議：

在body上的head>標(biāo)簽里加載CSS 在/body>標(biāo)簽閉合前加載JavaScript .

會(huì)發(fā)生什事情呢？網(wǎng)頁在用戶的機(jī)器上加載顯示，因此他們的眼睛就開始掃描所提供的內(nèi)容，這個(gè)時(shí)候JavaScript正好迎頭趕上在后臺進(jìn)行加載。

提示：如果您不想移動(dòng)JavaScript標(biāo)記，你認(rèn)為它會(huì)搞糟網(wǎng)站的方式工作，我建議使用defer 屬性。

4. 使用子域名并發(fā)下載

并行下載，當(dāng)你增加文件下載。如果你有打開網(wǎng)頁在頁腳的狀態(tài)欄，你會(huì)發(fā)現(xiàn)加載其他網(wǎng)站的時(shí)候，會(huì)同時(shí)對static.domain.com和 c1.domain.com進(jìn)行請求。

這是一個(gè)非常棒的優(yōu)化負(fù)載性能的方法。雖然只是簡單的使用子域名，內(nèi)容在同一個(gè)服務(wù)器上，但是瀏覽器是當(dāng)作獨(dú)立的服務(wù)器進(jìn)行對待。

進(jìn)行這樣的設(shè)定：

1、在服務(wù)器上創(chuàng)建3個(gè)子域名

2、把圖片放在在每個(gè)子域名的一個(gè)文件夾內(nèi)

3、在新建的子域名中替換網(wǎng)站圖片的位置路徑

現(xiàn)在使用JavaScript文件，不會(huì)超過兩個(gè)并發(fā)。

5. Adding an Expires Header

一些網(wǎng)站非常豐富，即使使用上述的技術(shù)后，性能似乎還可以增加更多。

一個(gè)用戶訪問你的網(wǎng)站，產(chǎn)生一些必要的頁面，圖片，腳本等HTT請求。

當(dāng)你使用了Expires Header，你可以在用戶的本地機(jī)器對這些元素進(jìn)行緩存，不僅提高了他們的訪問速度，也節(jié)省了你的帶寬。 Expires header可以在所有的圖片，腳本與css上使用。

只需要在你的網(wǎng)站根目錄.htaccess文件中加入一行代碼就可以輕松做到。（假如你沒有，可以用文本編輯器創(chuàng)建一個(gè)，存為.htaccess， 然后上傳到根目錄中。）

下面的.htaccess.為ico，.pfd，.flv （Flash類型文件），.jpg，.png等設(shè)置了2010到期的遙遠(yuǎn)的期限。