網頁

2013年12月5日

[php, html] 如何減少虛擬主機網路頻寬流量並提升網站連線速度

國內外提供架站使用的虛擬主機，都會約定頻寬流量上限，如果超過約定的流量上限，就必須支付額外的費用，因此降低網路頻寬流量，就是節省費用的支出。

網站的任何（文字、圖片、影片、檔案）的傳輸都會產生流量，這些產生流量的物件裡，「圖片、影片、檔案」本身都會壓縮，若再次處理，反而會影響網站速度，利弊應該不用多加說明。

既然已經說明只有「文字」可以處理，就開始進入本次的主題，在開始介紹之前，必須先聲明此方法，只適用會網頁設計的人使用，因為要節省頻寬流量，就是從縮減html腳本檔案的容量開始。

依照瀏覽器特性，在html腳本出現「換行(\r\n)、Tab(\t)」符號都會被忽視，既然這些符號都會被忽視，那就沒有必要出現在傳輸過程中，做法就是把這些符號從html腳本中去除，去除符號後的html腳本檔案容量也會減少，網路傳輸量也會跟著減少，因此達到節省網路頻寬流量的效果，而用戶端也會因容量的縮減，減少傳輸等待的時間。

一、為驗證此方法的效果，以有一張有包含CSS、HTML網頁來做實驗。

原始的檔案內容：
<!DOCTYPE HTML>
<html><head>
<meta http-equiv=\"content-type\" content=\"text/html; charset=UTF-8\" />
<title>九九乘法表 - nux.tw</title>
<style>
table{
 width:700px;
 background-color:#000000;
}
td{
 background-color:#ffffff;
 font-size:14px;
}
td.bar{
 background-color:#cccccc;
 letter-spacing:8px;
 text-align:center;
 font-size:20px;
 font-weight:900;
}
</style>
</head>
<body>
<table border=\"0\" cellpadding=\"5\" cellspacing=\"1\">
<tr><td colspan=\"9\" class=\"bar\">九九乘法表</td></tr>
 <tr>
  <td>1 × 1 ＝ 1</td>
  <td>2 × 1 ＝ 2</td>
  <td>3 × 1 ＝ 3</td>
  <td>4 × 1 ＝ 4</td>
  <td>5 × 1 ＝ 5</td>
  <td>6 × 1 ＝ 6</td>
  <td>7 × 1 ＝ 7</td>
  <td>8 × 1 ＝ 8</td>
  <td>9 × 1 ＝ 9</td>
 </tr>
 <tr>
  <td>1 × 2 ＝ 2</td>
  <td>2 × 2 ＝ 4</td>
  <td>3 × 2 ＝ 6</td>
  <td>4 × 2 ＝ 8</td>
  <td>5 × 2 ＝ 10</td>
  <td>6 × 2 ＝ 12</td>
  <td>7 × 2 ＝ 14</td>
  <td>8 × 2 ＝ 16</td>
  <td>9 × 2 ＝ 18</td>
 </tr>
 <tr>
  <td>1 × 3 ＝ 3</td>
  <td>2 × 3 ＝ 6</td>
  <td>3 × 3 ＝ 9</td>
  <td>4 × 3 ＝ 12</td>
  <td>5 × 3 ＝ 15</td>
  <td>6 × 3 ＝ 18</td>
  <td>7 × 3 ＝ 21</td>
  <td>8 × 3 ＝ 24</td>
  <td>9 × 3 ＝ 27</td>
 </tr>
 <tr>
  <td>1 × 4 ＝ 4</td>
  <td>2 × 4 ＝ 8</td>
  <td>3 × 4 ＝ 12</td>
  <td>4 × 4 ＝ 16</td>
  <td>5 × 4 ＝ 20</td>
  <td>6 × 4 ＝ 24</td>
  <td>7 × 4 ＝ 28</td>
  <td>8 × 4 ＝ 32</td>
  <td>9 × 4 ＝ 36</td>
 </tr>
 <tr>
  <td>1 × 5 ＝ 5</td>
  <td>2 × 5 ＝ 10</td>
  <td>3 × 5 ＝ 15</td>
  <td>4 × 5 ＝ 20</td>
  <td>5 × 5 ＝ 25</td>
  <td>6 × 5 ＝ 30</td>
  <td>7 × 5 ＝ 35</td>
  <td>8 × 5 ＝ 40</td>
  <td>9 × 5 ＝ 45</td>
 </tr>
 <tr>
  <td>1 × 6 ＝ 6</td>
  <td>2 × 6 ＝ 12</td>
  <td>3 × 6 ＝ 18</td>
  <td>4 × 6 ＝ 24</td>
  <td>5 × 6 ＝ 30</td>
  <td>6 × 6 ＝ 36</td>
  <td>7 × 6 ＝ 42</td>
  <td>8 × 6 ＝ 48</td>
  <td>9 × 6 ＝ 54</td>
 </tr>
 <tr>
  <td>1 × 7 ＝ 7</td>
  <td>2 × 7 ＝ 14</td>
  <td>3 × 7 ＝ 21</td>
  <td>4 × 7 ＝ 28</td>
  <td>5 × 7 ＝ 35</td>
  <td>6 × 7 ＝ 42</td>
  <td>7 × 7 ＝ 49</td>
  <td>8 × 7 ＝ 56</td>
  <td>9 × 7 ＝ 63</td>
 </tr>
 <tr>
  <td>1 × 8 ＝ 8</td>
  <td>2 × 8 ＝ 16</td>
  <td>3 × 8 ＝ 24</td>
  <td>4 × 8 ＝ 32</td>
  <td>5 × 8 ＝ 40</td>
  <td>6 × 8 ＝ 48</td>
  <td>7 × 8 ＝ 56</td>
  <td>8 × 8 ＝ 64</td>
  <td>9 × 8 ＝ 72</td>
 </tr>
 <tr>
  <td>1 × 9 ＝ 9</td>
  <td>2 × 9 ＝ 18</td>
  <td>3 × 9 ＝ 27</td>
  <td>4 × 9 ＝ 36</td>
  <td>5 × 9 ＝ 45</td>
  <td>6 × 9 ＝ 54</td>
  <td>7 × 9 ＝ 63</td>
  <td>8 × 9 ＝ 72</td>
  <td>9 × 9 ＝ 81</td>
 </tr>
</table>
</body>
</html>
處理前的畫面：

將處理前的網頁另存檔案：

使用PHP str_replace函數去除換行及Tab符號：
$html = "
<!DOCTYPE HTML>
<html><head>
<meta http-equiv=\"content-type\" content=\"text/html; charset=UTF-8\" />
<title>九九乘法表 - nux.tw</title>
<style>
table{
 width:700px;
 background-color:#000000;
}
td{
 background-color:#ffffff;
 font-size:14px;
}
td.bar{
 background-color:#cccccc;
 letter-spacing:8px;
 text-align:center;
 font-size:20px;
 font-weight:900;
}
</style>
</head>
<body>
<table border=\"0\" cellpadding=\"5\" cellspacing=\"1\">
<tr><td colspan=\"9\" class=\"bar\">九九乘法表</td></tr>
 <tr>
  <td>1 × 1 ＝ 1</td>
  <td>2 × 1 ＝ 2</td>
  <td>3 × 1 ＝ 3</td>
  <td>4 × 1 ＝ 4</td>
  <td>5 × 1 ＝ 5</td>
  <td>6 × 1 ＝ 6</td>
  <td>7 × 1 ＝ 7</td>
  <td>8 × 1 ＝ 8</td>
  <td>9 × 1 ＝ 9</td>
 </tr>
 <tr>
  <td>1 × 2 ＝ 2</td>
  <td>2 × 2 ＝ 4</td>
  <td>3 × 2 ＝ 6</td>
  <td>4 × 2 ＝ 8</td>
  <td>5 × 2 ＝ 10</td>
  <td>6 × 2 ＝ 12</td>
  <td>7 × 2 ＝ 14</td>
  <td>8 × 2 ＝ 16</td>
  <td>9 × 2 ＝ 18</td>
 </tr>
 <tr>
  <td>1 × 3 ＝ 3</td>
  <td>2 × 3 ＝ 6</td>
  <td>3 × 3 ＝ 9</td>
  <td>4 × 3 ＝ 12</td>
  <td>5 × 3 ＝ 15</td>
  <td>6 × 3 ＝ 18</td>
  <td>7 × 3 ＝ 21</td>
  <td>8 × 3 ＝ 24</td>
  <td>9 × 3 ＝ 27</td>
 </tr>
 <tr>
  <td>1 × 4 ＝ 4</td>
  <td>2 × 4 ＝ 8</td>
  <td>3 × 4 ＝ 12</td>
  <td>4 × 4 ＝ 16</td>
  <td>5 × 4 ＝ 20</td>
  <td>6 × 4 ＝ 24</td>
  <td>7 × 4 ＝ 28</td>
  <td>8 × 4 ＝ 32</td>
  <td>9 × 4 ＝ 36</td>
 </tr>
 <tr>
  <td>1 × 5 ＝ 5</td>
  <td>2 × 5 ＝ 10</td>
  <td>3 × 5 ＝ 15</td>
  <td>4 × 5 ＝ 20</td>
  <td>5 × 5 ＝ 25</td>
  <td>6 × 5 ＝ 30</td>
  <td>7 × 5 ＝ 35</td>
  <td>8 × 5 ＝ 40</td>
  <td>9 × 5 ＝ 45</td>
 </tr>
 <tr>
  <td>1 × 6 ＝ 6</td>
  <td>2 × 6 ＝ 12</td>
  <td>3 × 6 ＝ 18</td>
  <td>4 × 6 ＝ 24</td>
  <td>5 × 6 ＝ 30</td>
  <td>6 × 6 ＝ 36</td>
  <td>7 × 6 ＝ 42</td>
  <td>8 × 6 ＝ 48</td>
  <td>9 × 6 ＝ 54</td>
 </tr>
 <tr>
  <td>1 × 7 ＝ 7</td>
  <td>2 × 7 ＝ 14</td>
  <td>3 × 7 ＝ 21</td>
  <td>4 × 7 ＝ 28</td>
  <td>5 × 7 ＝ 35</td>
  <td>6 × 7 ＝ 42</td>
  <td>7 × 7 ＝ 49</td>
  <td>8 × 7 ＝ 56</td>
  <td>9 × 7 ＝ 63</td>
 </tr>
 <tr>
  <td>1 × 8 ＝ 8</td>
  <td>2 × 8 ＝ 16</td>
  <td>3 × 8 ＝ 24</td>
  <td>4 × 8 ＝ 32</td>
  <td>5 × 8 ＝ 40</td>
  <td>6 × 8 ＝ 48</td>
  <td>7 × 8 ＝ 56</td>
  <td>8 × 8 ＝ 64</td>
  <td>9 × 8 ＝ 72</td>
 </tr>
 <tr>
  <td>1 × 9 ＝ 9</td>
  <td>2 × 9 ＝ 18</td>
  <td>3 × 9 ＝ 27</td>
  <td>4 × 9 ＝ 36</td>
  <td>5 × 9 ＝ 45</td>
  <td>6 × 9 ＝ 54</td>
  <td>7 × 9 ＝ 63</td>
  <td>8 × 9 ＝ 72</td>
  <td>9 × 9 ＝ 81</td>
 </tr>
</table>
</body>
</html>";

//移除換行、tab符號
echo str_replace(array("\r\n", "\t"), '', $html);
處理後的畫面：

將處理後的網頁另存檔案：

由存檔的容量來看，可以明顯看出處理前後的檔案容量的差異，如此少的html腳本內容，都可以處理出1KB的容量差異，若html腳本檔案容量更大，想必容量的差異更大。


二、使用筆記本各別打開處理前後的檔案。
腳本處理前：內容格式跟放在主機上的html腳本一樣，有包含換行及Tab符號。

腳本處理後：可以明顯看出處理後的檔案，都沒有換行及Tab符號。



三、使用Google Chrome瀏覽器內建功能，進一步測試網路傳輸數據。
處理前的傳輸數據

處理後的傳輸數據

傳輸數據的比較結果，雖然傳輸時間一樣，但是傳輸量是有明顯差異。


四、依照網頁源始碼看來，搜尋引擎Google及Yahoo也都有做這樣的處理。
Google首頁源始碼

Yahoo首頁源始碼

標籤： ,