Lidemy/lazy-hackathon

shuanshuan030913 網站優化結果

shuanshuan030913 opened this issue · 2 comments

shuanshuan030913 commented

網址

https://shuanshuan030913.github.io/lazy-hackathon/

WebPageTest 報告網址

https://www.webpagetest.org/result/190827_1G_3aa96a977142c691b4370aab5cfcb8af/

測速截圖

0001

你做了哪些優化？

HTML

  • 手動刪註解詩
  • 檢查沒有用到的 link 和 script，刪掉
  • 把可以用 cdn 解決的東西都丟給 cdn，本機端的刪掉（因為 cdn 的 cache 都處理好了很方便XD）
  • gulp-concat 把 css 和 js 各自打包成一包，減少 request
  • gulp-htmlmin 去掉空白（後來發現這個 plugin 竟然沒去註解...）

image

  • 丟到線上網站去壓縮，先後用這兩個網站，總共壓了兩次
    • tinyJPG 可以看得出畫質有被破壞，優點是一次可以丟多張圖一起壓縮
    • squoosh Google 提供的壓縮工具，優點是可以自己決定每張圖要保留幾趴的 quality，缺點是要一張一張處理
  • icon 找到 svg 原始檔，用 icomoon 做成 icon font，本來 html 裡面有一個 icon font 的連結，但是後來發現只有用到一個 icon，我就把連結刪掉，組成自己做的 icon font 一起用了~（但是有一個 icon 找不到原檔 QQ，就為了他把 css 留下來了）

CSS

  • 研究 code，把 icon 轉成 icon font
  • gulp-csso 壓縮 css
  • gulp-concat 把所有 css 打包成一支 css，減少 request

JS

  • 把多餘的 code 刪掉
  • gulp-concat 把所有 js 打包成一支 css，減少 request

心得

第一眼印象：這是一個很煩躁的網頁

我在畫面 load 好之後先打開 index.html 研究，然後就看到來鬧的註解詩XD，刪掉掰~

因為 load 圖很討厭，所以先把圖片丟到 PS 修一下大小（這邊突然很好奇不會用 PS 的同學要怎麼改圖片的大小呢？）然後用 tinyJPG 先壓過一遍，但我不喜歡拿這個網站壓大圖，因為肉眼能看出來有差，所以第一批先壓了我認為可以壓的小圖

後來就去看 code，看 js 覺得好難懂，就裝了 eslint 讓程式幫我看，一邊試 code 會不會壞一邊刪，果然很多是假的 code 呢 XD 這網頁又沒什麼功能#

一邊發現 html 裡面也有很多沒用到的 script 和 css，砍掉

這邊開始改起 icon，一開始以為 icon 是從 icon font 出來的，後來發現只有一個是有現成的字體，本來想用 css sprite，後來做到一半發現 Yakim 是用 mask 的方法做 icon，和一邊拿來當 background 定位不太一樣，後來就看起來 SVG sprite（有查一下圖後發現 icon 網站上面有原圖，就去載 SVG 下來），照著教學做到一半就學不下去了，因為後面是用 react 接下去實作的，加上我也不太會用 SVG，後來看到 icomoon 可以自製字型就去試試看了，只可惜有一張找不到來源圖QQ

找 icon SVG 花了蠻久的，大概一個早上都在找圖 hahaha

再測一次結果圖片還是 F ，就去估狗了一下有沒有更好用的壓縮網站，查到了 google 的 squoosh ，覺得還不錯用，選 75% 品質還可以砍掉 90% 大小，玩的很嗨，雖然要一張一張傳，但本專案也是不用到幾百張，用的還是很開心的

一開始 gulp 是為了對 css 和 js 壓縮，做大之後又去查了一下網路上神人都推薦什麼可以用，gulp 完整了之後，就想說順便複習個 webpack，但是發現 webpack 好像用不太到，又砍掉了（重複裝裝砍砍的實驗過程）有些工具用起來卡卡或一直失敗（像是我看了同學的 issue 試試用 Gzip 可是輸出了那個 zip 檔不知道接下來要怎麼做才能執行，還是砍掉了）有些成功的就用下去，總之還是蠻好玩的！

後來拿去其他網站測，很有趣的是估狗的結果
顯示原來的網站只有 8 分 XDDD
我最後一版是行動版 91 分，電腦版 99 分
當然分數不代表什麼，結果裡面有寫到一條應該要精簡 code 的部分，我有注意到 boostrap 的 css 其實只套用到很少的部分，但是要抓出來好麻煩......這邊就放著了

Webpagetest 的結果 cache 部分是 F...，可是上網查是說 github page 不能改 cache 設定，就放著了

還可以改正的部分像是 slide show 那裡，縮圖感覺也可以用 css sprite，但是我懶了......

總之就是這樣，感謝 Yakim 同學出的作業（我不知道怎麼標人...XD）
而且為了要改 code 就必須要很認真地看 code，好像又偷師到一些 scss 的技巧！好多方便的 function 快學起來 XD

做到這裡，真的有感優化其實只是一個比較的過程，如果有機會的話，出個和同學交換改網站的作業應該也是很棒的~

aszx87410 commented

（這邊突然很好奇不會用 PS 的同學要怎麼改圖片的大小呢？）

網路上也有很多現成服務可以調整大小

Webpagetest 的結果 cache 部分是 F...，可是上網查是說 github page 不能改 cache 設定，就放著了

是的，這個倒是沒差，因為也不能改

優化做得很不錯 👍
可以看到速度真的快滿多的，最後拿去辜狗測試的結果也很不錯
再補上幾個優化（webp, lazy loading）之類的應該就差不多了
不過現在的成果已經不錯了～

shuanshuan030913 commented

嘗試了一下 webp

  1. 好用的 gulp-webp 在 win7 上不能執行，用錯誤訊息搜到一個答案在這

CLSID_WICImagingFactory在Windows10上被解析为了CLSID_WICImagingFactory2，而这个GUID在Windows7上是不存在的

這個解法對我來講也是很迷

解决方案就是传递CLSID_WICImagingFactory1给CoCreateInstance()。这样就能同时兼容Windows10和Windows7了

  1. 後來嘗試用 node js 的方式，可能底層程式是一樣的，也失敗~
  2. 上網去尋找轉檔 webp 的網站，每個都每日限定只能轉幾個，或是只能一個一個轉 QQ

決定目前就先這樣，被 webp 搞得頭好痛...

lazy load 好像是用 javascript 動態去捕捉的，以前有看過 plugin 沒學起來，這個也放進之後有空再研究的部分 😅