前端三十｜20. [FE] 如何提升網站效能？

Perl 之父 Larry Wall 曾說過，工程師有三大美德，分別是：「懶惰」、「急躁」與「傲慢」。其中的「急躁」指的便是對於效能低落的程式會有所追求；身為一個前端工程師，如果自己做出來的網站一打開就白畫面好幾秒，點擊連結後就開始無止盡的等待，畫面樣式變動還會一格一格卡卡的，相信無論是誰都會受不了吧？對於這些情況，身為前端工程師的你我，能夠怎麼優化、改善呢？

本系列文已經重新編校彙整編輯成冊，並正式出版囉！

《前端三十：從 HTML 到瀏覽器渲染的前端開發者必備心法》好評販售中！

喜歡我文章內容的讀者們，歡迎您前往購買支持！

尋找問題

要進行優化改善，首先就是要能夠辨識出問題可能在哪裡；不如先思考一下，使用者所看到的網頁內容是怎麼來的。

首先必然是下載內容。現代的網站為了更容易吸引使用者的眼球，除了豐富的文本內容外，還會使用的大量的圖片、影片傳達資訊，甚至透過聲音、動畫等方式與使用者做互動，這些多媒體內容，都代表著更多的多媒體資源以及程式碼。

取得網頁內容後，瀏覽器便開始解析程式碼，並渲染出畫面。這部分在 本系列文 的 03. [CSS] Reflow 及 Repaint 是什麼？ 中便有稍微提到，今天也會以那篇的內容為基礎，做更多關於優化的說明，如果您還沒看過，建議您可以先回頭參考該篇內容，會比較容易理解渲染的機制喔！

綜合以上，看來前端工程師較容易實現的網站優化項目，就會集中在「載入資源」及「畫面渲染」這兩部分了。

優化載入

如同前述，現代網站中需要下載的內容以驚人的速度瘋狂成長：

上圖是來自 HTTP Archive 所紀錄的網站平均下載內容量，可以看到現在（2020/08）的網站平均需要下載 2M 之多的資源；這麼巨量的內容，中間也自然會有許多可以進行優化的地方。

減少資源量

最直覺的就是減少下載的內容。

程式碼的部份，可以將換行符號、無意義的空白、註解等方便人類看的內容移除，把程式內容最小化（minify）；例如以下的 CSS：

p.round {
  border: 2px solid red;
  border-radius…