1.減少HTTP請求：
- 合併和壓縮CSS、JavaScript和圖片等靜態資源。
- 使用雪碧圖來減少圖片請求次數。
- 使用字型圖示代替圖片圖示，以減少HTTP請求。
- 使用CSS Sprites技術將多個小圖示合併成一張大圖來減少HTTP請求。
2.最佳化資源載入：
- 將JavaScript放在頁面底部，以確保頁面內容先載入。
- 使用非同步載入或延遲載入JavaScript，例如使用
defer和async屬性，或者透過動態建立<script>標籤。 - 使用CDN（內容分發網路）來加速靜態資源的載入。
3.圖片最佳化：
- 使用適當的圖片格式，如JPEG、PNG或WebP，並選擇合適的壓縮率。
- 使用圖片懶載入技術，延遲載入頁面上未出現在視窗中的圖片。
- 使用圖片佔位符或者CSS實現圖片載入過程中的佔位效果，避免頁面佈局抖動。
4.CSS和JavaScript最佳化：
- 最小化CSS和JavaScript檔案的大小，刪除不必要的空格、註釋和程式碼。
- 使用CSS前處理器（如Sass或Less）來提高CSS程式碼的可維護性，並使用壓縮工具壓縮生成的CSS檔案。
- 避免使用過多的CSS選擇器和JavaScript全域性變數，以減少渲染和執行時間。
5.快取最佳化：
- 使用瀏覽器快取機制，設定適當的快取頭資訊，如
Cache-Control和Expires。 - 使用服務端快取，如HTTP快取、CDN快取或快取資料庫查詢結果等。
6.DOM操作和重繪重排最佳化：
- 減少DOM操作和頻繁的重繪重排，儘量使用批次操作或者虛擬DOM技術。
- 使用
requestAnimationFrame()來最佳化動畫效果，以減少效能消耗。
7.移動端最佳化：
- 使用響應式設計或者移動端專用的佈局來適配不同螢幕尺寸的裝置。
- 避免使用過多的移動端專屬的CSS和JavaScript，以減少頁面載入時間。
8.程式碼最佳化：
- 定期清理和最佳化程式碼，刪除未使用的CSS和JavaScript，減少頁面的載入大小和執行時間。
- 使用效能監控工具，如Lighthouse、PageSpeed Insights等來分析頁面效能並進行最佳化。