前端小白淺談seo優化以及web性能優化方案

寫在前面

---

這是很久以前的工做了，以前還沒用vue spa 作項目的時候，都是用的原生js寫項目，純html,css,js寫項目，真的是每一個頁面引用css,js各類文件寫到頭痛，那個時候作一個大型網站，基本都是各類ui框架，bootstrap,layui,amazy-ui,mui,weui,jqueryweui,zui,各類框架各類組合，代碼也是混亂不堪，項目體積大，對爬蟲不是特別友好，後來項目上線的時候，公司要求作seo，就開始了漫長的項目規範，優化代碼過程。在這過程當中也總結了好多經驗，再次記錄下來，方便之後學習更新使用。

ONE，首先介紹下seo

全稱：Search English Optimization，搜索引擎優化。自從有了搜索引擎，SEO便誕生了。
存在的意義：爲了提高網頁在搜索引擎天然搜索結果中的收錄數量以及排序位置而作的優化行爲。
 簡言之，就是但願百度等搜索引擎能多多咱們收錄精心製做後的網站，而且在別人訪問時網站能排在前面。
複製代碼

TWO，搜索引擎工做原理

(1),當咱們在輸入框中輸入關鍵詞，點擊搜索或查詢時，而後獲得結果。深究其背後的故事，搜索引擎作了不少事情

(2),在搜索引擎網站，好比百度，在其後臺有一個很是龐大的數據庫，裏面存儲了海量的關鍵詞，而每一個關鍵詞又對應着不少網址，這些網址是百度程序從茫茫的互聯網上一點一點下載收集而來的，這些程序稱之爲「搜索引擎蜘蛛」或「網絡爬蟲」。這些勤勞的「蜘蛛」天天在互聯網上爬行，從一個連接到另外一個連接，下載其中的內容，進行分析提煉，找到其中的關鍵詞，若是「蜘蛛」認爲關鍵詞在數據庫中沒有而對用戶是有用的便存入數據庫。反之，若是「蜘蛛」認爲是垃圾信息或重複信息，就捨棄不要，繼續爬行，尋找最新的、有用的信息保存起來提供用戶搜索。當用戶搜索時，就能檢索出與關鍵字相關的網址顯示給訪客。

(3),一個關鍵詞對用多個網址，所以就出現了排序的問題，相應的當與關鍵詞最吻合的網址就會排在前面了。在「蜘蛛」抓取網頁內容，提煉關鍵詞的這個過程當中，就存在一個問題：「蜘蛛」可否看懂。若是網站內容是flash和js，那麼它是看不懂的，會犯迷糊，即便關鍵字再貼切也沒用。相應的，若是網站內容是它的語言，那麼它便能看懂，它的語言即SEO。

THREE, 前端SEO

一，網站結構佈局優化：儘可能簡單、開門見山，提倡扁平化結構。

經過網站的結構佈局設計和網頁代碼優化，使前端頁面既能讓瀏覽器用戶可以看懂，也能讓「蜘蛛」看懂。 >>通常而言，創建的網站結構層次越少，越容易被「蜘蛛」抓取，也就容易被收錄。通常中小型網站目錄結構超過三級，「蜘蛛」便不肯意往下爬，「萬一天黑迷路了怎麼辦」。而且根據相關調查：訪客若是通過跳轉3次還沒找到須要的信息，極可能離開。所以，三層目錄結構也是體驗的須要。爲此咱們須要作到：

---

1,控制首頁連接數量

a, 網站首頁是權重最高的地方，若是首頁連接太少，沒有「橋」，「蜘蛛」不能繼續往下爬到內頁，直接影響網站收錄數量。可是首頁連接也不能太多，一旦太多，沒有實質性的連接，很容易影響用戶體驗，也會下降網站首頁的權重，收錄效果也很差。 b,所以對於中小型企業網站，建議首頁連接在100個之內，連接的性質能夠包含頁面導航、底部導航、錨文字連接等等，注意連接要創建在用戶的良好體驗和引導用戶獲取信息的基礎之上。

2,扁平化的目錄層次

儘可能讓「蜘蛛」只要跳轉3次，就能到達網站內的任何一個內頁。扁平化的目錄結構，好比：「植物」--> "水果" --> "蘋果"、「桔子」、「香蕉」，經過3級就能找到香蕉了。

3,導航優化

導航應該儘可能採用文字方式，也能夠搭配圖片導航，可是圖片代碼必定要進行優化，標籤必須添加「alt」和「title」屬性，告訴搜索引擎導航的定位，作到即便圖片未能正常顯示時，用戶也能看到提示文字。 其次，在每個網頁上應該加上面包屑導航，好處：從用戶體驗方面來講，可讓用戶瞭解當前所處的位置以及當前頁面在整個網站中的位置，幫助用戶很快了解網站組織形式，從而造成更好的位置感，同時提供了返回各個頁面的接口，方便用戶操做；對「蜘蛛」而言，可以清楚的瞭解網站結構，同時還增長了大量的內部連接，方便抓取，下降跳出率。

4,網站的結構佈局--不可忽略的細節

a,頁面頭部：logo及主導航，以及用戶的信息。 b,頁面主體：左邊正文，包括麪包屑導航及正文；右邊放熱門文章及相關文章，好處：留住訪客，讓訪客多停留，對「蜘蛛」而言，這些文章屬於相關連接，加強了頁面相關性，也能加強頁面的權重。 c,頁面底部：版權信息和友情連接。 d,特別注意：分頁導航寫法，推薦寫法：「首頁 1 2 3 4 5 6 7 8 9 下拉框」，這樣「蜘蛛」可以根據相應頁碼直接跳轉，下拉框直接選擇頁面跳轉。而下面的寫法是不推薦的，「首頁 下一頁 尾頁」，特別是當分頁數量特別多時，「蜘蛛」須要通過不少次往下爬，才能抓取，會很累、會容易放棄。

5,控制頁面的大小，減小http請求，提升網站的加載速度

一個頁面最好不要超過100k，太大，頁面加載速度慢。當速度很慢時，用戶體驗很差，留不住訪客，而且一旦超時，「蜘蛛」也會離開。

二，網頁代碼優化(參考，後期還會更新，仍是不太全面)

1,title標題：

只強調重點便可，儘可能把重要的關鍵詞放在前面，關鍵詞不要重複出現，儘可能作到每一個頁面的<title>標題中不要設置相同的內容。

2,meta keywords標籤：

關鍵詞，列舉出幾個頁面的重要關鍵字便可，切記過度堆砌。 <meta name="keywords" content="網賺論壇,網賺社區,網賺培訓"/>

3,meta description標籤：

網頁描述，須要高度歸納網頁內容，切記不能太長，過度堆砌關鍵詞，每一個頁面也要有所不一樣。 <meta name="description" content="進行一些表述" />

4,body中的標籤：

儘可能讓代碼語義化，在適當的位置使用適當的標籤，用正確的標籤作正確的事。讓閱讀源碼者和「蜘蛛」都一目瞭然。好比：h1-h6 是用於標題類的，<nav>標籤是用來設置頁面主導航的等。

5,a標籤:

頁內連接，要加 「title」 屬性加以說明，讓訪客和 「蜘蛛」 知道。而外部連接，連接到其餘網站的，則須要加上 el="nofollow" 屬性, 告訴 「蜘蛛」 不要爬，由於一旦「蜘蛛」爬了外部連接以後，就不會再回來了

6,正文標題要用<h1>標籤:

「蜘蛛」 認爲它最重要，若不喜歡

的默認樣式能夠經過CSS設置。儘可能作到正文標題用

標籤，副標題用

標籤, 而其它地方不該該隨便亂用 h 標題標籤。

7,應使用 "alt" 屬性加以說明

8,文本縮進不要使用特殊符號   應當使用CSS進行設置。版權符號不要使用特殊符號 © 能夠直接使用輸入法，拼「banquan」，選擇序號5就能打出版權符號©。

10,巧妙利用CSS佈局，將重要內容的HTML代碼放在最前面，最前面的內容被認爲是最重要的，優先讓「蜘蛛」讀取，進行內容關鍵詞抓取。

11,不要使用iframe框架,由於「蜘蛛」通常不會讀取其中的內容

12,謹慎使用 display：none ：對於不想顯示的文字內容，應當設置z-index或設置到瀏覽器顯示器以外。由於搜索引擎會過濾掉display:none其中的內容。

13,css代碼放在最前面，Js代碼前面

---

接下來談一下web性能優化。

其實，web性能優化與seo優化有着很大的聯繫，性能優化作好了，對seo有很大的幫助。 接下來講一下本身在項目中作過的優化方案，參考了好多大神的方案，以及本身總記得的經驗，記錄下來，方便之後更新學習。

前沿：

研究代表：用戶最滿意的打開網頁時間是2-5秒，若是等待超過10秒，99%的用戶會關閉這個網頁
複製代碼

接下來咱們將研究一下前端攻城獅如何來提升頁面的加載速度：

一，減小HTTP請求

彷佛只要提到性能優化，就會說到減小http請求，那麼就說說如何減小http請求：：
     1，能使用icon不適用圖片，實在避免不了要使用圖片，就使用雪碧圖，
     2，對圖片進行壓縮（通常網站的圖片在200k到500k之間）儘可能小於200k,
     3，圖片轉base64
     4, 使用靜態資源緩存
     5, 添加Expires頭
            a,頁面的初次訪問者會進行不少HTTP請求，可是經過使用一個長久的Expires頭，可使這些組件被緩存，下次訪問的時候，就能夠減小沒必要要的HTPP請求，從而提升加載速度。寫法：Cache-Control： max-age=12345600
     6，壓縮css,js,html
     7, 精簡代碼
     8，多使用外部文件，公共的js,css
     9, 圖片懶加載，資源按需加載，能夠減小大量的的請求
複製代碼

二，使用cdn加速

三，樣式css放頭部，js放底部

四，減小iframe數量，或者不要使用iframe由於爬蟲不會爬取iframe裏邊的內容

五，避免404

404表明服務器沒有找到資源，客戶端發送一個請求可是服務器卻返回一個無用的結果，時間浪費掉了
複製代碼

六，減小DNS查找

當咱們在瀏覽器的地址欄輸入網址（譬如： [小編簡書]https://www.jianshu.com/u/12e7fdbba52f） ，
    而後回車，回車這一瞬間到看到頁面到底發生了什麼呢？
複製代碼

域名解析 --> 發起TCP的3次握手 --> 創建TCP鏈接後發起http請求 --> 服務器響應http請求，瀏覽器獲得html代碼 --> 瀏覽器解析html代碼，並請求html代碼中的資源（如js、css、圖片等） --> 瀏覽器對頁面進行渲染呈現給用戶

七，使用ajax緩存

結束語

---

在學習過程當中總結下來的，可能也不太全面，記錄下來，方便學習，但願能幫助到本身和你們，也但願看到的攻城獅多多提出寶貴的意見，小編好更新學習。分享並快樂着。