本文翻譯自thedaviddias總結的Front-End-Performance-Checklist

HTML

壓縮HTML: 生產環境上的HTML程式碼應該是壓縮的，註釋、空格、新行需要被移除。

原因：

移除不必要的空格、註釋和新行可以減少html的檔案大小並且加快你的網站載入時間，減少了使用者的下載流量。

做法：

大多數開發框架都有壓縮網頁的外掛。你可以使用一系列的NPM模組來自動為你完成這項工作。

刪除不需要的註釋: 確保註釋從頁面中移除。

原因：

註釋對使用者並沒有用，應該從生產檔案中刪除。一種需要保留註釋的情景是你引用別人庫的原始檔案。

做法：

大多數時候，註釋會被HTML壓縮外掛移除。
刪除不需要的屬性: 型別屬性比如type="text/javascript"或者type="text/css"不再是必須的，應當被移除。
```

<script type="text/javascript">
    // JavaScript code
</script>


<script>
    // JavaScript code
</script>
複製程式碼
```
原因：

因為HTML5中將text/css和text/javascript作為預設的屬性值，所以不再需要寫型別屬性。

做法：

⁃ 確保你的<link>和<script>標籤沒有任何的type屬性。
- The Script Tag | CSS-Tricks
總是將CSS標籤放在JavaScript前面: 確保CSS總是在JavaScript程式碼前載入。
```

<script src="jquery.js"></script>
<script src="foo.js"></script>
<link rel="stylesheet" href="foo.css"/>


<link rel="stylesheet" href="foo.css"/>
<script src="jquery.js"></script>
<script src="foo.js"></script>
複製程式碼
```
原因：

在JavaScript前引用CSS可以實現更好的並行下載，從而加快瀏覽器呈現時間

做法：

⁃ 確保<head>中的<link>和<style>總是在<script>前。
- Ordering your styles and scripts for pagespeed
減少iframes的數量: 只有在任何其他技術實現不了的情況下才使用iframes。儘可能避免使用iframes。

CSS

壓縮: 生產環境上的CSS檔案應該是壓縮的，註釋、空格、新行需要被移除。

原因：

當CSS檔案壓縮過後，內容會載入的更快，傳送給客戶端的資料也將減少。在生產環境中壓縮CSS檔案很重要。這對使用者和希望降低頻寬成本和資源使用量的企業都很有利。

做法：

⁃ 在構建或部署之前或期間，使用工具自動壓縮檔案。
合併檔案: 將CSS檔案寫在一個檔案中（並不總對HTTP/2有效）。
```

<link rel="stylesheet" href="foo.css"/>
<link rel="stylesheet" href="bar.css"/>


<link rel="stylesheet" href="foobar.css"/>
複製程式碼
```
原因：

如果你仍在使用HTTP/1，你可能還需要合併檔案。如果你的伺服器使用HTTP/2 (還在進行測試)，情況就不太一樣了。

做法：

⁃ 在構建或部署之前或期間，使用線上工具或任何外掛將CSS合併起來。 ⁃ 當然，確保合併不會破壞你的專案。
- HTTP: Optimizing Application Delivery - High Performance Browser Networking (O'Reilly)
- Performance Best Practices in the HTTP/2 Era
非阻塞: CSS檔案需要非阻塞引入，阻止DOM載入時間過長。
```
<link rel="preload" href="global.min.css" as="style" onload="this.rel='stylesheet'">
<noscript>
    <link rel="stylesheet" href="global.min.css">
</noscript>
複製程式碼
```
原因：

CSS檔案會阻止頁面載入並延遲頁面的呈現。使用preload可以在瀏覽器開始顯示頁面內容之前就載入CSS檔案。

做法：

⁃ 你需要在link標籤中新增rel屬性值為preload以及as="style"
CSS類名長度: 類名的長度可能會對HTML和CSS檔案產生(輕微)影響。

原因：

對於你的專案採用何種命名策略將會對樣式表的可維護性產生重大影響，甚至效能影響。不過它也是有爭議的。如果你使用的是BEM命名方式，在某些情況下可能會遇到命名的長度字元多餘實際所需的類名。因此，明智的選擇CSS類名和名稱空間是很重要的。

做法：

對一些人來說，設定最大的類長度可能很有趣，但是需要確保分解成元件的網站可以減少類（和宣告）的數量和長度。
- long vs short class · jsPerf
沒有用到的CSS: 移除沒有用到的CSS選擇器。

原因：

刪除未使用的CSS選擇器可以減少檔案大小，加快資源的載入速度。

做法：

⁃ 始終檢查你使用的CSS框架是否已經包含了重置/normalize的程式碼。有時你可能不需要重置/normalize檔案中的所有內容。
關鍵CSS: 關鍵CSS包括了用來渲染頁面可見部分的樣式。它嵌入在你的主CSS呼叫之前，位於<style></style>之間，排成一行（如果可以的話進行壓縮）。

原因：

內聯關鍵的CSS樣式能夠幫助加快頁面的渲染並且減少伺服器請求數量。

做法：

使用線上工具或使用類似Addy Osmani開發的外掛生成關鍵CSS。
嵌入或行內CSS: 避免在body中使用嵌入或者行內CSS。（http/2可以忽略）

原因：

將內容與樣式分開是一個很好的做法，它使得程式碼更易於維護，並且保持站點的可訪問性，這是原因之一。但是對於效能而言，它減少了HTML頁面的檔案大小和載入時間，這是第二個原因。

做法：

總是使用外部樣式表或者將CSS內嵌在<head>中（並遵循其他的CSS效能優化規則）
- bserve CSS Best Practices: Avoid CSS Inline Styles
分析樣式表: 分析樣式表可以幫助你標記有問題、冗餘和重複的CSS選擇器。

原因：

有時你的CSS檔案中可能有冗餘或驗證錯誤，分析你的CSS檔案並消除這些問題可以幫助你加快CSS檔案的速度(因為你的瀏覽器會更快地閱讀它們)

做法：

你的CSS應該是有條理的，使用CSS前處理器可以幫助你做到這一點。下面列出的一些線上工具也可以幫助你分析和更正程式碼。

Fonts

Webfont格式: 你應該使用WOFF2格式的字型在你的web專案或應用裡。

原因：

根據谷歌的測試，WOFF2字型壓縮率比WOFF1平均增加了30%。使用WOFF2、WOFF1格式的字型替代TTF格式是很好的。

做法：

購買新字型之前，請檢查提供商是否為提供了woff2格式。如果你使用的是免費字型，你可以使用Font squirrer來生成你需要的所有格式。
使用preconnect更快的載入字型: 你應該使用WOFF2格式的字型在你的web專案或應用裡。
```
<link rel="preconnect" href="//fonts.gstatic.com" crossorigin>
複製程式碼
```
原因：

當你訪問網站時，你的裝置需要知道你的網站伺服器在哪裡。瀏覽器必須連線DNS伺服器，等待查詢完成，然後才能獲取資源(字型、CSS檔案...)。預獲取和預連線允許瀏覽器提前查詢DNS資訊，並建立到託管字型檔案的伺服器的TCP連線。這樣就使得效能有所提升，因為當瀏覽器開始解析帶有字型資訊的CSS檔案並發現它需要向伺服器請求字型檔案時，已經預先解析了DNS資訊並在連線池中開啟了到伺服器的連線。

做法：

⁃ 在預取你的網頁字型之前，使用webpagetest來評估你的網站 ⁃ 尋找藍綠色(直譯，應該和藍綠色部署有關)的DNS伺服器，並記下被請求的主機名 ⁃ 在head中預讀取字型檔案，另外字型的託管主機名也應該放到預載入（prefetch）列表裡
字型大小: 網路字型大小不超過300kb（包括所有變體）
- Font Bytes - Page Weight
防止閃爍或不可見的文字: 在載入Webfont之前，避免透明文字
- font-display for the Masses
- CSS font-display: The Future of Font Rendering on the Web

Image

圖片優化: 你的圖片應該經過優化、壓縮，不會直接影響終端使用者。

原因：

優化後的圖片在瀏覽器中載入速度更快，消耗的資料也更少。

做法：

⁃ 儘可能嘗試使用CSS3效果(而不是小圖片) ⁃ 如果可能，使用字型代替圖片中編碼的文字 ⁃ 使用SVG ⁃ 使用工具指定85以下的壓縮級別
圖片格式: 選擇合適的影象格式。

原因：

為了確保你的圖片不會減慢你的網站載入速度，選擇與你圖片相對應的格式。如果是照片，JPEG通常比PNG或GIF更合適。但是不要忘了看看下一代的圖片格式，它可以減少檔案的大小。每種影象格式都有優點和缺點，瞭解這些對於做出最佳選擇是很重要的。

做法：

⁃ 使用Lighthouse來識別哪些影象最終可以使用下一代格式(如JPEG 2000m JPEG XR或WebP) ⁃ 比較不同的格式，有時使用png8位比png16位更好，有時不是
使用向量影象VS光柵/點陣圖: 優選使用向量影象而不是點陣圖影象(如果可能的情況下)。

原因：

向量影象(SVG)往往比較小，並且SVG的響應和縮放非常完美。CSS可以對這些影象進行動畫製作和修改。
影象尺寸: 如果最終渲染的影象大小是已知的，在<img>上設定width和height。

原因：

如果設定了高度和寬度，則載入頁面時會保留影象所需的空間。但是，如果沒有這些屬性，瀏覽器不知道影象的大小，也不能為其保留適當的空間。其效果是頁面佈局會在載入過程中發生變化(當影象載入時)。
避免使用Base64的影象: 你最終可以將微小的影象轉換成base64，但這實際上不是最佳實踐。
懶載入: 視野外的圖片懶載入(不要忘記提供noscript回撥)。

原因：

它將提高當前頁面的響應時間，然後避免載入使用者可能不需要的不必要的圖片。

做法：

⁃ 使用Lighthouse來識別視野外有多少圖片。 ⁃ 使用下面的JavaScript外掛來懶載入你的圖片。確保你的目標只是視野外的影象。 ⁃ 還應確保在滑鼠懸停或其他操作時顯示懶載入的替代影象
響應式圖片: 確保提供接近你顯示尺寸的圖片。

原因：

小型裝置不需要比其視口更大的圖片。建議使用同一圖片不同尺寸的版本。

做法：

⁃ 為目標裝置建立不同的圖片尺寸。 ⁃ 使用srcset和picture屬性設定每個圖片的多種形式。
- Responsive images - Learn web development | MDN

JavaScript

JS壓縮: 所有JavaScript檔案需要壓縮，註釋、空白和新行從生產檔案中刪除(如果使用HTTP/2仍然有效)。

原因：

刪除所有不必要的空格、註釋和分隔符將減少JavaScript檔案的大小，加快網站的頁面載入時間，並明顯減輕使用者的下載量。

做法：

⁃ 使用下面建議的工具在構建或部署之前或期間自動壓縮檔案
不要有內聯的JavaScript: (僅適用於網站)避免在body中嵌入多個JavaScript程式碼。將JavaScript程式碼重組到外部檔案中，或者重組到<head>裡或末尾(</body>之前)。

原因：

將JavaScript嵌入程式碼直接放在<body>中會減慢你的頁面速度，因為它是在DOM構建時載入的。最好的選擇是為外部檔案使用async或defer屬性來避免阻塞DOM。另一個選擇是在你的<head>放置指令碼。在DOM開始渲染之前需要載入好大多數的時間分析程式碼或小指令碼。

做法：

確保使用非同步或延遲載入所有檔案，並且明智地決選擇要注入到<head>中的程式碼。
- 11 Tips to Optimize JavaScript and Improve Website Loading Speeds
非阻塞JavaScript: JavaScript檔案使用async非同步載入或使用defer延遲載入。
```

<script defer src="foo.js"></script>


<script async src="foo.js"></script>
複製程式碼
```
原因：

JavaScript會阻塞HTML的正常解析，因此當解析器到達<script>標籤時(特別是在<head>裡)，它會停止解析並執行。如果指令碼放在頁面頂部，強烈建議新增async或defer屬性，但是如果指令碼就在</body>之前，則沒有太大價值。但是，最佳實踐是使用這些屬性來避免任何效能問題。

做法：

⁃ 在script標籤裡新增async（如果指令碼不依賴其他指令碼）或者defer（如果指令碼依賴非同步指令碼或被非同步指令碼依賴）屬性。 ⁃ 如果你有小的指令碼，可以以內聯的形式卸寫在async指令碼之前。
- Remove Render-Blocking JavaScript
- Defer loading JavaScript
優化並更新JS庫: 專案中使用JavaScript庫是有必要的（對於簡單的功能，可以使用普通的JavaScript函式），更新它們到最新版本。

原因：

大多數情況下，新版本都附帶優化和安全修復。你應該使用最優的程式碼來加速你的專案，並確保未過時外掛不會減慢你的網站或應用程式的速度。

做法：

如果你的專案使用NPM包，npm-check是一個非常有趣的外掛來升級/更新你的庫。Greenkeeper可以自動查詢你的依賴項，並在新版本釋出時建議更新。
- You may not need jQuery
- Vanilla JavaScript for building powerful web applications
檢查依賴包大小: 明智地使用外部庫，在大多數情況下，你可以使用較輕的庫來實現相同的功能。

原因：

你可能會想在NPM上找到745000個包中的一個，但是你需要選擇最適合你需要的包。例如，MomentJs是一個非常棒的庫，但是有很多方法你可能永遠不會使用，這就是Day.js建立的原因。它只有2kB，而Moment Gzip後有16.4kB。

做法：

總是比較和選擇最適合你需要的更輕的依賴庫。你也可以使用npm trends這個工具來比較NPM包下載量，或者Bundlephobia，以瞭解依賴包的大小
JavaScript分析: 檢查JavaScript檔案中的效能問題（CSS檔案也是）。

原因：

複雜的JavaScript會降低執行效能。認識到這些問題對於流暢的使用者體驗至關重要。

做法：

使用Chrome Developer工具中的Timeline工具來執行指令碼事件，並找到可能花費太多時間的事件。
使用Service Workers: 你可以在你的PWA應用中使用Service Workers來快取資料或者在不影響應用程式使用者體驗的情況下執行可能繁重的任務。

Server

為你的網站使用HTTPS:

原因：

HTTPS不僅適用於電商網站，也適用於所有交換資料的網站。使用者共享的資料或共享給外部實體的資料。現代的瀏覽器限制了不安全網站的功能。例如: 如果你的網站不使用HTTPS，將不能使用地理定位、推送通知、service workers。現在，在專案上使用SSL證照比以前容易多了(而且是免費的，感謝 Let's Encrypt)。
頁面大小小於1500KB（理想情況小於500KB）: 儘可能縮小頁面+資源的大小。

原因：

理想情況下，你應該嘗試將頁面大小設定在<500KB，但是當下web狀態顯示頁面位元組的中位數約為1500KB (甚至在移動裝置上)。根據你的目標使用者、網路連線、裝置，儘可能減少頁面位元組數以獲得最佳使用者體驗。

做法：

前端效能清單中的所有規則將幫助您儘可能減少資源和程式碼。
頁面載入時間< 3秒: 儘可能減少頁面載入時間，以便向使用者快速傳遞內容。

原因：

你的網站或應用程式越快，關閉頁面的可能性就越小，換句話說，你失去使用者或未來客戶的可能性就越小。足夠多的研究證明了這一點。

做法：

使用Page Speed Insight或WebPageTest等線上工具來分析哪些因素會減緩你的速度，並使用前端效能清單來改進你的載入時間。
首位元組時間（TTFB）< 1.3秒: 儘可能減少瀏覽器在接收資料之前等待的時間。
Cookie大小: 如果你正在使用cookie，確保每個cookie不超過4096位元組，並且你的域名不超過20個cookie。

原因：

cookies在伺服器和瀏覽器之間的HTTP報頭中交換。重要的是保持cookies長度儘可能小，以對使用者響應時間的影響最小。

做法：

清除不必要的cookies
減少HTTP請求: 始終確保所請求的每一個檔案對你的網站或應用都是必不可少的。
- Combine external CSS
- Combine external JavaScript
使用CND: 使用CDN在世界各地更快地傳遞你的內容。
- 10 Tips to Optimize CDN Performance - CDN Planet
- HTTP Caching | Web Fundamentals | Google Developers
檔案來自同一協議: 避免讓你的網站檔案在開啟HTTPS的網站上使用HTTP協議。如果你的網站使用HTTPS，外部檔案應該使用同一協議。
頁面檔案可訪問: 避免請求無法訪問的檔案（404）。
- How to avoid bad requests
正確設定HTTP快取頭: 設定HTTP快取頭以避免瀏覽器和伺服器之間多次請求。
- Using cache-control for browser caching
啟用GZIP/Brotli壓縮功能: 使用壓縮演算法，如Gzip或Brotli來減小JavaScript檔案的大小。使用較小的檔案，使用者將能夠更快地下載資源，從而提高效能。

【譯】前端效能優化清單

HTML

CSS

Fonts

Image

JavaScript

Server

JS-Frameworks

Angular

React

Vue

CMS-Frameworks

WordPress

文章

外掛推薦

相關文章