圖片懶加載，在頁面上的未可視區域可以添加一個滾動條事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，如果前者小於後者，優先加載。如果為幻燈片、相冊等，可以使用圖片預加載技術，將當前展示圖片的前一張和後一張優先下載。
如果圖片為 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 緩存，瀏覽器緩存，服務器緩存。

前端相關的網站優化