在這之前，我們先了解一下，為什麼要優化效能？
為什麼要優化效能？Google 在 2010 年時發過 官方聲明，網站的速度、效能會影響搜尋排名，如果主機速度很慢、圖檔未壓縮、網站存在過多不必要的程式碼、註解，都會讓瀏覽器讀取過多不必要的內容，也將同時造成訪客及 Google 爬蟲的負擔。為了 SEO 的優化與排名，網站效能/速度優化就是一項重要工作。
文章大綱
01 測速工具介紹 | Tools
02 效能優化建議 | Optimization Tips
03 網頁切圖 | Image Slicicng
01 測速工具 | Tools
首先，先來介紹常見的測速工具吧！在專案上，最常使用的就是 Google 開發的：PageSpeed、Measure。
PageSpeed 主要提供行動版與桌機版網站測速分數，並針對網頁載入速度提供優化建議。
Measure 則是進一步提供網頁體驗報告，以四個向度分析，網站效能 (Performance)、無障礙設計 (Accessibility)、網頁最佳實務(Best Practices)、 搜尋引擎優化 (SEO)。
- 網站效能 (Performance)：通常會反映在客戶端與伺服器端上的溝通為主。
- 無障礙設計 (Accessibility)：使用輔助裝置觀看網站時，能否讓使用者順暢的使用。例如 <a>、<button> 沒有任何文字或 <img> 標籤內無替代文字，會被視為觸碰不到的資訊而被扣分。
- 網頁最佳實務(Best Practices)：主要面向程式碼上的優化，像是是否使用緩存機制，以及是否用了不推薦的語法。如：避免使用 document.write() ，對於連線速度較慢的使用者，透過 document.write() 動態置入的外部指令碼可能會導致網頁延遲數十秒載入。
- 搜尋引擎優化 (SEO)：搜尋引擎優化類，會直接影響到網站在搜尋引擎的排名。例如 <meta> 方面的資料有沒有設定完整，<img> 有沒有加上 alt 屬性等等都會被考慮在內。
02 效能優化建議 | Optimization Tips
Google 測速工具提供不少診斷與審核項目 (如下圖)，但本篇僅針對網頁效能，設計師能處理的範圍提供優化建議。
2.1 壓縮圖片
圖片是影響網頁效能的關鍵，網頁載入時，它總是佔最多的記憶體，解決它，網站效能的優化就解決大半，以下一些圖片優化的做法，下一章節會講解出圖建議。
- 能不用圖片就不用圖片
能用 CSS 就用 CSS 來製作圖片。以 SEO 角度來說，需要被搜尋引擎收錄的圖片請用 <img> 處理，若僅為設計或畫面美化，不包含任何文字訊息，則使用 CSS 的 background-image，相關討論詳見 Stackoverflow: When to use IMG vs. CSS background-image?
2. 使用合適的圖片大小
為確保圖片在每個裝置不失真，通常會出 2 倍大的圖，但在活動頁或需要提升效能的頁面，建議圖稿出 1.25–1.5 倍即可，為圖檔大小減肥，減少網路數據使用量、縮短載入時間。
3. 優先使用向量圖片
向量圖片較不受解析度和圖片縮放影響，可以應用在多種裝置，如 SVG 圖，但須注意的是，html 儘量不要撰寫 SVG / Canvas 的圖，因為 IE 瀏覽器並未完全支援。（詳見 Can I Use 說明，本文資料更新於 2021/10/29)
根據 Google 建議，也可使用 JPEG 2000、JPEG XR 和 WebP 等圖片格式，其壓縮效果通常優於 PNG 或 JPEG，因此能提高下載速度並節省使用者的數據用量。惟 WebP 格式在 IE / Edge / Safari 等瀏覽器仍不支援，或支援度較低 ( 詳見 Can I Use 說明 )。
4. 壓縮圖片大小
常用壓縮工具有：Tinypng、iloveimg、Compressor.io 等。
站台最常用的是 Tinypng，可一次上傳 20 張不超過 5 MB 大小的圖檔。通常壓縮第一次就能為圖片減肥 40% — 60% 以上，壓縮後不會使圖片顏色失真，故建議可壓縮個 3–5 次，讓圖檔大小壓縮到最極限。
5. 將圖片轉成 base64 編碼
將圖片轉為編碼字串，讓開發者能將圖檔嵌入 HTML、CSS 或 JavaScript 程式碼，以減少 HTTP Request。適合較少更新的小圖，例如 icon 等。
— 桑莫，前端工程師
無網狀態時，為讓圖片載入速度加快，可以透過 data URI scheme 將圖片轉成 Base64 編碼字串，只是 Base64 編碼的圖檔可能比原二進位檔案來得大，平均比原檔案大 33%。建議先壓縮圖檔，再轉 base64。
PNG 轉檔 base64 工具
預覽 base64 編碼圖片的 Image Viewer
2.2 延遲載入資源
- 延遲載入圖片
當網站圖片較多時，會造成網站開啟速度變慢。若已知專案的圖片過多，建議在網頁進切版時，先與前端工程師溝通，使用延遲加載（lazy load）技術，改善網頁速度。
什麼是 Lazyload 延遲載入？
藉由使用者剛好滑到圖片位置時，才顯示圖片的方式，達到節省資源、加速網頁速度的效果。在網路上有許多可以達成延遲載入圖片的套件，最常用的是這套開源套件 Lazyload.js，它是以純 JavaScript (Vanilla JavaScript) 實作。想要研究原理可以閱讀 深入了解 Lazyload。
2. CSS 也建議延遲載入嗎？
網頁載入的順序建議為 CSS → HTML → Javascript ，在實務面，不建議延遲載入 CSS，這樣會導致網頁先長完 HTML 結構後，才出現樣式，在頁面載入前期會造成跑版的錯覺。
2.3 程式語言優化
如果你跟我ㄧ樣，工作範圍也包含切版的話，可以做以下調整，如果沒有的話，就請放心地跳過這 Part 吧 XD
- 壓縮 CSS
可以使用線上工具，如 CSS Compressor，或者使用 VS Code 編輯器套件 Easy Sass。他會自動刪除不必要的空格與註解。
2. 撰寫有效率的 CSS
根據網站效率專家 Steve Souders 指出，各種CSS選擇器的效率由高至低排序如下：
1. ID (#id)2. Class (.class)3. Type (即HTML標籤,如div)4. 鄰接選擇器 (如: h2+p，僅作用於鄰接h2的p元素)5. Child (如: li>ul)6. Descendant (如:ul a)7. Universal (*)8. 屬性 (如: [type=”text”])9. 摸擬類別/元素 (如: a:hover)
值得注意的是，雖然 ID 效能最高，但差異其實很微小。
相關閱讀：Efficiently Rendering CSS
3. 去除不需要的註解
程式碼註解是開發人員的最佳夥伴，但瀏覽器不需要這項資訊 只要去除 CSS 、HTML 和 JavaScript 註解，即可大幅縮減網頁的總大小。
4. 移除未使用的 Javascript
5. 避免 DOM 節點數量過多
Google 建議應少於 1,500 個左右。理想的網頁樹狀層級應包含少於 32 個元素，以及少於 60 個下層/上層元素，太多會佔用過多的記憶體。
2.4 網頁字型優化
使用 CSS3 新屬性 font-display: swap;
當 web font 還沒完全下載可用時，可以用 font-display 去設定想要怎麼顯示我們的字型，而 font-display: swap; 就是告訴瀏覽器，想先用替代字型，等真正的字型下載完畢再換上！效果是，字型加載時閃爍時間變短，這對網速慢的使用者來說是較友善的。
相關閱讀：網頁加載字型Web Font FOIT& FOUT與效能測試 （這篇解說十分詳盡）
03 網頁切圖 | Image Slicing
在前一章節有提到，在活動頁或需要提升效能的頁面，建議圖稿出 1.25–1.5 倍，為圖檔減肥，減少網路數據使用量、縮短載入時間。
3.1 網頁切圖建議 Sketch
- 在軟體中，出圖尺寸範圍 1.25–1.5 倍，依最後轉存後的圖檔大小，控制出圖的尺寸大小。
2. 到 Tinypng 壓縮，至少壓縮 3–5 次，確保圖檔大小已經不能再壓縮。
以上圖插畫為範例，原本 1.5 倍大的圖有 560 kb，經過數次壓縮，已壓了將近九成，剩下 66.9 kb。
3.2 網頁切圖建議 Photoshop
- 先檢查有沒有沒用到的圖層
2. 在圖層/群組要出的素材，點按右鍵
3. 選擇「轉存為…」
4. 選擇 PNG 儲存時，可將 PNG 的位元降低至 8 位元，並視情況縮放大於 1600px 的原圖。再選擇左欄的出圖大小 1.25x — 1.5x ，下方即可看見縮放後的檔案大小。
5. 輸出圖片後，一樣再到 Tinypng 壓縮，至少壓縮 3–5 次。但 Photoshop 出的素材壓縮成效略遜色於 Sketch。第一次僅壓縮 3 成，可以再多觀察不同素材的壓縮效果，或嘗試使用前面章節提到的壓縮工具 iloveimg、Compressor.io。
以上就是今天的小分享，其實網頁效能優化的方法很多，也許每個案子方向不ㄧ樣，要達到真正的效能提升，還是要靠團隊貢獻自己的專業一起努力！希望透過這個經驗分享，可以幫助到需要的人！
如果喜歡這篇的話，請拍拍手鼓勵我👏
若有錯誤也歡迎來信指正討論，一起學習！下次再見囉～～～Feel free to reach out!
fantasynovel@gmail.com
