網址
https://chihyang41.github.io/lazy-hackathon-optimization/
WebPageTest 報告網址
https://www.webpagetest.org/result/190815_XM_db341b2b2d3eab147ebbc51007c720fa/
測速截圖
尚未優化前
優化後
你做了哪些優化？
我懶惰鬼，基本上都是找 gulp 的 plugin 來用。
圖片最佳化 Image Optimization
html 沒做太多，用 gulp-webp-html 把 html 加上 webp 專用 tag 。
css 方面先壓縮圖片，用的是 gulp-imagemin，壓縮完後把 png 和 jpg 圖檔都轉換成 webp，用的是 gulp-webp，差異蠻大的，比如原本的 bg_footer.png 從 3.6MB 變成 34KB。
render-blocking
把部分 script tag 加上 async 屬性。
HTML、CSS、JavaScript Minify
HTML 把來亂的出師表跟另一首詩的註解刪掉了 XDD 然後把檔案壓縮。
CSS 用 Dev Tools 本來看到有 Bootstrap.css 有 97% 內容沒用到，打算砍一砍，結果砍完跑版，動畫也毀了，所以就只是把兩個檔案壓縮。
JavaScript 單純就是壓縮檔案。
有待改進清單 & 原本要做
lazy loading
有稍微研究一下，但沒特別實作，之後有空我再加上這個。
刪掉沒用的 code
一開始大刀闊斧，到處刪，結果東西壞光光，想說算了就先把外部的 library 都先保留哈哈哈。
但一定有沒用的 code，我現在還是覺得 vue.js 或 angular.js 應該可以刪（？）等身體好點來研究一下。
減少 Reqeusts
這個應該要做才對，從檢測結果可以看到我 request 根本沒減少多少，把一些檔案打包起來減少 requests 會更好。
Gzip
原本有做這個，但是經過查詢發現 Github Pages 會自動幫忙做，所以就從 gulp 中刪掉這項任務。
Cache
Github Pages 好像也有做，不太確定 XDDD
心得
困難處
好難但也蠻能快速看到一些結果，比如圖片壓縮、檔案壓縮就有很明顯的數字能體現你的成果。
困難之處是不了解 code 的話很像在拆炸彈，因為依賴一堆 library 的關係，很可能刪掉某東西就毀了。第一次跑完 gulp 是網站整組壞光的那種 XDD 沒有去認真了解整個 code ，所以改什麼壞什麼，又或者是優化完之後網站爛掉，但不知道是哪裡出了問題，我到現在還是沒把 code 好好看完哈哈哈。
而這還算是比較單純的例子，真正的專案應該複雜很多，我無法想像自己親手毀掉一個公司的網站時會多慌張（？）
Web Performance 課程
Web Performance 的課程還不錯，讓我搞懂瀏覽器 render 的過程。
優點：
- 影片很短，每個影片不會超過三分鐘，很適合像我這種專注力不足的人。
- 配合圖解蠻清楚的，然後還會有問答題不會讓你睡著。
- 影片下面都會附上一些資源，蠻實用的。
缺點：
- 情境是一個是老師，一個是學生，演技稍嫌生硬（三小
- 裡面有些東西因為 Chrome 有改版所以會找不到，或是合併到其他處，像是 timeline 功能就在 perfomance 裡面了。
參考資料
檢測工具
web.dev
PageSpeed Insights
gulp plguin
gulp-webp
gulp-imagemin
gulp-jpeg-2000
gulp-jpeg-xr
gulp-htmlmin
gulp-gzip
文章
加載效能檢測工具
如何做圖片壓縮？
圖片最佳化（Image Optimization）
GZIP files on a web page
透過 lazy loading 延遲載入圖片
網頁前端效能優化學習筆記
网站性能优化
網址
https://chihyang41.github.io/lazy-hackathon-optimization/
WebPageTest 報告網址
https://www.webpagetest.org/result/190815_XM_db341b2b2d3eab147ebbc51007c720fa/
測速截圖
尚未優化前
優化後
你做了哪些優化？
我懶惰鬼，基本上都是找 gulp 的 plugin 來用。
圖片最佳化 Image Optimization
html 沒做太多，用 gulp-webp-html 把 html 加上 webp 專用 tag 。
css 方面先壓縮圖片，用的是 gulp-imagemin，壓縮完後把 png 和 jpg 圖檔都轉換成 webp，用的是 gulp-webp，差異蠻大的，比如原本的 bg_footer.png 從 3.6MB 變成 34KB。
render-blocking
把部分 script tag 加上 async 屬性。
HTML、CSS、JavaScript Minify
HTML 把來亂的出師表跟另一首詩的註解刪掉了 XDD 然後把檔案壓縮。
CSS 用 Dev Tools 本來看到有 Bootstrap.css 有 97% 內容沒用到，打算砍一砍，結果砍完跑版，動畫也毀了，所以就只是把兩個檔案壓縮。
JavaScript 單純就是壓縮檔案。
有待改進清單 & 原本要做
lazy loading
有稍微研究一下，但沒特別實作，之後有空我再加上這個。
刪掉沒用的 code
一開始大刀闊斧，到處刪，結果東西壞光光，想說算了就先把外部的 library 都先保留哈哈哈。
但一定有沒用的 code，我現在還是覺得 vue.js 或 angular.js 應該可以刪（？）等身體好點來研究一下。
減少 Reqeusts
這個應該要做才對，從檢測結果可以看到我 request 根本沒減少多少，把一些檔案打包起來減少 requests 會更好。
Gzip
原本有做這個，但是經過查詢發現 Github Pages 會自動幫忙做，所以就從 gulp 中刪掉這項任務。
Cache
Github Pages 好像也有做，不太確定 XDDD
心得
困難處
好難但也蠻能快速看到一些結果，比如圖片壓縮、檔案壓縮就有很明顯的數字能體現你的成果。
困難之處是不了解 code 的話很像在拆炸彈，因為依賴一堆 library 的關係，很可能刪掉某東西就毀了。第一次跑完 gulp 是網站整組壞光的那種 XDD 沒有去認真了解整個 code ，所以改什麼壞什麼，又或者是優化完之後網站爛掉，但不知道是哪裡出了問題，我到現在還是沒把 code 好好看完哈哈哈。
而這還算是比較單純的例子，真正的專案應該複雜很多，我無法想像自己親手毀掉一個公司的網站時會多慌張（？）
Web Performance 課程
Web Performance 的課程還不錯，讓我搞懂瀏覽器 render 的過程。
優點：
缺點：
參考資料
檢測工具
web.dev
PageSpeed Insights
gulp plguin
gulp-webp
gulp-imagemin
gulp-jpeg-2000
gulp-jpeg-xr
gulp-htmlmin
gulp-gzip
文章
加載效能檢測工具
如何做圖片壓縮？
圖片最佳化（Image Optimization）
GZIP files on a web page
透過 lazy loading 延遲載入圖片
網頁前端效能優化學習筆記
网站性能优化