Ponchimeow 網站優化結果

[Ponchimeow]

網址

lazy-hackathon

WebPageTest 報告網址

WebPageTest

測速截圖

優化前

優化後

你做了哪些優化？

1. index.html 刪除介紹、出師表、長恨歌註解，刪除未使用的 js 載入，刪除註解
2. js 乍看下有些沒用到的 functoin，測試後刪除
3. 將套件改為 cloudflare cdn，去除沒用到的 cdn
4. 將 icon 分類組合為 CSS Sprite，使用 sprite-generator
5. 使用 imageoptim 去除中繼資料
6. 使用 gulp 套件如下
   • gulp-plumber，catch exception
   • gulp-rename，重新命名
   • gulp-htmlmin，壓縮 html
   • gulp-responsive，修改圖片大小與品質
   • gulp-imagemin，壓縮圖片
   • gulp-webp，轉換圖片格式為 webp
   • gulp-concat，合併 css、js
   • gulp-clean-css，壓縮 css
   • gulp-uglify-es，壓縮 js
7. 最後的測試如下，錢錢從五個變兩個，PageSpeed Insights 測試則是從行動版 23 分與電腦版 68 分，提升至行動版 89 分與電腦版 99 分

心得

藉著 WebPageTest 的統計可以很直接的知道是 image 與 font 問題嚴重，所以對這兩個要修改是有方向的，其餘的就從各個檔案去看內容是否需要或是否有多餘，在 gulp 使用上也比上次使用時更熟悉一點點，不過主要速度有感是在使用 gulp-responsive 修改圖片大小之後ww