SEOmoz系列 - 七個優化網頁開啟速度的方式

seomoz可以說是seo界的重要領導者，尤其每個禮拜五他們都會有一個"Whiteboard Friday"的免費影片課程，往後我們就會持續的分享每個禮拜的"Whiteboard Friday"，並將其內容中文化，讓更多對SEO領域有興趣朋友能夠持續的補充新知。

這個禮拜的話題是關於網頁開啟的速度對於SEO的影響，首先，我們要先了解：為什麼要優化網頁開啟速度？在今年四月（2010/04）的時候，Google總算公開表示，網頁開啟因素將會是網頁排名的參考因素之一（2010/04/09 Official Google Webmaster Central Blog: Using site speed in web search ranking）。其實不管Google有沒有設為排名參考因素，一個開啟太慢的網頁，本來就是會被使用者唾棄的。那個時候我也在想要網站排名名列前茅？先加速你的網站吧！一文中提過同樣的事情，但是那時候並沒有聊該怎麼做。那有怎樣的方法，可以加速網頁開啟的速度呢？我們先看以下的影片：




根據影片的介紹，如果你想要有效的提升網頁開啟速度，你有以下七個目前被認為最有效的方式：

1. Gzip啟用：Gzip理論上是網頁主機該提供的服務，可是君不見台灣許多主機商都並沒有提供這項功能。"Gzip"顧名思義，就是把網頁先打包（Zip）好之後，再傳遞給使用者端（Client）。就像我們在寄發電子郵件的時候，會先將檔案壓縮，以避免檔案過大或是超出附件大小限制。如果你的主機商沒有提供這樣的服務，那最好早點換一家比較好！
   
   檢測網站是否使用Gzip：
   http://gzip.zzbaike.com/ （簡） http://www.whatsmyip.org/http_compression/ （英）
   
   
2. 將你的Java及CSS瘦身：不必要的程式碼就把它拿掉吧！如何優化，Wiki上有提供許多優化的方式，請見Wikipedia:Minification_(programming)。
   
   
3. 使用內容傳遞網絡（Content delivery network）：這個部分可以分為系統面及操作面來討論，不過由於系統面部分可以扯很久，我就簡單講操作面的部份。
   
   網頁主機的頻寬是影響SEO的因素之一，但是除了文字，事實上占頻寬最多的，通常都不是這些文字，而是眾多的影片及圖片。而內容傳遞網絡運用到現在的網路生態，其中一個概念就是：把這些媒體搬出網站，譬如說把圖片及影片放到可供外連的空間（如Picasa、Pixnet、Youtube......等），讓這些大公司幫你分擔頻寬，而且你付出的金額可能可以幫你省下更多的頻寬費用，例如Picasa一年只需要花5美元（台幣約16元）就有20G的相簿空間，台灣知名主機商戰X策如果爆流量的話，一個月要多付200元，哪個划算高下立判。另一個概念就是運用技術縮短資料到使用者端的時間。像P2P服務、優化Cache存取......等，基本上就是一個代理伺服器（Proxy）的概念。所以這也是為什麼，我們常常說在哪個國家開網站，就在當地申請主機會比較好。
   
4. 圖片優化：有些開啟頁面很慢的網頁，通常就是放了一堆圖，那這一堆圖偏偏又沒有調整過大小，曾經看到一個超級設計不良網站，硬是把高達4M的相片放到網站上。雖然說現在20M的網路正式上路了，但是這樣的情形一來是吃主機的頻寬，還延遲了網頁的開啟。所以，一來把圖片外連到其他平台之外，你還可以使用一個叫做Lazy Load的jQuery插件，來延遲圖片載入。簡單來說，他就是讓網頁的內容先跑完，當你滑鼠滾動到的地方，再載入圖片。可以快速有效的縮短開啟網頁的時間。
   
   Lazy Load Plugin for jQuery
   香腸炒魷魚：Lazy Load 延遲圖片載入，讓網站更順暢
   
5. 外部載入JavaScript/CSS：有些設計不良的網站，就直接把CSS或是JavaScript寫在網頁的檔案裡面，這樣就會讓網頁的大小變得很大，自然就會延遲載入的時間。最好的方式就是將JavaScript及CSS另外存檔，再使用語法載入。
   
6. 避免重複轉址：許多網站都喜歡轉址來轉址去的（301/302/Meta refresh），停止這行為吧。
   
7. 減少檔案使用：這部份有許多技巧要講，在這裡先介紹CSS Sprites。一般我們製作網頁通常會用到許多的小圖示或是圖片，但是就一個網站負載而言，每多一次圖片的載入，就多消耗一次頻寬。CSS Sprites的技術，就是把這些圖片通通集合在同一張圖片之上，在載入網頁的時候只需要跟伺服器請求一次圖片的下載，有效可以提昇網頁讀取速度。
   
   CSS Sprites 產生器，改造網頁以加快圖示載入速度

看完了上述的優化技巧，你是否想趕快開始動手呢？如果你不清楚你網頁開啟的速度究竟是快或是慢，記得到Google的網站管理員工具中Google 研究室的網站效能，去看看你的網頁開啟來是幾秒唷！而Google的建議值是希望在1.5秒以內，其他的都會被判為「緩慢」唷。

Speed UP！User Friendly UP！

原文出自於seomoz.org - Whiteboard Friday - 7 Ways to Take Advantage of Google's Site Speed Algorithm (Pop-Up Video Style)，影片版權歸seomoz所有