減少HTTP請求數(shù),是前端開發(fā)性能優(yōu)化的非常重要方面,也是網頁SEO優(yōu)化重點之一,有如下優(yōu)點:
1.減少DNS請求所耗費的時間
一個DNS請求會耗費20毫秒到120毫秒,如果站內、站外的請求較多,頁面打開速度就會超過2-6秒。
2.減少服務器壓力
因為每個HTTP請求都會耗費服務器資源,特別是一些需要計算合并等操作的服務器,耗費服務器的CPU資源。
3.減少http請求頭
對服務器發(fā)起一個請求,會攜帶著這個域名下的COOKIE和一些其他的信息在HTTP頭部里,服務器響應請求的時候,也會帶回一些COOKIE之類的頭部信息,這些信息有的時候會很大,在這種請求和響應的時候會影響帶寬性能。
了解請求、解析、服務器之間的關系
首先看看用戶輸入1個URL到下載內容到客戶端需要經過哪些階段:
1. 域名解析
2. 開啟TCP連接
3. 發(fā)送請求
4. 等待(主要包括網絡延遲和服務器處理時間)
5. 下載資源
以上是SEO博客內容頁URL請求情況,左邊的304返回碼代表已經被緩存了,網站打開時間慢很多人認為是加載站內的文件太大了,其實解析bdimg.share.baidu.com,cpro.baidustatic.com這些站外的DNS解析消耗的時間比站內的多太多了!
SEO優(yōu)化應最先考慮服務器
過多的HTTP請求對服務器來說是痛苦的,如果你的服務器不夠強大,就是最先考慮的事,我們做SEO優(yōu)化不僅僅是頁面內容本身的優(yōu)化,沒有一個好的服務器,后端再優(yōu)化前端展示慢了,也是浪費心思!
做SEO優(yōu)化的網站如果業(yè)務、服務輻射國內,就采用國內的服務器,不考慮香港、臺灣、美國;國際業(yè)務選擇速度快的服務器了,當然價格不菲。
比如阿里萬網的CDN,能解決足夠的后臺資源保障,所以SEO應該把重心轉移到用戶體驗上,用戶體驗最重要的就是加載速度。既然頁面請求HTTP次數(shù)會影響加載速度,我們應該如何做:
網頁設計不提倡的原則
對前端網頁設計中,為了頁面效果,會采用多個JS效果。采用“開發(fā)工具包”的網站有以下缺陷:
1.p 的class命名不簡潔
比如:<p class="channel1_part1_description">
2.采用公共CSS樣式表+數(shù)個自定義CSS樣式表的方案或一個CSS樣式表里重復定義
<link href="http://www.vi586.com/css/basic.css" rel="stylesheet" media="screen" type="text/css"> <link href="http://www.vi586.com/css/style.css" rel="stylesheet" media="screen" type="text/css">
3.頁面里面的JS腳本、效果過多
如果有多個地方使用JQuery效果,建議采用同一個JQuery庫,防止沖突、重復;如果是頁面里面的JavaScript腳本,在不沖突的情況下,函數(shù)可以合并。
一些簡單的陰影、動態(tài)完全可以采用CSS3實現(xiàn),雖然一些瀏覽器不支持,使用主流瀏覽器的還是占絕大多數(shù)。
站長總結的幾種減少HTTP請求的方法
減少站內HTTP請求:合并CSS樣式和JS腳本
①p的class合理命名方式
應采用簡單易懂小寫英文、拼音、數(shù)字組成。比如:
<p class="nav"> <ul> <li><a href="#" class="nav_top hover">欄目1</a> <a href="#" class="nav_sub">子欄目1</a> <a href="#" class="nav_sub">子欄目2</a> </li> <li><a href="#" class="nav_top">欄目2</a></li> <li><a href="#" class="nav_top">欄目3</a></li> </ul> </p>
②給p采用最簡單的CSS樣式寫法,比如上面的例子樣式這樣寫
.nav{width:1200px;height:40px;margin:0 auto} .nav ul li{display:inline-block;background:#eee} .nav_top{display:block;padding:0 10px;line-height:40px;background:#ccc} .nav_sub{display:block;padding:0 10px;ling-height:30px;background:#555} .hover{background:#c00}
有些寫法雖然也沒什么錯,但是不夠簡潔,比如
.nav ul li a.nav_top{ display:block; padding:0 10px; line-height:40px; background:#ccc }
③對大多數(shù)網站來說首頁權重最高,是優(yōu)化的重點
可以減少站內請求,比如樣式和腳本都寫在頁面里,不產生請求,也不被緩存。
網站性質不一樣,前端優(yōu)化方法也不一樣,比如w3cschool幾乎是純文字屬于內容為主,速度自然快;淘寶典型的應用型,里面圖片占了多數(shù),光是幾百張圖就是幾百個HTTP請求。站長建議:
首頁采用樣式、腳本寫在頁面內,其他還是引用的形式,把樣式放在</head>,在不影響效果的情況下,腳本都放在<body>底部。
減少站外HTTP請求:DNS預解析
細心的站長發(fā)現(xiàn):把百度廣告、百度分享、百度推薦、百度統(tǒng)計、暢言、在線客服等代碼一放上去,加載時間明顯變慢了,解決方法參考文章《DNS預解析提升頁面加載速度dns-prefetch》
SEO優(yōu)化:減少HTTP請求方法總結
前端優(yōu)化原則和后端優(yōu)化原則是一致的,不是分化的,不是“這不關我的事”,能把前、后端都抓好的人畢竟不多,明白道理卻無法解決問題的那是“思想家”,SEO需要的是“實戰(zhàn)家”。
根據(jù)不同的網站的特性選擇優(yōu)化側重點,分析好用戶需求,解決這些需求。前臺布局展示不好,后端不能按照用戶體驗開發(fā)功能,都是紙上談兵,我們應該讓自己的知識面更廣,才能獲得更好的成績。