week 3 網頁優化

2021/8/11

week 3 網頁優化

今晚，我想來點 Web 前端效能優化大補帖！

• 為什麼需要在前端做效能優化？

• Performance Analyzers：LightHouse, PageSpeed

• Core Web Vital

• Code Uglify

• Image Minimize、了解 jpg、png、 svg 的使用時機

• Critical Render Path 關鍵渲染路徑

• Code Splitting

• Dynamic Import

• Lazy Load

• Webpack Bundle Analyzer

• Virtualized List

• Tree Shaking

• Preload、Prefetch and others in <link> tag

• CDN & Cache

• Write Good Code

優化網站的 14 項原則性建議 @ Mercury的部落格

1. 儘量減少發出 HTTP 請求

2. 把內容分散到不同的伺服器

3. 每一項內容都註明到期日期

4. 把內容用 Gzip 壓縮

5. 把 CSS 放在網頁的開始位置

6. 把 JavaScript 放在網頁的最底位置

7. 不要使用 CSS 表達式

8. 把 CSS 和 JavaScript 放在外部檔案

9. 儘量減少瀏覽器查閱 DNS

10. 壓縮 JavaScript 檔案

11. 避免使用重新導向

12. 避免重複的 JavaScript

13. 正確配置 ETag

14. 把 Ajax 的結果緩存

前端性能優化與 SEO