前端裡面如何進行搜尋引擎優化(SEO)
如何進行SEO優化:
(1) 避免head標籤js堵塞:
所有放在head標籤裡面的js和css都會堵塞渲染;如果這些css和js需要載入很久的話,那麼頁面就空白了;
解決辦法:一是把script放到body後面,這也是很多網站採取的方法。
第二種是給script加defer或者async的屬性,一旦script是defer或者async延遲的,那麼這個script將會非同步載入,但不會馬上執行,會在readystatechange變為Interactive後按順序依次執行;(做了解)
(2) 減少head裡面的css資源:
css必須放在head標籤裡面,如果放在body裡面會造成對layout好的dom進行重排造成頁面閃爍;但是一旦放在head標籤裡面又會堵塞頁面渲染;所以要儘可能的減小css體積。
(3) 壓縮和快取:
(4)延遲載入圖片:
這裡沒有直接給src路徑,而是在頁面載入完成後用js操作src,減少了頁面載入圖片的時間,首先把整個頁面結構呈現給使用者;惰性載入圖片也是差不多;當用戶滑動頁面到一定高度時(監聽scroll事件),再動態的依次對圖片進行處理;
(5) DNS解析優化:
DNS查詢需要花費大量時間來返回一個主機名的IP地址;
在我們的網站中,可能會載入到很多個域的東西,比如引入了百度地圖啊之類的sdk和一些自己的子域名服務;第一次開啟網站時要做很多次DNS查詢;DNS預讀取能夠加快網頁開啟時間;
解決辦法:在head中寫上幾個link標籤,對標籤中的地址提前解析DNS,這個解析是並行發生的,不會堵塞頁面渲染;
6)html別巢狀太多層,加重頁面layout的壓力;
7)css選擇器的合理運用,減少匹配的計算量;
8)js中別濫用閉包,會加深作用域鏈,增加變數查詢時間;
9)減少http請求等