轉(zhuǎn)載：https://blog.csdn.net/xustart7720/article/details/79960591?

瀏覽器訪問優(yōu)化
瀏覽器請(qǐng)求處理流程如下圖：

　　　　

?

Etag:實(shí)體標(biāo)籤。ETag是HTTP協(xié)議提供的若干機(jī)制中的一種Web緩存驗(yàn)證機(jī)制，并且允許客戶端進(jìn)行緩存協(xié)商。這就使得緩存變得更加高效，而且節(jié)省帶寬。如果資源的內(nèi)容沒有發(fā)生改變，Web服務(wù)器就不需要發(fā)送一個(gè)完整的響應(yīng)。ETag也可用于樂觀并發(fā)控制^[1]，作為一種防止資源同步更新而相互覆蓋的方法。--<w3schol>

?

?

web頁面優(yōu)化

1、減少http請(qǐng)求，合理設(shè)置 HTTP緩存
　　http協(xié)議是無狀態(tài)的應(yīng)用層協(xié)議，意味著每次http請(qǐng)求都需要建立通信鏈路、進(jìn)行數(shù)據(jù)傳輸，而在服務(wù)器端，每個(gè)http都需要啟動(dòng)獨(dú)立的線程去處理。這些通信和服務(wù)的開銷都很昂貴，減少http請(qǐng)求的數(shù)目可有效提高訪問性能。

　　減少http的主要手段是合并CSS、合并javascript、合并圖片。將瀏覽器一次訪問需要的javascript和CSS合并成一個(gè)文件，這樣瀏覽器就只需要一次請(qǐng)求。圖片也可以合并，多張圖片合并成一張，如果每張圖片都有不同的超鏈接，可通過CSS偏移響應(yīng)鼠標(biāo)點(diǎn)擊操作，構(gòu)造不同的URL。
緩存的力量是強(qiáng)大的，恰當(dāng)?shù)木彺嬖O(shè)置可以大大的減少 HTTP請(qǐng)求。假設(shè)某網(wǎng)站首頁，當(dāng)瀏覽器沒有緩存的時(shí)候訪問一共會(huì)發(fā)出 78個(gè)請(qǐng)求，共 600多 K數(shù)據(jù)，而當(dāng)?shù)诙卧L問即瀏覽器已緩存之后訪問則僅有 10個(gè)請(qǐng)求，共 20多 K數(shù)據(jù)。 (這里需要說明的是，如果直接 F5刷新頁面的話效果是不一樣的，這種情況下請(qǐng)求數(shù)還是一樣，不過被緩存資源的請(qǐng)求服務(wù)器是 304響應(yīng)，只有 Header沒有Body ，可以節(jié)省帶寬 )

　　怎樣才算合理設(shè)置 ?原則很簡單，能緩存越多越好，能緩存越久越好。例如，很少變化的圖片資源可以直接通過 HTTP Header中的Expires設(shè)置一個(gè)很長的過期頭 ;變化不頻繁而又可能會(huì)變的資源可以使用 Last-Modifed來做請(qǐng)求驗(yàn)證。盡可能的讓資源能夠在緩存中待得更久。關(guān)于 HTTP緩存的具體設(shè)置和原理此處就不再詳述了。

一：減少http請(qǐng)求，合併小內(nèi)容多請(qǐng)求的內(nèi)容。

2、使用瀏覽器緩存
對(duì)一個(gè)網(wǎng)站而言，CSS、javascript、logo、圖標(biāo)這些靜態(tài)資源文件更新的頻率都比較低，而這些文件又幾乎是每次http請(qǐng)求都需要的，如果將這些文件緩存在瀏覽器中，可以極好的改善性能。通過設(shè)置http頭中的cache-control和expires的屬性，可設(shè)定瀏覽器緩存，緩存時(shí)間可以是數(shù)天，甚至是幾個(gè)月。

在某些時(shí)候，靜態(tài)資源文件變化需要及時(shí)應(yīng)用到客戶端瀏覽器，這種情況，可通過改變文件名實(shí)現(xiàn)，即更新javascript文件并不是更新javascript文件內(nèi)容，而是生成一個(gè)新的JS文件并更新HTML文件中的引用。
使用瀏覽器緩存策略的網(wǎng)站在更新靜態(tài)資源時(shí)，應(yīng)采用逐量更新的方法，比如需要更新10個(gè)圖標(biāo)文件，不宜把10個(gè)文件一次全部更新，而是應(yīng)該一個(gè)文件一個(gè)文件逐步更新，并有一定的間隔時(shí)間，以免用戶瀏覽器忽然大量緩存失效，集中更新緩存，造成服務(wù)器負(fù)載驟增、網(wǎng)絡(luò)堵塞的情況。

3、啟用壓縮
在服務(wù)器端對(duì)文件進(jìn)行壓縮，在瀏覽器端對(duì)文件解壓縮，可有效減少通信傳輸?shù)臄?shù)據(jù)量。如果可以的話，盡可能的將外部的腳本、樣式進(jìn)行合并，多個(gè)合為一個(gè)。文本文件的壓縮效率可達(dá)到80%以上，因此HTML、CSS、javascript文件啟用GZip壓縮可達(dá)到較好的效果。但是壓縮對(duì)服務(wù)器和瀏覽器產(chǎn)生一定的壓力，在通信帶寬良好，而服務(wù)器資源不足的情況下要權(quán)衡考慮。

4、 CSS Sprites
　　合并 CSS圖片，減少請(qǐng)求數(shù)的又一個(gè)好辦法。

5、Lazy Load Images（懶加載圖片，瀑布流加載機(jī)制）
　　這條策略實(shí)際上并不一定能減少 HTTP請(qǐng)求數(shù)，但是卻能在某些條件下或者頁面剛加載時(shí)減少 HTTP請(qǐng)求數(shù)。對(duì)于圖片而言，在頁面剛加載的時(shí)候可以只加載第一屏，當(dāng)用戶繼續(xù)往后滾屏的時(shí)候才加載后續(xù)的圖片。這樣一來，假如用戶只對(duì)第一屏的內(nèi)容感興趣時(shí)，那剩余的圖片請(qǐng)求就都節(jié)省了。

6、CSS放在頁面最上部，javascript放在頁面最下面
　　瀏覽器會(huì)在下載完成全部CSS之后才對(duì)整個(gè)頁面進(jìn)行渲染，因此最好的做法是將CSS放在頁面最上面，讓瀏覽器盡快下載CSS。如果將 CSS放在其他地方比如 BODY中，則瀏覽器有可能還未下載和解析到 CSS就已經(jīng)開始渲染頁面了，這就導(dǎo)致頁面由無 CSS狀態(tài)跳轉(zhuǎn)到 CSS狀態(tài)，用戶體驗(yàn)比較糟糕，所以可以考慮將CSS放在HEAD中。

　　Javascript則相反，瀏覽器在加載javascript后立即執(zhí)行，有可能會(huì)阻塞整個(gè)頁面，造成頁面顯示緩慢，因此javascript最好放在頁面最下面。但如果頁面解析時(shí)就需要用到j(luò)avascript，這時(shí)放到底部就不合適了。

　　Lazy Load Javascript（只有在需要加載的時(shí)候加載，在一般情況下并不加載信息內(nèi)容。）隨著 Javascript框架的流行，越來越多的站點(diǎn)也使用起了框架。不過，一個(gè)框架往往包括了很多的功能實(shí)現(xiàn)，這些功能并不是每一個(gè)頁面都需要的，如果下載了不需要的腳本則算得上是一種資源浪費(fèi) -既浪費(fèi)了帶寬又浪費(fèi)了執(zhí)行花費(fèi)的時(shí)間。目前的做法大概有兩種，一種是為那些流量特別大的頁面專門定制一個(gè)專用的 mini版框架，另一種則是 Lazy Load。

7、異步請(qǐng)求 Callback（就是將一些行為樣式提取出來，慢慢的加載信息的內(nèi)容）
　　
　　在某些頁面中可能存在這樣一種需求，需要使用 script標(biāo)簽來異步的請(qǐng)求數(shù)據(jù)。類似：

　　<code class="hljs javascript">　Javascript:
　　　　/*Callback 函數(shù)*/
　　　　function myCallback(info){
　　　　//do something here
　　　　}

　　　HTML:
　　　　Callback返回的內(nèi)容 :
　　　　myCallback('Hello world!');</code>

　　　　像以上這種方式直接在頁面上寫

8、減少cookie傳輸
　　一方面，cookie包含在每次請(qǐng)求和響應(yīng)中，太大的cookie會(huì)嚴(yán)重影響數(shù)據(jù)傳輸，因此哪些數(shù)據(jù)需要寫入cookie需要慎重考慮，盡量減少cookie中傳輸?shù)臄?shù)據(jù)量。另一方面，對(duì)于某些靜態(tài)資源的訪問，如CSS、script等，發(fā)送cookie沒有意義，可以考慮靜態(tài)資源使用獨(dú)立域名訪問，避免請(qǐng)求靜態(tài)資源時(shí)發(fā)送cookie，減少cookie傳輸次數(shù)。

9、Javascript代碼優(yōu)化
(1). DOM　　
　　a. HTML Collection（HTML收集器，返回的是一個(gè)數(shù)組內(nèi)容信息）
　　在腳本中 document.images、document.forms 、getElementsByTagName()返回的都是 HTMLCollection類型的集合，在平時(shí)使用的時(shí)候大多將它作為數(shù)組來使用，因?yàn)樗?length屬性，也可以使用索引訪問每一個(gè)元素。不過在訪問性能上則比數(shù)組要差很多，原因是這個(gè)集合并不是一個(gè)靜態(tài)的結(jié)果，它表示的僅僅是一個(gè)特定的查詢，每次訪問該集合時(shí)都會(huì)重新執(zhí)行這個(gè)查詢從而更新查詢結(jié)果。所謂的 “訪問集合” 包括讀取集合的 length屬性、訪問集合中的元素。
　　因此，當(dāng)你需要遍歷 HTML Collection的時(shí)候，盡量將它轉(zhuǎn)為數(shù)組后再訪問，以提高性能。即使不轉(zhuǎn)換為數(shù)組，也請(qǐng)盡可能少的訪問它，例如在遍歷的時(shí)候可以將 length屬性、成員保存到局部變量后再使用局部變量。　　
　　b. Reflow & Repaint　　
　　除了上面一點(diǎn)之外， DOM操作還需要考慮瀏覽器的 Reflow和Repaint ，因?yàn)檫@些都是需要消耗資源的。

(2). 慎用 with　　
　　with(obj){ p = 1}; 代碼塊的行為實(shí)際上是修改了代碼塊中的 執(zhí)行環(huán)境 ，將obj放在了其作用域鏈的最前端，在 with代碼塊中訪問非局部變量是都是先從 obj上開始查找，如果沒有再依次按作用域鏈向上查找，因此使用 with相當(dāng)于增加了作用域鏈長度。而每次查找作用域鏈都是要消耗時(shí)間的，過長的作用域鏈會(huì)導(dǎo)致查找性能下降。
　　因此，除非你能肯定在 with代碼中只訪問 obj中的屬性，否則慎用 with，替代的可以使用局部變量緩存需要訪問的屬性。

(3). 避免使用 eval和 Function
　　每次 eval 或 Function 構(gòu)造函數(shù)作用于字符串表示的源代碼時(shí)，腳本引擎都需要將源代碼轉(zhuǎn)換成可執(zhí)行代碼。這是很消耗資源的操作 —— 通常比簡單的函數(shù)調(diào)用慢 100倍以上。
　　eval 函數(shù)效率特別低，由于事先無法知曉傳給 eval 的字符串中的內(nèi)容，eval在其上下文中解釋要處理的代碼，也就是說編譯器無法優(yōu)化上下文，因此只能有瀏覽器在運(yùn)行時(shí)解釋代碼。這對(duì)性能影響很大。
　　Function 構(gòu)造函數(shù)比 eval略好，因?yàn)槭褂么舜a不會(huì)影響周圍代碼 ;但其速度仍很慢。
　　此外，使用 eval和 Function也不利于Javascript 壓縮工具執(zhí)行壓縮。

(4). 減少作用域鏈查找
　　前文談到了作用域鏈查找問題，這一點(diǎn)在循環(huán)中是尤其需要注意的問題。如果在循環(huán)中需要訪問非本作用域下的變量時(shí)請(qǐng)?jiān)诒闅v之前用局部變量緩存該變量，并在遍歷結(jié)束后再重寫那個(gè)變量，這一點(diǎn)對(duì)全局變量尤其重要，因?yàn)槿肿兞刻幱谧饔糜蜴湹淖铐敹?#xff0c;訪問時(shí)的查找次數(shù)是最多的。
　　
　　低效率的寫法：
　　

<code class=" hljs javascript">// 全局變量
var globalVar = 1;
function myCallback(info){
for( var i = 100000; i--;){
//每次訪問 globalVar 都需要查找到作用域鏈最頂端，本例中需要訪問 100000 次
globalVar += i;
}
}
</code>

更高效的寫法：

<code class=" hljs javascript">// 全局變量
var globalVar = 1;
function myCallback(info){
//局部變量緩存全局變量
var localVar = globalVar;
for( var i = 100000; i--;){
//訪問局部變量是最快的
localVar += i;
}
//本例中只需要訪問 2次全局變量
在函數(shù)中只需要將 globalVar中內(nèi)容的值賦給localVar 中
globalVar = localVar;
}</code>

此外，要減少作用域鏈查找還應(yīng)該減少閉包的使用。

(5). 數(shù)據(jù)訪問
　　Javascript中的數(shù)據(jù)訪問包括直接量 (字符串、正則表達(dá)式 )、變量、對(duì)象屬性以及數(shù)組，其中對(duì)直接量和局部變量的訪問是最快的，對(duì)對(duì)象屬性以及數(shù)組的訪問需要更大的開銷。當(dāng)出現(xiàn)以下情況時(shí)，建議將數(shù)據(jù)放入局部變量：
　　
　　a. 對(duì)任何對(duì)象屬性的訪問超過 1次
　　b. 對(duì)任何數(shù)組成員的訪問次數(shù)超過 1次
　　另外，還應(yīng)當(dāng)盡可能的減少對(duì)對(duì)象以及數(shù)組深度查找。

(6). 字符串拼接
　　在 Javascript中使用”+” 號(hào)來拼接字符串效率是比較低的，因?yàn)槊看芜\(yùn)行都會(huì)開辟新的內(nèi)存并生成新的字符串變量，然后將拼接結(jié)果賦值給新變量。與之相比更為高效的做法是使用數(shù)組的 join方法，即 將需要拼接的字符串放在數(shù)組中最后調(diào)用其 join方法得到結(jié)果。不過由于使用數(shù)組也有一定的開銷，因此當(dāng)需要拼接的字符串較多的時(shí)候可以考慮用此方法。

10、CSS選擇符優(yōu)化
　　在大多數(shù)人的觀念中，都覺得瀏覽器對(duì) CSS選擇符的解析式從左往右進(jìn)行的，例如
#toc A { color: #444; }這樣一個(gè)選擇符，如果是從右往左解析則效率會(huì)很高，因?yàn)榈谝粋€(gè) ID選擇基本上就把查找的范圍限定了，但實(shí)際上瀏覽器對(duì)選擇符的解析是從右往左進(jìn)行的。如上面的選擇符，瀏覽器必須遍歷查找每一個(gè) A標(biāo)簽的祖先節(jié)點(diǎn)，效率并不像之前想象的那樣高。根據(jù)瀏覽器的這一行為特點(diǎn)，在寫選擇符的時(shí)候需要注意很多事項(xiàng)，有興趣的童鞋可以去了解一下。

　　CDN加速
CDN（content distribute network，內(nèi)容分發(fā)網(wǎng)絡(luò)）的本質(zhì)仍然是一個(gè)緩存，而且將數(shù)據(jù)緩存在離用戶最近的地方，使用戶以最快速度獲取數(shù)據(jù)，即所謂網(wǎng)絡(luò)訪問第一跳，反向代理 ，如下圖。

　　

?

傳統(tǒng)代理服務(wù)器位于瀏覽器一側(cè)，代理瀏覽器將http請(qǐng)求發(fā)送到互聯(lián)網(wǎng)上，而反向代理服務(wù)器位于網(wǎng)站機(jī)房一側(cè)，代理網(wǎng)站web服務(wù)器接收http請(qǐng)求。如下圖所示：

?

?

網(wǎng)站安全的作用，來自互聯(lián)網(wǎng)的訪問請(qǐng)求必須經(jīng)過代理服務(wù)器，相當(dāng)于web服務(wù)器和可能的網(wǎng)絡(luò)攻擊之間建立了一個(gè)屏障。

　　除了安全功能代理服務(wù)器也可以通過配置緩存功能加速web請(qǐng)求。當(dāng)用戶第一次訪問靜態(tài)內(nèi)容的時(shí)候，靜態(tài)內(nèi)容就被緩存在反向代理服務(wù)器上，這樣當(dāng)其他用戶訪問該靜態(tài)內(nèi)容的時(shí)候，就可以直接從反向代理服務(wù)器返回，加速web請(qǐng)求響應(yīng)速度，減輕web服務(wù)器負(fù)載壓力。事實(shí)上，有些網(wǎng)站會(huì)把動(dòng)態(tài)內(nèi)容也緩存在代理服務(wù)器上，比如維基百科及某些博客論壇網(wǎng)站，把熱門詞條、帖子、博客緩存在反向代理服務(wù)器上加速用戶訪問速度，當(dāng)這些動(dòng)態(tài)內(nèi)容有變化時(shí)，通過內(nèi)部通知機(jī)制通知反向代理緩存失效，反向代理會(huì)重新加載最新的動(dòng)態(tài)內(nèi)容再次緩存起來。

　　此外，反向代理也可以實(shí)現(xiàn)負(fù)載均衡的功能，而通過負(fù)載均衡構(gòu)建的應(yīng)用集群可以提高系統(tǒng)總體處理能力，進(jìn)而改善網(wǎng)站高并發(fā)情況下的性能。

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

一、搜索引擎工作原理
　　當(dāng)我們?cè)谳斎肟蛑休斎腙P(guān)鍵詞，點(diǎn)擊搜索或查詢時(shí)，然后得到結(jié)果。深究其背后的故事，搜索引擎做了很多事情。

　　在搜索引擎網(wǎng)站，比如百度，在其后臺(tái)有一個(gè)非常龐大的數(shù)據(jù)庫，里面存儲(chǔ)了海量的關(guān)鍵詞，而每個(gè)關(guān)鍵詞又對(duì)應(yīng)著很多網(wǎng)址，這些網(wǎng)址是百度程序從茫茫的互聯(lián)網(wǎng)上一點(diǎn)一點(diǎn)下載收集而來的，這些程序稱之為“搜索引擎蜘蛛”或“網(wǎng)絡(luò)爬蟲”。這些勤勞的“蜘蛛”每天在互聯(lián)網(wǎng)上爬行，從一個(gè)鏈接到另一個(gè)鏈接，下載其中的內(nèi)容，進(jìn)行分析提煉，找到其中的關(guān)鍵詞，如果“蜘蛛”認(rèn)為關(guān)鍵詞在數(shù)據(jù)庫中沒有而對(duì)用戶是有用的便存入數(shù)據(jù)庫。反之，如果“蜘蛛”認(rèn)為是垃圾信息或重復(fù)信息，就舍棄不要，繼續(xù)爬行，尋找最新的、有用的信息保存起來提供用戶搜索。當(dāng)用戶搜索時(shí)，就能檢索出與關(guān)鍵字相關(guān)的網(wǎng)址顯示給訪客。

　　一個(gè)關(guān)鍵詞對(duì)用多個(gè)網(wǎng)址，因此就出現(xiàn)了排序的問題，相應(yīng)的當(dāng)與關(guān)鍵詞最吻合的網(wǎng)址就會(huì)排在前面了。在“蜘蛛”抓取網(wǎng)頁內(nèi)容，提煉關(guān)鍵詞的這個(gè)過程中，就存在一個(gè)問題：“蜘蛛”能否看懂。如果網(wǎng)站內(nèi)容是flash和js，那么它是看不懂的，會(huì)犯迷糊，即使關(guān)鍵字再貼切也沒用。相應(yīng)的，如果網(wǎng)站內(nèi)容是它的語言，那么它便能看懂，它的語言即SEO。

二、SEO簡介
　　全稱：Search English Optimization，搜索引擎優(yōu)化。自從有了搜索引擎，SEO便誕生了。

　　存在的意義：為了提升網(wǎng)頁在搜索引擎自然搜索結(jié)果中的收錄數(shù)量以及排序位置而做的優(yōu)化行為。簡言之，就是希望百度等搜索引擎能多多我們收錄精心制作后的網(wǎng)站，并且在別人訪問時(shí)網(wǎng)站能排在前面。

　　分類：白帽SEO和黑帽SEO。白帽SEO，起到了改良和規(guī)范網(wǎng)站設(shè)計(jì)的作用，使網(wǎng)站對(duì)搜索引擎和用戶更加友好，并且網(wǎng)站也能從搜索引擎中獲取合理的流量，這是搜索引擎鼓勵(lì)和支持的。黑帽SEO，利用和放大搜索引擎政策缺陷來獲取更多用戶的訪問量，這類行為大多是欺騙搜索引擎，一般搜索引擎公司是不支持與鼓勵(lì)的。本文針對(duì)白帽SEO，那么白帽SEO能做什么呢？

　　1. 對(duì)網(wǎng)站的標(biāo)題、關(guān)鍵字、描述精心設(shè)置，反映網(wǎng)站的定位，讓搜索引擎明白網(wǎng)站是做什么的；

　　2. 網(wǎng)站內(nèi)容優(yōu)化：內(nèi)容與關(guān)鍵字的對(duì)應(yīng)，增加關(guān)鍵字的密度；

　　3. 在網(wǎng)站上合理設(shè)置Robot.txt文件；

　　4. 生成針對(duì)搜索引擎友好的網(wǎng)站地圖；

　　5. 增加外部鏈接，到各個(gè)網(wǎng)站上宣傳；

三、前端SEO
　　通過網(wǎng)站的結(jié)構(gòu)布局設(shè)計(jì)和網(wǎng)頁代碼優(yōu)化，使前端頁面既能讓瀏覽器用戶能夠看懂，也能讓“蜘蛛”看懂。

　　(1) 網(wǎng)站結(jié)構(gòu)布局優(yōu)化：盡量簡單、開門見山，提倡扁平化結(jié)構(gòu)。
　　
　　一般而言，建立的網(wǎng)站結(jié)構(gòu)層次越少，越容易被“蜘蛛”抓取，也就容易被收錄。一般中小型網(wǎng)站目錄結(jié)構(gòu)超過三級(jí)，“蜘蛛”便不愿意往下爬，“萬一天黑迷路了怎么辦”。并且根據(jù)相關(guān)調(diào)查：訪客如果經(jīng)過跳轉(zhuǎn)3次還沒找到需要的信息，很可能離開。因此，三層目錄結(jié)構(gòu)也是體驗(yàn)的需要。為此我們需要做到：

　　1. 控制首頁鏈接數(shù)量

　　網(wǎng)站首頁是權(quán)重最高的地方，如果首頁鏈接太少，沒有“橋”，“蜘蛛”不能繼續(xù)往下爬到內(nèi)頁，直接影響網(wǎng)站收錄數(shù)量。但是首頁鏈接也不能太多，一旦太多，沒有實(shí)質(zhì)性的鏈接，很容易影響用戶體驗(yàn)，也會(huì)降低網(wǎng)站首頁的權(quán)重，收錄效果也不好。

　　因此對(duì)于中小型企業(yè)網(wǎng)站，建議首頁鏈接在100個(gè)以內(nèi)，鏈接的性質(zhì)可以包含頁面導(dǎo)航、底部導(dǎo)航、錨文字鏈接等等，注意鏈接要建立在用戶的良好體驗(yàn)和引導(dǎo)用戶獲取信息的基礎(chǔ)之上。

　　2.扁平化的目錄層次，盡量讓“蜘蛛”只要跳轉(zhuǎn)3次，就能到達(dá)網(wǎng)站內(nèi)的任何一個(gè)內(nèi)頁。扁平化的目錄結(jié)構(gòu)，比如：“植物”–> “水果” –> “蘋果”、“桔子”、“香蕉”，通過3級(jí)就能找到香蕉了。

　　3.導(dǎo)航優(yōu)化

　　導(dǎo)航應(yīng)該盡量采用文字方式，也可以搭配圖片導(dǎo)航，但是圖片代碼一定要進(jìn)行優(yōu)化，<img>標(biāo)簽必須添加“alt”和“title”屬性，告訴搜索引擎導(dǎo)航的定位，做到即使圖片未能正常顯示時(shí)，用戶也能看到提示文字。

　　其次，在每一個(gè)網(wǎng)頁上應(yīng)該加上面包屑導(dǎo)航，好處：從用戶體驗(yàn)方面來說，可以讓用戶了解當(dāng)前所處的位置以及當(dāng)前頁面在整個(gè)網(wǎng)站中的位置，幫助用戶很快了解網(wǎng)站組織形式，從而形成更好的位置感，同時(shí)提供了返回各個(gè)頁面的接口，方便用戶操作；對(duì)“蜘蛛”而言，能夠清楚的了解網(wǎng)站結(jié)構(gòu)，同時(shí)還增加了大量的內(nèi)部鏈接，方便抓取，降低跳出率。

　　4. 網(wǎng)站的結(jié)構(gòu)布局----不可忽略的細(xì)節(jié)

　　1）頁面頭部：logo及主導(dǎo)航，以及用戶的信息。

　　2）頁面主體：左邊正文，包括面包屑導(dǎo)航及正文；右邊放熱門文章及相關(guān)文章，好處：留住訪客，讓訪客多停留，對(duì)“蜘蛛”而言，這些文章屬于相關(guān)鏈接，增強(qiáng)了頁面相關(guān)性，也能增強(qiáng)頁面的權(quán)重。

　　3）頁面底部：版權(quán)信息和友情鏈接。

　　特別注意：分頁導(dǎo)航寫法，推薦寫法：“首頁 1 2 3 4 5 6 7 8 9 下拉框”，這樣“蜘蛛”能夠根據(jù)相應(yīng)頁碼直接跳轉(zhuǎn)，下拉框直接選擇頁面跳轉(zhuǎn)。而下面的寫法是不推薦的，“首頁 下一頁 尾頁”，特別是當(dāng)分頁數(shù)量特別多時(shí)，“蜘蛛”需要經(jīng)過很多次往下爬，才能抓取，會(huì)很累、會(huì)容易放棄。

　　5.控制頁面的大小，減少http請(qǐng)求，提高網(wǎng)站的加載速度。

　　一個(gè)頁面最好不要超過100k，太大，頁面加載速度慢。當(dāng)速度很慢時(shí)，用戶體驗(yàn)不好，留不住訪客，并且一旦超時(shí)，“蜘蛛”也會(huì)離開。

　　(2) 網(wǎng)頁代碼優(yōu)化
　　
　　1.<title>標(biāo)題：只強(qiáng)調(diào)重點(diǎn)即可，盡量把重要的關(guān)鍵詞放在前面，關(guān)鍵詞不要重復(fù)出現(xiàn)，盡量做到每個(gè)頁面的<title>標(biāo)題中不要設(shè)置相同的內(nèi)容。

　　2.<meta keywords>標(biāo)簽：關(guān)鍵詞，列舉出幾個(gè)頁面的重要關(guān)鍵字即可，切記過分堆砌。

　　3.<meta description>標(biāo)簽：網(wǎng)頁描述，需要高度概括網(wǎng)頁內(nèi)容，切記不能太長，過分堆砌關(guān)鍵詞，每個(gè)頁面也要有所不同。

　　4.<body>中的標(biāo)簽：盡量讓代碼語義化，在適當(dāng)?shù)奈恢檬褂眠m當(dāng)?shù)臉?biāo)簽，用正確的標(biāo)簽做正確的事。讓閱讀源碼者和“蜘蛛”都一目了然。比如：h1-h6是用于標(biāo)題類的，<nav>標(biāo)簽是用來設(shè)置頁面主導(dǎo)航的等。

　　5.<a>標(biāo)簽：頁內(nèi)鏈接，要加“title” 屬性加以說明，讓訪客和 “蜘蛛” 知道。而外部鏈接，鏈接到其他網(wǎng)站的，則需要加上el="nofollow"屬性, 告訴 “蜘蛛” 不要爬，因?yàn)橐坏爸┲搿迸懒送獠挎溄又?#xff0c;就不會(huì)再回來了。

　　6.正文標(biāo)題要用<h1>標(biāo)簽：“蜘蛛” 認(rèn)為它最重要，若不喜歡<h1>的默認(rèn)樣式可以通過CSS設(shè)置。盡量做到正文標(biāo)題用<h1>標(biāo)簽，副標(biāo)題用<h2>標(biāo)簽, 而其它地方不應(yīng)該隨便亂用 h 標(biāo)題標(biāo)簽。

　　7.<br>標(biāo)簽：只用于文本內(nèi)容的換行，比如:

<p>
　　 第一行文字內(nèi)容<br/>
　　 第二行文字內(nèi)容<br/>
　　 第三行文字內(nèi)容
</p>
　8.表格應(yīng)該使用<caption>表格標(biāo)題標(biāo)簽

　 9.<img>應(yīng)使用 “alt” 屬性加以說明

　10.<strong>、<em>標(biāo)簽 : 需要強(qiáng)調(diào)時(shí)使用。<strong>標(biāo)簽在搜索引擎中能夠得到高度的重視，它能突出關(guān)鍵詞，表現(xiàn)重要的內(nèi)容，<em>標(biāo)簽強(qiáng)調(diào)效果僅次于<strong>標(biāo)簽。

　　　 <b>、<i>標(biāo)簽: 只是用于顯示效果時(shí)使用，在SEO中不會(huì)起任何效果。

　11、文本縮進(jìn)不要使用特殊符號(hào)? 應(yīng)當(dāng)使用CSS進(jìn)行設(shè)置。版權(quán)符號(hào)不要使用特殊符號(hào) ?; 可以直接使用輸入法，拼“banquan”，選擇序號(hào)5就能打出版權(quán)符號(hào)?。

　12、巧妙利用CSS布局，將重要內(nèi)容的HTML代碼放在最前面，最前面的內(nèi)容被認(rèn)為是最重要的，優(yōu)先讓“蜘蛛”讀取，進(jìn)行內(nèi)容關(guān)鍵詞抓取。

　13.重要內(nèi)容不要用JS輸出，因?yàn)椤爸┲搿辈徽J(rèn)識(shí)

　14.盡量少使用iframe框架,因?yàn)椤爸┲搿币话悴粫?huì)讀取其中的內(nèi)容

　15.謹(jǐn)慎使用display：none ：對(duì)于不想顯示的文字內(nèi)容，應(yīng)當(dāng)設(shè)置z-index或設(shè)置到瀏覽器顯示器之外。因?yàn)樗阉饕鏁?huì)過濾掉display:none其中的內(nèi)容。

　16. 不斷精簡代碼

　17.js代碼如果是操作DOM操作，應(yīng)盡量放在body結(jié)束標(biāo)簽之前，html代碼之后。

web開發(fā)面試題---性能優(yōu)化及SEO：
　　https://baijiahao.baidu.com/s?id=1589713089431651995&wfr=spider&for=pc.

web性能優(yōu)化及SEO:

　http://rrd.me/edssf

網(wǎng)址縮短：

　　http://www.8cc7.com/

SEO優(yōu)化網(wǎng)站：

　　http://www.bluecai.com/

轉(zhuǎn)載于:https://www.cnblogs.com/zhangdzz/p/10497845.html

總結(jié)

以上是生活随笔為你收集整理的web頁面優化以及SEO的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。