從我開始知道 SEO 這幾年起,基本上所有的 SEO 活動都是基於前端的,從header 到 body,從小標簽到 CSS,從鏈接到關鍵詞密度;初期牛人們診斷一個網站 SEO 的標准也是從前端頁面著手,不過的確也是,從排名算法前端的代碼的確占了大部分的比例,但後端的服務器速度優化,也開始成為一個越來越重要的因素,特別是流言四起的 Google 將會把網站速度作為算法的一部分。
當然,服務器那種事不該是一個SEOer 或者 SEMer應該去精通的東西,其實只要了解並掌握其規律就可以了(推薦另外一片文章:大型網站架構演變和知識體系);但依然要熟悉網站系統或者 CMS 的加速手段,正如國平在《怎樣形成一套非常科學系統的SEO方法 》中分析的
什麼措施能影響網頁加載速度呢? 網絡環境、服務器硬件、CMS本身都能影響網頁加載速度。優化其中的任何一項,都能提升網頁加載速度。那馬上又可以得出:網絡環境影響SEO流量、服務器硬件影響SEO流量、CMS本身的速度影響SEO流量。
影響速度的因素有很多,這裡做一個匯總(不包括硬件)
本文內容參考Yahoo:Best Practices for Speeding Up Your Web Site 和 高性能網頁開發的14條軍規
一、盡可能的減少 HTTP 的請求數
這個第一條是我們大多數SEO所知道的,我再做一個簡單的描述:大多數的HTTP請求都是前端的,用戶的大多數時間都被用來下載圖片、CSS樣式表、各種Scripts、Flash等等。當然或許將css,js文件拆分多個是因為css結構,共用等方面的考慮。阿裡巴巴中文站當時的做法是開發時依然分開開發,然後在後台 對js,css進行合並,這樣對於浏覽器來說依然是一個請求,但是開發時仍然能還原成多個,方便管理和重復引用。yahoo甚至建議將首頁的css和 js 直接寫在頁面文件裡面,而不是外部引用。因為首頁的訪問量太大了,這麼做也可以減少兩個請求數。而事實上國內的很多門戶都是這麼做的。
而css sprites是指只用將頁面上的背景圖合並成一張,然後通過css的background-position屬性定義不過的值來取他的背景。淘寶和阿裡巴巴中文站目前都是這樣做的。有興趣的可以看下淘寶和阿裡巴巴的背景圖。
http://www.csssprites.com/ 這是個工具網站,它可以自動將你上傳的圖片合並並給出對應的background-position坐標。並將結果以png和gif的格式輸出。
二、使用CDN(內容分發網絡)Content Delivery Network
之前曾經問過張智勇公子關於 CDN 是否對 SEO 有影響,在征詢了技術老總的意見之後,這個影響其實幾乎可以忽略的,反而是用戶端的速度體驗提升了,對網站的正向作用更大。
CDN 加速現在很流行,幾乎稍微大一點的網站都有用這個服務,就是將網站的鏡像服務備份到多個服務器節點,從而加速該服務器周圍的用戶訪問。
更詳細地內容大家可以參考百度百科上對於CDN的解釋
三、添加Expire/Cache-Control 頭
這個規則有兩個東西:
通過設置Expires header 來緩存這些文件。Expire其實就是通過header報文來指定特定類型的文件在覽器中的緩存時間。大多數的圖片,flash在發布後都是不需要經常修 改的,做了緩存以後這樣浏覽器以後就不需要再從服務器下載這些文件而是而直接從緩存中讀取,這樣再次訪問頁面的速度會大大加快。
一個典型的HTTP 1.1協議返回的頭信息:
HTTP/1.1 200 OK
Date: Fri, 30 Oct 1998 13:19:41 GMT
Server: Apache/1.3.3 (Unix)
Cache-Control: max-age=3600, must-revalidate
Expires: Fri, 30 Oct 1998 14:19:41 GMT
Last-Modified: Mon, 29 Jun 1998 02:28:12 GMT
ETag: “3e86-410-3596fbbc”
Content-Length: 1040
Content-Type: text/html
其中通過服務器端腳本設置Cache-Control和Expires可以完成。
如,在php中設置30天後過期:
<!–pHeader(“Cache-Control: must-revalidate”);$offset = 60 * 60 * 24 * 30;$ExpStr = “Expires: ” . gmdate(“D, d M Y H:i:s”, time() + $offset) . “ GMT”;Header($ExpStr);–>
<!–pHeader(“Cache-Control: must-revalidate”);$offset = 60 * 60 * 24 * 30;$ExpStr = “Expires: ” . gmdate(“D, d M Y H:i:s”, time() + $offset) . ” GMT”;Header($ExpStr);–>
在asp中設置絕對時間過期:
<% Response.ExpiresAbsolute=#May 31,2010 13:30:15 GMT# %>
也可以通過配置服務器本身完成,這些偶就不是很清楚了,呵呵。想了解跟多的朋友可以參考http://www.web-caching.com/
四、Gzip壓縮
這個是目前應用最多的加速方式之一,代碼也很簡單,gzip的壓縮比例非常大,一般壓縮率為85%,就是 說服務器端100K的頁面可以壓縮到25K左右再發送到客戶端。雅虎開發者特別強調, 所有的文本內容都應該被gzip壓縮: html (php), js, css, xml, txt。
五、將css放在頁面最上面
六、將script放在頁面最下面
七、避免在CSS中使用Expressions
css表達是的執行次數是遠遠多於我們想象的,往往會嚴重地影響性能。而且,它只能在IE中執行。所以因盡量地避免它。這一條以前倒沒想過,個人用 這個就是在對ie使用max-width和min-width屬性的時候。大家知道IE是不支持max-width和min-width屬性的。有時候的 頁面(特別是自適應大小的頁面)為了能在分辨率小到一定程度後還能顯示要用到這個功能,怎麼辦。當時我的做法就是利用expressions:
八、外置javascript和css文件
這個地球人都知道
九、減少DNS查詢
在 Internet上域名與IP地址之間是一一對應的,域名(SEMWatch.org)很好記,但計算機不認識,計算機之間的“相認”還要轉成ip地址。在網絡 上每台計算機都對應有一個獨立的ip地址。在域名和ip地址之間的轉換工作稱為域名解析,也稱DNS查詢。一次DNS的解析過程會消耗20-120毫秒的 時間,在dns查詢結束之前,浏覽器不會下載該域名下的任何東西。所以減少dns查詢的時間可以加快頁面的加載速度。yahoo的建議一個頁面所包含的域 名數盡量控制在2-4個。這就需要對頁面整體有一個很好的規劃。
十、壓縮 JavaScript 和 CSS
壓縮js和css的左右很顯然,減少頁面字節數。容量小頁面加載速度自然也就快。而且壓縮除了減少體積以外還可以起到一定的保護左右。
當然,壓縮帶來的一個弊端就是代碼的可讀性沒了。相信很多做前端的朋友都遇到過這個問題:看Google的效果很酷,可是去看他的源代碼卻是一大堆 擠在一起的字符,連函數名都是替換過的,汗死!自己的代碼也這樣豈不是對維護非常不方便。
十一、雅虎開發者告訴我們要避免重定向
301,302重定向是普通 SEO 裡最常見的,特別是301,對權重的轉移和保留非常有幫助,除非迫不得以,盡量少用重定向。
十二、移除重復的腳本
這點我想不說也知道,不僅是從性能上考慮,代碼規范上看也是這樣。但是不得不承認,很多時候我們會因為圖一時之快而加上一些或許是重復的代碼
十三、配置實體標簽(Configure ETags)
這點我也不懂,呵呵。在inforQ上找到一篇解釋得比較詳細的說明《使用ETags減少Web應用帶寬和負載》,有興趣的同學可以去看看。
十四、使AJAX 緩存 (Make Ajax Cacheable )
記住,即使AJAX是動態產生的而且只對一個用戶起作用,他們依然可以被緩存
Even though your Ajax responses are created dynamically, and might only be applicable to a single user, they can still be cached. Doing so will make your Web 2.0 apps faster.
十五、Flush the Buffer Early
十六、Use GET for AJAX Requests
十七、Post-load Components
十八、Preload Components
十九、Reduce the Number of DOM Elements
二十、Split Components Across Domains
二十一、Minimize the Number of iframes
框架最好都不要用。
二十二、No 404s
這個和SEO的相關條款不一致,可以忽視哈。
二十三、Reduce Cookie Size
盡可能的吧,cookies跟蹤好了,有可能比速度更重要
二十四、Use Cookie-free Domains for Components
二十五、Minimize DOM Access
二十六、Develop Smart Event Handlers
二十七、Choose 《link》 over @import
二十八、Avoid Filters
二十九、Optimize Images
三十、Optimize CSS Sprites
三十一、Don’t Scale Images in HTML
三十二、Make favicon.ico Small and Cacheable
三十三、Keep Components under 25K
三十四、Pack Components into a Multipart Document
三十五、Avoid Empty Image src
避免空的圖片地址鏈接
straight HTML
<img src=”">
JavaScript
var img = new Image();
img.src = “”;
這兩種形式都會導致同樣的效果:浏覽器會向服務器進行額外請求
三十六、沒了
哎喲,太多了