為何需要進行 Web 效能優化

首先先來個源自 CharGPT 的數據：

1. 53% 的用戶會在頁面加載時間超過 3 秒時選擇離開
2. 1 秒的延遲可能會導致 7% 的轉化率下降

在先前的文章有提到關於搜尋引擎的排名其中一項就是準化率，也就是用戶點擊進來後會不會馬上離開，其中還有另外一項為讀取速度。
隨著移動裝置的普及，Google 的搜尋排名開始優先考慮移動裝置，當你的讀取速度過慢時 Google 會認為你的網站影響了使用者的體驗，因此降低你的排名。

基本的優化技巧

在說完了為何需要優化後，我們來針對幾個有可能遇到的痛點來分析吧

1. CSS 和 JavaScript 檔案過多導致 HTTP 連線過慢：
   以最基本的 HTTP/1 連線來說，伺服器一次只允許傳輸一個檔案，因此若檔案太過分散會減慢速度，以現代的很多打包方式來說會將檔案合併，將檔案數限縮在一定的數量內，減少引用的數目。
   我們也可以透過從 Nginx 之類的網頁伺服器將 HTTP /1 更改成 HTTP/2，目前的主流瀏覽器也都會接受，至於 HTTP/3 的要求較多，且通訊協定會從 TCP 更改成 QUIC，會建議了解更多的時候再考慮是否有需要轉過去
2. 減少檔案大小
   我們可以透過一些編譯工具將檔案最小化(Minification)，在編譯後將空格、換行符號、註解等等移除，並且縮短變數名稱長度以減少讀取時間。
3. 將需要讀取的檔案放在對的位置
   html 的讀取順序是從上到下，因此 Head 標籤內的東西會先被讀取完才開始讀取 Body，為避免讓使用者看到沒有樣式的內容，通常我們會將 CSS 放在 Head 中，像是一些需要優先於 DOM 渲染的 Script 也可以放在這，其他的 Script 建議放在 Body 最下方以防止延誤到 DOM 的渲染時機。
4. 圖片讀取
   我們可以根據使用者裝置來決定要讀取到多大或是多精細的檔案，或是透過一些圖片壓縮技術來讓使用者上傳圖片後減少大小，來讓下一次的讀取速度變快

Script 的讀取時間

剛剛上方有提到 html 的讀取順序是從上到下，一個讀完後才會讀取下一個，但 Script 的標籤可以透過添加不同屬性來改變讀取時機

1. default：Script 的默認讀取就像是一般標籤一樣，當他讀取完後才會進行下一個標籤的讀取
2. defer：<script src='...' defer>，此屬性會在 html 完整解析完後才開始讀取，當有多個 defer 時會按照出現順序來讀取
3. async：<script src='...' async>，此屬性為異步渲染，當 html 解析到他時會先把他丟到旁邊，等到檔案被接到時才參與讀取，與 JavaScript 的 Event Loop 不同，當檔案被接到時會立刻中斷目前的解析。