CSS優化技巧，可縮短頁面加載時間（轉載）

時間 2020-07-05

標籤 css 優化技巧縮短頁面加載時間轉載欄目 CSS 简体版

原文原文鏈接

當今的網絡中，頁面加載速度是最重要的網站指標之一。即便是毫秒也會對用戶體驗、產品產生巨大影響，而緩慢的頁面加載會輕易的的下降轉化率。您能夠採用許多工具和技術來加快網站速度。在本文中，咱們將介紹可用於改善前端性能的最佳CSS優化技巧。css

1.查找性能瓶頸前端

全部優化中最重要的事情是從全面診斷開始。幸運的是，有許多CSS診斷工具能夠幫助您發現任何性能瓶頸。首先，您可使用網絡瀏覽器的DevTools檢查資產加載的速度。在大多數瀏覽器中，您能夠經過按F12按鈕打開DevTools 。瀏覽器

例如，在Firefox DevTools中，可使用「網絡」選項卡檢查頁面加載的全部CSS文件的大小和加載時間。您還能夠測試使用和不使用緩存時CSS加載的速度。因爲DevTools還顯示了外部CSS，例如Google字體文件和從第三方CDN提取的CSS資源，所以您能夠找到許多您之前都不知道的資源。緩存

Pingdom Tools和Google提供的Lighthouse是開發人員常常用來分析網站速度和前端性能的另外兩個免費工具。例如，若是您運行簡單的網站速度測試，則Pingdom Tools會爲您提供一些有用的CSS優化技巧。網絡

2.縮小和壓縮CSS文件dom

大多數網站都依賴多個CSS文件。儘管在大多數狀況下，模塊化CSS被認爲是最佳實踐，可是加載全部文件可能須要一段時間。可是，這正是CSS縮小和壓縮工具存在的緣由。若是您適當地使用它們，則能夠大大縮短頁面加載時間。前端性能

有一些在線工具，例如CSS Minify，可以讓您經過將其複製粘貼爲簡單形式來縮小CSS文件的大小。這種類型的工具能夠與較小的項目很好地配合。可是，對於帶有多個CSS文件的大型項目，使用它們會變得很麻煩且耗時。在這種狀況下，最好選擇自動化解決方案。模塊化

現在，大多數構建工具可以讓您在代碼庫上自動執行壓縮。例如，默認狀況下，Webpack將全部文件做爲縮小的包返回。PostCSS還具備諸如CSS Nano之類的智能插件，它們不只能夠縮小文件的大小，還能夠經過許多有針對性的優化來運行它。工具

3.使用Flexbox和CSS網格佈局

若是在編寫CSS時仍僅依靠傳統的框模型，並使用邊距，填充和浮點在屏幕上對齊項目，則應考慮採用更現代的佈局模塊，即flexbox和CSS Grid。這些新模型使您能夠用更少的代碼來實現複雜的佈局。

使用較舊的技術，您甚至須要進行許多技巧和調整，即便是比較簡單的事情，例如將項目垂直居中。可是，flexbox和CSS Grid並不是如此。儘管拾取新的佈局模塊可能要花費一些時間，但仍是值得的，由於CSS文件要小得多。flexbox尤爲如此，到目前爲止，flexbox具備至關不錯的瀏覽器支持（目前全球支持 98.3％）。

儘管瀏覽器對CSS Grid的支持還不夠完善（目前佔全球的92.03％），但若是沒必要支持舊版瀏覽器或願意提供後備功能，則仍然可使用它。

4.使用<link>標記代替@import規則**

您可使用兩種主要技術來使網頁加載CSS文件：

使用<link>標記將它們添加到HTML頁面的<head>部分，

使用*@import *CSS規則從其餘樣式表導入它們。

您須要將@import規則添加到主CSS文件的頂部。在大多數狀況下，它用於加載較小的資源，例如字體和其餘設計元素。最初，這彷佛是一個不錯的解決方案，可是，與HTML頁面使用<link>標記直接加載樣式表相比，瀏覽器加載額外的樣式表所花的時間要長得多。

當您在HTML頁面中添加多個CSS文件時，請務必注意CSS特殊性。首先添加最通用的樣式表，而後再選擇更具體的樣式表。您須要這樣作，由於之後添加的樣式表會覆蓋之前的CSS文件的規則。例如，如下示例以正確的順序添加CSS文件時：

<link rel="stylesheet" href="main.css"><link rel="stylesheet" href="page.css"><link rel="stylesheet" href="component.css">

5.使用漸變和SVG代替圖像

將全部圖像加載到網頁上可能要花費大量時間。開發人員使用許多圖像優化技術來減輕這種影響，例如從外部CDN加載圖像或使用諸如TinyJPG之類的圖像壓縮工具。這些解決方案能夠提供不少幫助，可是不少時候，您均可以使用原生CSS效果替換大量資源的JPG和PNG圖像。

例如，您可使用漸變來代替背景圖像，而背景圖像可能會大大下降用戶瀏覽器的速度。您可使用CSS的漸變功能來建立線性，徑向和重複漸變。使用這些CSS原生功能，您不只能夠定義顏色，還能夠定義漸變的角度。

例如，如下規則建立了一個很好的漸變背景，其加載速度比任何圖像都要快：

div {    background: linear-gradient(45deg, lightgreen, royalblue);}

對於更復雜的漸變和紋理，還可使用CSSmatic（在下圖顯示）和ColorZilla這樣的生成器。

除漸變外，您還可使用可縮放矢量圖形（SVG）替換傳統的JPG和PNG圖像。它們不只加載速度更快，並且您只須要包含該圖像的一個版本。這是由於SVG因爲其向量性質而能夠按比例放大到任何大小而沒有任何質量損失。此外，您也可使用CSS設置SVG的樣式，就像普通的HTML文件同樣。

6.避免重要規則

儘管！important規則在某些狀況下多是天賜之物，但您僅應將其做爲最後的選擇。此規則從級聯中建立一個異常。所以，當您在CSS聲明中添加！important時，它將覆蓋全部其餘聲明，即便是那些具備更高特異性的聲明。它的語法以下所示：

h1{  margin-bottom: 20px!important;}

若是CSS中有太多重要規則，則用戶的瀏覽器將不得不對代碼進行額外的檢查，這可能會大大下降頁面速度。根據經驗，切勿在整個站點範圍的CSS或建立主題或插件時使用！important。若是可能，請僅在要覆蓋來自第三方庫的CSS時使用它。

7.考慮CSS重構

儘管CSS重構不多是一件容易的事，但在許多狀況下，它能夠顯着提升網站性能。例如，若是CSS文件太大，或者您繼承了舊版代碼庫，或者頁面加載時間不好，嚴重損害了轉換率。CSS重構的目標是使代碼更整潔，更可維護而且加載更快。

CSS重構是一個多步驟的過程，在此過程當中，您須要分析CSS代碼庫的各個方面。您須要檢查幾件不一樣的事情，例如：

不管您有未使用或重複的CSS規則或資源，
是否能夠利用Flexbox和CSS網格等更現代的技術，
是否使用過多的特異性（可使用此視覺特異性計算器進行計算），
CSS文件的結構是否合理（例如，維護較小的文件比維護較大的文件更容易），
是否值得使用自動構建工具，
還有不少其餘
- 　　在開始重構以前，還應設置可衡量的目標並選擇要使用的基準，例如頁面加載時間或第一個有意義的繪製，以便您能夠比較它們的先後值。
- 　　一樣不要忘記使用版本控制工具，例如Git。這樣，若是出現任何問題，您能夠返回到之前的代碼版本。

您可使用許多CSS優化技巧來改善網站的性能。它們中的大多數易於實現，但會對頁面加載時間產生重大影響。更快的加載頁面不只能夠加強用戶體驗，還能夠幫助您在Google和其餘搜索引擎中得到更好的排名。

除了CSS優化最佳實踐以外，您還可使用許多其餘技術來提升加載速度，例如緩存，Google AMP和HTTPS協議。

做者：遊X魚連接：https://www.jianshu.com/p/69198ac60e53