# Week20 網站優化

###### tags: `Week20`
我的 issue ： [ChihYang41 網站優化結果](https://github.com/Lidemy/lazy-hackathon/issues/2)
### 前言
這邊想要用紀錄流程的方式來寫，當中的步驟有成功也有失敗，還有偷懶沒做的，都會打在上面。

內容都是我 Week20 的心得上寫的，想說另外整理成筆記之後方便參閱。不是每一步都是對的，Huli 也有給一些建議，如果想看的話請前往這裡： [ChihYang41 Week20 心得](https://github.com/Lidemy/mentor-program-3rd-ChihYang41/pull/43)。

懶得看內文的可以看本文最下面的參考資料，有附上 gulp plguin、優化相關文章。
### 第一步 - 測試工具
丟到 [web.dev](https://web.dev/measure)、[PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/?hl=zh-TW&url=https%3A%2F%2Flidemy.github.io%2Flazy-hackathon%2F&tab=mobile) 兩個網站來跑分，這兩個網站很貼心的地方是會跟你說哪邊出了問題，然後哪些問題嚴重性比較高，理所當然地要從嚴重性高的地方著手。

### 第二步 - next-gen formats
我看到其中一個是說要把圖片改成用 next-gen formats ，查詢一下發現是把圖片換成 jpeg-2000、jpeg-xr 或 webp 的格式，然後再藉此延伸查詢到了圖片最佳化的相關資料，稍微看了一下這個網站，覺得最大的惡魔應該就是圖檔了，所以決定先從這邊下手。

### 第三步 - 圖片最佳化
#### 壓縮圖片
我用 [gulp-imagemin](https://www.npmjs.com/package/gulp-imagemin) 來處理這件事情，寫一個 task function 專門處理圖片的東東。
#### next-gen formats
我用 [gulp-webp](https://www.npmjs.com/package/gulp-webp) 把圖檔轉換，但一開始轉換發現幹，全部都沒顯示，才發現 webp 在 html 的 tag 上也要做一些新增。([Why and how to use WebP images today](https://bitsofco.de/why-and-how-to-use-webp-images-today/))

本來是打算手動改一改，但是真的很懶，所以找了 [gulp-webp-html](https://www.npmjs.com/package/gulp-webp-html) 來處理，就是會自動幫你在 html 加上 webp 要用的 tag，能夠不動手就不動手。

接著把 css 的圖片路徑都改成 webp 檔就大功告成，跑起來也沒毛病。能夠預想到的壞處是支援度不夠好，如果用 Chrome 或 Opera 以外的瀏覽器的話，圖片都不會顯示。

**Huli 回應**：
>那其實這樣就不行了，應該也要支援到才對，畢竟這很基本

#### lazy-loading
我有做功課了解一下，本來以為很麻煩，所以在這次網站優化就沒做，不過後來發現用 library 的話蠻簡單就可以實現。現在 Chrome 75 版也有提供 lazy-loading 的功能([Native lazy-loading for the web](https://web.dev/native-lazy-loading))，但是要使用者自己開啟這功能，我覺得優化還要使用者自己開 lazy-loading 不太實際，所以還是先靠 library 吧。

原理我覺得蠻酷的，實作概念是「讓你進去網頁沒辦法先下載圖片，等到滑到那裡才可以下載。」

基本都會在 img 不加 src，然後把圖片路徑寫在 data-src 裡，然後在 window 加上 EventListener，當你滑動到圖片位置的時候，JavaScript 就會取 data-src 的內容，把它放到 src 裡，這時候就可以下載圖片了。

不過這邊遇到的問題是 library 實作 lazy loading 都是支援 img tag， 用 webp 格式就比較孤立無援，目前是看到 [lazyload](https://github.com/verlok/lazyload) 說有支援 webp，但是我自己實作上沒效果，而我用他的 demo 測試看看也沒有 lazy-loading，不知道是哪裡出了問題，有待研究。

**Huli 回應**：
>也可以單純壓縮圖片不轉 webp，就可以無痛支援 lazy loading，webp 我記得大概省 20%~30% 圖片大小

### 第四步 - 砍沒用的 css
我是看到 [Coverage tab](https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage) 這個 Chrome Dev Tool 的工具，它可以幫你看這個檔案用了多少 %，哪邊沒用到、哪邊有用到，紅色的代表沒用到，綠色就是有用到。使用完之後發現 Bootstrap.css 有 97% 沒用到，大刀闊斧該砍了！

這步我用 [gulp-purifycss](https://www.npmjs.com/package/gulp-purify-css)，原理是會掃描你指定的檔案有沒有用到相關 css，沒有的話就把沒用到的 css 砍掉，我實作的結果是失敗的，是砍掉很多 css 沒錯..但也砍掉有用到的 css 了哈哈哈哈，版面變得爛歪歪，所以砍 css 這步我就先保留。

### 第五步 - 砍掉沒用的 JavaScript
先說結果，我最後什麼 JavaScript 都沒砍。

不過我覺得 vue.js 和 angular.js 可以砍，理由是觀察網站的互動後，有動畫的地方是 RWD 的 nav bar 以及下面的輪播效果，一個應該是靠 Bootstrap + jQuery 實現，另一個則是 slick，其他地方似乎沒什麼用到 JavaScript 的地方。實測把這兩個砍掉後，網站也沒出問題，所以我初步研判可以砍掉。（沒看 code 下的不可靠推論）

**最終結果：** 看完 code 後我砍掉了。
### 第六步 - Gzip
看優化相關的文章時，大家也都會提到文字壓縮，的確把文字資源壓縮會蠻可觀的，經過查詢 Github Pages 本身就會幫忙處理這一步，所以我就跳過了，但是部署到自己的 server 時這個步驟就不能忘記。

### 第七步 - render-blocking
在檢測工具講到這個的時候我自動性的忽略了，但後來才發現這是蠻重要的一步，[web performance](https://www.udacity.com/course/website-performance-optimization--ud884) 課程裡面有一一講解瀏覽器渲染的過程，從看 HTML tag 的 token，到建構 DOM tree -> CSSOM tree -> 結合兩者變成 render tree，但在建構 DOM tree 的過程如果丟 request 要 css 或 javascript 檔案，DOM tree 的建構就會停止，在得到 response 並執行完檔案前都不會繼續建構，形成 render-blocking 的狀況。

很簡單的示範大概像是這樣：

<p> Awesome page
  <script>document.write("with JavaScript")</script>
    is awesome.
</p>
    
// 文字顯示會是 Awesome page with JavaScript is awesome.

改善的方法也蠻單純的，script tag 就加上 async；css 則是看你的檔案是否有 responsive 專用，透過 media 這個屬性來決定何時要下載這個檔案。

不過要注意的是 async 在使用時，有時 library 互相依賴會有點問題，我自己使用時是發現某些檔案就是要趕快載入不然會跑版，那些就沒加上 async。

### 第八步 - 壓縮各種檔案
這步就沒什麼，單純把各種檔案壓縮。

### 總結
#### 心得
重點在圖檔上面，把圖檔處理好基本上就完成 80% （不知道有沒有那麼誇張）所以算是相對單純的優化。

#### 檢討
檢討是我沒認真看 code，如果有看 code 就可以把更細節的地方做好，另外也沒做 lazy-loading，我本來以為自己可以實作出來了，因為在 img tag 實作上沒問題，但 webp 好像讓我有點頭疼（？）

另外就是 requests 可以更減少，想到的幾個地方是：「第一，Icon 或許可以改成用其他方式來顯示？像是 Base64 Images；第二，把一些檔案用 webpack 打包起來，比如各種 js 檔、slick 資料夾的檔案，就可以減少 requests。」這幾個想法我不確定是否有問題，如果有問題麻煩 Huli 跟我說，感謝～

**Huli 回應：**
>看起來沒什麼問題，反正做完看有沒有減少載入時間就知道

## 參考資料

### 檢測工具
[web.dev](https://web.dev/measure)

[PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/?hl=zh-TW&url=https%3A%2F%2Flidemy.github.io%2Flazy-hackathon%2F&tab=mobile)

### gulp plguin
[gulp-webp](https://www.npmjs.com/package/gulp-webp)

[gulp-imagemin](https://www.npmjs.com/package/gulp-imagemin)

[gulp-jpeg-2000](https://www.npmjs.com/package/gulp-jpeg-2000)

[gulp-jpeg-xr](https://www.npmjs.com/package/gulp-jpeg-xr)

[gulp-htmlmin](https://www.npmjs.com/package/gulp-htmlmin)

[gulp-gzip](https://www.npmjs.com/package/gulp-gzip)
### 文章
[30 天學會 Web 前端效能優化](https://ithelp.ithome.com.tw/users/20091377/ironman/781)

[加載效能檢測工具](https://cythilya.github.io/2018/09/05/measuring-performance/)

[如何做圖片壓縮？](https://cythilya.github.io/2018/08/22/image-compression/)

[圖片最佳化（Image Optimization）](https://cythilya.github.io/2018/07/30/image-optimization/)

[GZIP files on a web page](https://stackoverflow.com/questions/39143605/gzip-files-on-a-web-page)

[透過 lazy loading 延遲載入圖片](https://medium.com/@mingjunlu/lazy-loading-images-via-the-intersection-observer-api-72da50a884b7)

[網頁前端效能優化學習筆記](https://medium.com/@chihsuan/%E7%B6%B2%E9%A0%81%E5%89%8D%E7%AB%AF%E6%95%88%E8%83%BD%E5%84%AA%E5%8C%96%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98-5993ccdb6f0d)

[网站性能优化](https://dwqs.gitbooks.io/frontenddevhandbook/content/learning/optimizing.html)