John 網站優化成果

[CHANG-CHING-CHUNG]

網址

https://chang-ching-chung.github.io/lazy-hackathon/

WebPageTest 報告網址

https://www.webpagetest.org/result/201101_DiXK_d3428be529d15d8394074bad4ae8a9b3/

Google PageSpeed Insights
行動版分數截圖:

電腦版分數截圖:

WebPageTest

你做了哪些優化？

1. 壓縮圖片，一開始是用 gulp-imagemin 去壓縮圖片，但發現還是太大
   ，最後換成用 imagemin + imagemin-webp 將圖片全轉成 webp ，
   轉換完之後，最大檔案是 415 KB 最小則是 1KB。

2. 把沒用到的 CSS 刪掉及壓縮，使用的套件為 gulp-purifycss。

3. 把 Jquery, bootstrap, index 等 JS 檔壓縮，使用到的是線上壓縮網站，JavaScript Minifier

4. 刪掉 HTML 裡的註解及沒用到的 CDN 連結，並且壓縮 HTML ，使用的是線上 HTML 壓縮網站HTML minifier

5. 將 CDN 通通加上 defer，讓瀏覽器在 DOM 都解析完再載入 CDN。

6. 使用 Lazy loading 套件，vanilla-lazyload，延遲載入圖片，只有當畫面滾動到有圖片的位置時才載入，使資源可以集中在第一畫面的載入。

心得

通過這樣的優化過程，讓我了解到我的方向沒錯，圖片是最吃資源的，通常只要圖片壓得夠小，就可以大幅減少載入時間，
因此第一時間想到的就是，壓縮圖片、壓縮 JS 及刪除及壓縮 CSS ，這幾個方向之中，
最有用的就是壓縮圖片從 png 轉成 webp 以及 Lazy loading，這兩個做完其實就已經優化的差不多了，
剩下的 CSS 及 JS 壓縮只是錦上添化而已，因為並沒有完全的把無用的 JS 程式碼刪掉QQ

在這裡要跪拜一下大神 yakim-shu，優化報告解說得超級詳細，簡直就是優化聖經了QQ，希望有認識的機會，好好的學一下更多關於網頁優化的技術。