前端相關的網站最佳化

標籤：預設   圖片   重要   開始   決定   移動終端   rip   位置   密度   

 

圖片懶載入，在頁面上的未可視地區可以添加一個捲軸事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，如果前者小於後者，優先載入。如果為投影片、相簿等，可以使用圖片預先載入技術，將當前展示圖片的前一張和後一張優先下載。
如果圖片為 css 圖片，可以使用 CSSsprite，SVGsprite，Iconfont、Base64 等技術。
如果圖片過大，可以使用特殊編碼的圖片，載入時會先載入一張壓縮的特別厲害的縮圖，以提高使用者體驗。
如果圖片展示地區小於圖片的真實大小，則因在伺服器端根據業務需要先行進行圖片壓縮，圖片壓縮後大小與展示一致。

 

HTML 結構語義化：
更符合 W3C 統一的規範標準，是技術趨勢。
沒有樣式時瀏覽器的預設樣式也能讓頁面結構很清晰。
對功能障礙方便使用。螢幕助讀程式（如果訪客有視障）會完全根據你的標記來“讀”你的網頁。
對其他非主流終端裝置友好。例如機頂盒、PDA、各種移動終端。
對 SEO 友好。

 

以前端角度出發的SEO：

搜尋引擎主要以:外鏈數量和品質網頁內容和結構來決定某關鍵字下的網頁搜尋排名。

前端應該注意網頁結構和內容方面的情況：
Meta 標籤最佳化
主要包括主題（Title)，網站描述(Description)。還有一些其它的隱藏文字比如 Author（作者），Category（目錄），Language（編碼語種）等。
符合 W3C 規範的語義性標籤的使用。
如何選取關鍵詞並在網頁中放置關鍵詞
搜尋就得用關鍵詞。關鍵詞分析和選擇是 SEO 最重要的工作之一。首先要給網站確定主關鍵詞（一般在 5 個上下），然後針對這些關鍵詞進行最佳化，包括關鍵詞密度（Density），相關度（Relavancy），突出性（Prominency）等等。

 

在css/js代碼上線之後開發人員經常會最佳化效能，從使用者重新整理網頁開始，一次js請求後進行緩衝處理，例如dns 緩衝，cdn 緩衝，瀏覽器緩衝，伺服器緩衝。

前端相關的網站最佳化