1. 優化 CSS 效能

CSS，即級聯樣式表，能從 HTML 描述的內容生成專業而又整潔的檔案。很多 CSS 需要通過 HTTP 請求來引入（除非使用內聯 CSS），所以你要努力去除累贅的 CSS 檔案，但要注意保留其重要特徵。

如果你的 Banner、外掛和佈局樣式是使用 CSS 儲存在不同的檔案內，那麼，訪問者的瀏覽器每次訪問都會載入很多檔案。雖然現在 HTTP/2 的存在，減少了這種問題的發生，但是在外部資源載入的情況下，仍會花費較長時間。要了解如何減少 HTTP 請求以大幅度縮減載入時間，請閱讀WordPress 效能。

此外，不少網站管理員在網頁中錯誤的使用 @import 指令 來引入外部樣式表。這是一個過時的方法，它會阻止瀏覽並行下載。link 標籤才是最好的選擇，它也能提高網站的前端效能。多說一句，通過 link 標籤請求載入的外部樣式表不會阻止並行下載。

2.減少外部HTTP請求

在很多情況下，網站的大部分載入時間來自於外部的 Http 請求。外部資源的載入速度隨著主機提供商的伺服器架構、地點等不同而不同。減少外部請求要做的第一步就是簡略地檢查網站。研究你網站的每個組成部分， 消除任何影響訪問者體驗不好的成分。 這些成分可能是：

• 不必要的圖片

• 沒用的 JavaScript 程式碼

• 過多的 css

• 多餘的外掛

在你去掉這些多餘的成分之後，再對剩下的內容進行整理，如，壓縮工具、CDN 服務和預獲取（prefetching）等，這些都是管理 HTTP 請求的最佳選擇。除此之外，減少DNS路由查詢教程會教你如何一步一步的減少外部 HTTP 請求。

3. 壓縮 CSS, JS 和 HTML壓縮技術可以從檔案中去掉多餘的字元。

你在編輯器中寫程式碼的時候，會使用縮排和註釋，這些方法無疑會讓你的程式碼簡潔而且易讀，但它們也會在文件中新增多餘的位元組。

例如，這是一段壓縮之前的程式碼。

.entry-content p { font-size: 14px !important; }   .entry-content ul li { font-size: 14px !important; }   .product_item p a {  color: #000;  padding: 10px 0px 0px 0;  margin-bottom: 5px;  border-bottom: none; } 

把這段程式碼壓縮後就成了這樣

.entry-content

使用壓縮工具可以非常簡單地把無用的位元組從你的 CSS、JS 和 HTML 檔案修剪掉。關於壓縮的相關資訊，可以參閱如何壓縮 CSS、JS 和 HTML。

4. 使用預先獲取預先獲取可以 

在真正需要之前 通過取得必需的資源和相關資料來改善訪問使用者的瀏覽體驗，主要有3類預先獲取:

• 連結預先獲取

• DNS 預先獲取

• 預先渲染

在你離開當前 web 頁面之前，使用預先獲取方式，對應每個連結的 URL 地址，CSS，圖片和指令碼都會被預先獲取。這保證了訪問者能在最短時間內使用連結在畫面間切換。

幸運的是，預先獲取很容易實現。根據你想要使用的預先獲取形式，你只需在網站 HTML 中的連結屬性上增加 rel="prefetch",rel="dns-prefetch"，或者 rel="prerender" 標記。

5. 使用 CDN 和快取提高速度

內容分發網路能顯著提高網站的速度和效能。使用 CDN 時，您可以將網站的靜態內容連結到全球各地的伺服器擴充套件網路。如果您的網站觀眾遍佈全球，這項功能十分有用。 CDN 允許您的網站訪問者從最近的伺服器載入資料。如果您使用 CDN，您網站內的檔案將自動壓縮，以便在全球範圍內快速分發。CDN 是一種快取方法，可極大改善資源的分發時間，同時，它還能實現一些其他的快取技術，如，利用瀏覽器快取。

合理地設定瀏覽器快取，能讓瀏覽器自動儲存某些檔案，以便加快傳輸速度。此方法的配置可以直接在源伺服器的配置檔案中完成。

瞭解更多有關快取和不同型別的快取方法，請參閱快取定義。

6. 壓縮檔案雖然許多

CDN 服務可以壓縮檔案，但如果不使用 CDN，您也可以考慮在源伺服器上使用檔案壓縮方法來改進前端優化。 檔案壓縮能使網站的內容輕量化，更易於管理。 最常用的檔案壓縮方法之一是 Gzip。 這是縮小文件、音訊檔案、PNG影象和等其他大檔案的絕佳方法。

Brotli 是一個比較新的檔案壓縮演算法，目前正變得越來越受歡迎。 此開放原始碼演算法由來自 Google 和其他組織的軟體工程師定期更新，現已被證明比其他現有壓縮方法更好用。 這種演算法的支援目前還比較少，但作為後起之秀指日可待。

7. 優化你的圖片

對於那些不懂得前端優化的人來說，圖片可能會是一個“網站殺手”。大量的寫真集和龐大的高清圖片會阻塞網頁渲染速度。沒有優化的高清圖片可能會有幾兆位元組（mb）。因此適當地對它們進行優化可以改善網頁的前端效能。

每個影象檔案都包含了一些與純照片或圖片無關的資訊。比如 JPEG 圖片，它包含了日期、地點、相機型號和一些其他不相關的資訊。你可以用一些如 Optimus 的優化工具來刪除這些多餘的影象資料來精簡影象的冗長的載入過程。因為 Optimus 是一個無損的圖片壓縮工具，它不會影響影象畫質，只是壓縮圖片體積。

另外，如果你想進一步的優化一張圖片，你可以使用有失真壓縮，它會刪除一些圖片裡面的資料，因此質量會受損。

8. 使用輕量級框架

除非你只用現有的編碼知識構建網站，不然，你可以嘗試使用一個好的前端框架來避免許多不必要的前端優化錯誤。雖然有一些更大，更知名的框架能提供更多功能和選項，但它們不一定適合你的 Web 專案。

所以說，不僅確定專案所需功能很重要，選擇合適的框架也很重要——它要在提供所需功能的同時保持輕量。最近許多框架都使用簡潔的 HTML，CSS 和 JavaScript 程式碼。

以下是幾項可以加快讀取的輕量級框架：

• Pure

• Skeleton

• Milligram

框架並不能代替網頁設計，程式設計和維護。舉個簡單的例子，我們假設框架是一個新房子。房子乾淨整潔，但它是空的。在你新增傢俱，家電和裝飾品時，你有責任確保房子不會變得凌亂。同樣地，當您使用了一個框架，您就有責任確保它不會被冗餘的程式碼，大圖片和過多的 HTTP 請求破壞。

為了幫助大家更好的學習、精進前端技術，提高自身實力，本學習社群現免費開放【前端精英成長計劃】，到目前為止已有包括北上廣深10000+程式設計師的加入

現在加入，你將得到

海量web前端開發0基礎-精通學習教程視訊

（實時更新，並且可以終生享有免費下載許可權哦）

每天一次免費大咖技術分享課，講技術分享學習經驗

（企業開發規範、瀏覽器效能優化問題統統不用擔心啦）

（今日分享）

500+企業專案特效原始碼（含小程式）

（統統備齊）

web前端開發工具包

（再也不用擔心找不齊全了）

開發書籍下載

（和阿里大牛學開發）

【部分資源截圖】

領取方式

掃描下方二維碼

或者新增前端QQ學習群：632530707

即可領取以上免費資料哦