8個技巧優化網站速度

在網路還沒蓬勃發展的時代，可以回想人們使用電腦旁56K數據機上網的情形，那時可以上網何嘗不是一件新鮮事，喜歡上網的人是比較有耐心地等待網頁慢慢開啟，因為網路媒體本身既新鮮又刺激，因此網路使用者不介意等待。

面臨目前網路資訊爆發的時代，網路使用者接收大量的資訊供給，已漸漸顯得沒有耐心，網站好不好幾秒就被定生死，因此；網站除了考慮能否產生實質成效外，以使用者為中心的一個多面向全盤考量已成為經營網站策略性發展的重點，而網站載入速度因素首當其衝，網站載入速度為影響網站可用性(Website Usability)及使用者經驗(User Experience)重要因素之一，如果網站在短短幾秒中無法完全載入整個頁面，絕大多數的網路使用者會選擇馬上離開。避免網站面臨被使用者拒絕的危機，以下將介紹幾個優化網站速度的技巧，確保網站載入速度變的更快。

1. 優化圖檔

圖檔是影響網頁整體表現的其中一種效果，但未優化的圖檔對網頁載入速度是一種負荷。目前市面上的圖像編輯軟體，都擁有優化圖檔的功能，例如：Photoshop(功能為：檔案／儲存為網頁用)。經過優化處理，可大幅降低圖檔載入的時間。如果沒有現成的圖像編輯軟體，建議使用免費優化圖檔網站：Smush.it及DynamicDrive。

2. 圖檔格式

除了優化圖檔外，選擇適合尺寸大小圖檔及正確圖檔格式是非常重要的。一般網站適合使用的圖檔格式為GIF、PNG及JPEG，以下針對三種圖檔的格式特別說明：

JPEG：全名Joint Photographic Experts Group(聯合圖像專家小組)，針對相片影像而廣泛使用的一種失真壓縮標準方法。JPEG圖檔格式適合使用於展示照片或真實彩色圖(True-Color Images)，壓縮JPEG圖檔格式以50%的壓縮率可以達到最佳的效果。

GIF：全名Graphics Interchange Format(圖形交換格式)，是一種點陣圖圖形檔案格式，以8位元色(即256種顏色)重現真彩色的影像。GIF實際上是一種壓縮文檔，採用LZW壓縮演算法進行編碼，有效地減少圖檔在網路上傳輸時間。GIF圖檔格式適合使用於平板彩色圖像(Flat-Color Images)，例如：標誌(LOGO)、按鈕、文字圖像等等。

PNG：全名Portable Network Graphics(行動式網路圖片)，是一種非破壞性資料壓縮點陣圖圖形檔案格式。PNG圖檔格式是非破壞性資料壓縮的，允許使用類似於GIF格式的調色盤技術，支援真彩色圖片，並具備阿爾法通道(半透明)等特性。PNG圖檔格式支援alpha透明，壓縮比更高，同樣質量的PNG圖片與GIF相比最高可節省約30%的體積，除了動畫外，可以使用PNG來代替GIF圖檔格式。

(參考資料來源：維基百科JPEG, GIF, PNG)

3. 優化CSS語法

CSS擁有集中樣式及共享樣式管理的優點，優化CSS語法讓網頁執行更有效率，並解決網頁因重複標籤元素佔據大量網頁原始碼的問題。以下範例解說：

範例一

優化CSS語法前：


border-top: 5px;
border-right: 10px;
border-bottom: 8px;
border-left: 15px;

優化CSS語法後：


border: 5px 10px 8px 15px

範例二

優化CSS語法前：


<p class="content-style">這是第一段文字</p>
<p class="content-style">這是第二段文字</p>
<p class="content-style">這是第三段文字</p>
<p class="content-style">這是第四段文字</p>

優化CSS語法後：


<div class="content-style">
<p>這是第一段文字</p>
<p>這是第二段文字</p>
<p>這是第三段文字</p>
<p>這是第四段文字</p>
</div>

W3C CSS Validation Service錯誤檢查及CleanCSS語法優化工具可以檢視及刪除無用的屬性及空白原始碼。

4. 設定連結網址符號"/"

當網站伺服器判斷一個網址為"http://www.domain.com/product"時，該網址是代表一個檔案夾或是一個網頁呢？伺服器將需要多一點時間來辨識。如果該網址是指向檔案夾或目錄的，請在該網址末尾加上"/"符號，除了讓伺服器清楚地知道，也可減少處理及辨識的時間。

正確的使用"/"符號不會使網頁載入速度有明顯的改善，但遇到大型網站或目錄分配較多的網站，它的效果就會非常明顯。

5. 使用高(Height Tag)及寬(Width Tag)標籤元素

許多人在處理簡化網頁原始碼的過程，通常也會把圖片或表格的高及寬標籤元素忽略掉，但卻不知道正確使用高及寬標籤元素可以協助加快網頁載入速度。在網頁圖片或表格中加入高及寬的標籤元素，網頁載入時會先預留圖片及表格的位置，並同時載入其他資訊，因此；瀏覽器不需額外的時間判斷圖片尺寸大小及表格高寬，以下是正確原始碼範例：

<img src="http://www.domain.com/image.jpg" height="100" width="100" />

對於使用者而言，等待圖片或表格載入的同時，可以先閱讀文字及其他相關資訊。

6. 減少HTTP請求

HTTP請求簡單來說是指網路使用者輸入一個網址或進入一個網站瀏覽時，透過瀏覽器載入網頁物件與伺服器間來回的請求與應答，載入物件可能包括圖片、樣式表、JavaScript字串、外部檔案等等，大量的HTTP請求將延遲網站載入速度，有時需等待好幾秒才能完全載入。

減少網頁不必要的的內外部物件，可以降低HTTP請求次數，例如：減少不必要的圖片或合併圖檔、統一文字格式等等。另外；將JavaScript語法做成外部JS檔案，例如：motion.js及CSS樣式表整合成一個檔案置於網頁原始碼的<head>與</head>之間，以下為範例：

JavaScript外部檔案：

<script type="text/javascript" src="performance.js"></script>

CSS外部檔案：

<link href="style.css" rel="stylesheet" type="text/css">

CSS外部檔案優化前：

<link href="/header.css" rel="stylesheet" type="text/css">
<link href="/menu.css" rel="stylesheet" type="text/css">
<link href="/body.css" rel="stylesheet" type="text/css">
<link href="/footer.css" rel="stylesheet" type="text/css">

CSS外部檔案優化後(將四個檔案內容整合成一個)：

<link href="/style.css" rel="stylesheet" type="text/css">

7. 網站速度優化工具

透過網站速度優化工具可以快速檢視分析及改善網站速度整體的效能表現。

Web Page Analyzer：網頁分析器是專門測試網站的速度及效能工具。
Smush.it：線上圖檔優化軟體。
Online Images Optimizer：DynamicDrive快速壓縮圖檔。
PageTest：可以根據幾個國家位置、瀏覽器版本及頻寬速度測試網頁的整體速度表現。
Mod_gzip：Apache網頁伺服器壓縮內容服務。
W3C CSS Validation Service：CSS錯誤檢查工具。
CleanCSS：合併類似的CSS原始碼，減化不必要的屬性及空白。

8. 參考優化網站速度的網站

參考網站主要是彌補這方面的知識不足，以下提供幾篇文章可供參考：

吃尤加利葉的貓