|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
改善頁面加載時(shí)間的6個(gè)最佳CSS優(yōu)化技巧
作者:admin 時(shí)間:2021-9-1 17:40:13 瀏覽:頁面加載時(shí)間是最重要的網(wǎng)站指標(biāo)之一，緩慢的頁面加載很容易破壞你的轉(zhuǎn)化率，你可以采用許多工具和技術(shù)來加速你的網(wǎng)站。在本文中，我們將研究可用于提高前端性能的最佳 CSS 優(yōu)化技巧。
1. 找出性能瓶頸
所有類型的優(yōu)化最重要的事情是從徹底的審計(jì)開始，幸運(yùn)的是，有許多 CSS 診斷工具可以幫助你找到任何性能瓶頸。
首先，你可以使用 Web 瀏覽器的 開發(fā)者工具 檢查你的網(wǎng)站加載速度。在大多數(shù)瀏覽器中，你可以通過按F12按鈕打開 開發(fā)者工具 。
例如，在 Firefox 開發(fā)者工具 中，你可以使用“網(wǎng)絡(luò)”選項(xiàng)卡檢查頁面加載的所有 CSS 文件的大小和加載時(shí)間。你還可以測試 CSS 加載和不使用緩存的速度。由于開發(fā)者工具還顯示外部 CSS，例如從第三方 CDN 中提取的 CSS 文件，因此你可以找到許多你以前甚至不知道的來源。
(點(diǎn)擊圖片放大)
卡卡網(wǎng)站速度診斷是開發(fā)人員經(jīng)常用來分析網(wǎng)站速度和前端性能的免費(fèi)工具。例如，如果你運(yùn)行簡單的網(wǎng)站速度測試，卡卡網(wǎng)站速度診斷會(huì)為你提供一些有用的 CSS 優(yōu)化技巧。
(點(diǎn)擊圖片放大)
2. 縮小和壓縮 CSS 文件
大多數(shù)網(wǎng)站依賴于多個(gè) CSS 文件。盡管在大多數(shù)情況下，模塊化 CSS 被認(rèn)為是最佳選擇，但加載所有文件可能需要一段時(shí)間，這正是 CSS 縮小和壓縮工具存在的原因。如果你巧妙地使用它們，則可以顯著改善頁面加載時(shí)間。
有一些在線工具，例如CSS在線壓縮優(yōu)化，允許你通過將 CSS 文件復(fù)制粘貼到一個(gè)簡單的表單中來縮小它。這種類型的工具可以很好地處理較小的項(xiàng)目。
(點(diǎn)擊圖片放大)
但是，在帶有多個(gè) CSS 文件的大型項(xiàng)目的情況下，使用CSS在線壓縮工具可能會(huì)變得既麻煩又耗時(shí)。在這種情況下，最好選擇自動(dòng)化解決方案。
如今，大多數(shù)構(gòu)建工具都可以讓你自動(dòng)對代碼庫進(jìn)行壓縮。例如，默認(rèn)情況下，Webpack 將所有文件作為縮小包返回。PostCSS 還具有智能插件，例如CSS Nano，它們不僅可以縮小你的文件，還可以通過許多重點(diǎn)優(yōu)化來運(yùn)行它。
3、使用<link>標(biāo)簽代替@import規(guī)則
你可以使用兩種主要技術(shù)使網(wǎng)頁加載 CSS 文件：
- 使用
<link>標(biāo)簽將它們添加到HTML 頁面的<head>部分， - 使用
@importCSS 規(guī)則從其他樣式表導(dǎo)入它們。
你需要將@import規(guī)則添加到主 CSS 文件的頂部。在大多數(shù)情況下，它用于加載較小的文件，例如字體和其他設(shè)計(jì)元素。乍一看，這似乎是一個(gè)不錯(cuò)的解決方案，但是，與 HTML 頁面使用<link>標(biāo)簽直接加載它們相比，瀏覽器加載額外的樣式表需要更長的時(shí)間。
當(dāng)你向 HTML 頁面添加多個(gè) CSS 文件時(shí)，請始終注意CSS 特異性。首先添加最通用的樣式表，然后再添加更具體的樣式表。你需要這樣做，因?yàn)槟愫竺嫣砑拥臉邮奖頃?huì)覆蓋先前 CSS 文件的規(guī)則。例如，以下是按正確順序添加 CSS 文件的示例：
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="page.css">
<link rel="stylesheet" href="component.css">
4. 使用漸變和 SVG 代替圖像
加載網(wǎng)頁上的所有圖像可能需要很多時(shí)間。開發(fā)人員使用許多圖像優(yōu)化技術(shù)來減輕這種影響，例如從外部 CDN 加載圖像或使用諸如TinyJPG之類的圖像壓縮工具。這些解決方案可以提供很多幫助，但是很多時(shí)候，你可以用原生 CSS 效果替換資源繁重的 JPG 和 PNG 圖像。
例如，你可以使用漸變而不是巨大的背景圖像，這可能會(huì)大大降低用戶瀏覽器的速度。你可以使用 CSS 的漸變函數(shù)來創(chuàng)建線性、徑向和重復(fù)漸變。使用這些 CSS 原生函數(shù)，你不僅可以定義顏色，還可以定義漸變的角度。
例如，以下規(guī)則創(chuàng)建了一個(gè)漂亮的漸變背景，加載速度比任何圖像都要快：
div {
background: linear-gradient(45deg, lightgreen, royalblue);
}
除了漸變，你還可以使用可縮放矢量圖形 (SVG)替換傳統(tǒng)的 JPG 和 PNG 圖像。它們不僅加載速度更快，而且你只需要包含一個(gè)版本的圖像。這是因?yàn)?SVG 可以擴(kuò)展到任何大小而不會(huì)由于其矢量性質(zhì)而造成任何質(zhì)量損失。此外，你還可以使用 CSS 為 SVG 設(shè)置樣式，就像它是一個(gè)普通的 HTML 文件一樣。
5. 避免!important規(guī)則
盡管!important規(guī)則在某些情況下可能是天賜之物，但你只能將其用作最后的手段。此規(guī)則從級聯(lián)中創(chuàng)建一個(gè)例外。因此，當(dāng)你將!important添加到 CSS 聲明時(shí)，它將覆蓋任何其他聲明，即使是那些具有更高特異性的聲明。它的語法如下所示：
h1 {
margin-bottom: 20px !important;
}如果你的 CSS 中有太多!important規(guī)則，你的用戶瀏覽器將不得不對代碼進(jìn)行額外檢查，這會(huì)大大降低頁面速度。根據(jù)經(jīng)驗(yàn)，切勿在站點(diǎn)范圍的 CSS 或創(chuàng)建主題或插件時(shí)使用!important。如果可能，僅當(dāng)你想覆蓋來自第三方庫的 CSS 時(shí)才使用它。
6、考慮 CSS 重構(gòu)
盡管 CSS 重構(gòu)不是一件容易的事，但在很多情況下它可以顯著提高網(wǎng)站性能。例如，當(dāng)你的 CSS 文件太大時(shí)，或者你繼承了舊代碼庫，或者你的頁面加載時(shí)間很長，這會(huì)嚴(yán)重?fù)p害你的轉(zhuǎn)化率。CSS 重構(gòu)的目標(biāo)是使你的代碼更流暢、更易于維護(hù)且加載速度更快。
CSS 重構(gòu)是一個(gè)多步驟的過程，在此過程中你需要分析 CSS 代碼庫的各個(gè)方面。你需要檢查幾個(gè)不同的東西，例如：
- 是否有任何未使用或重復(fù)的 CSS 規(guī)則或資源，
- 是否可以使用更現(xiàn)代的技術(shù)，例如 flexbox 和 CSS 網(wǎng)格，
- 你是否使用了過多的特異性，
- 你的 CSS 文件的結(jié)構(gòu)是否合理（例如，維護(hù)小文件比維護(hù)大文件更容易），
- 在開始重構(gòu)之前，還要設(shè)置可衡量的目標(biāo)并選擇你將使用的基準(zhǔn)，例如頁面加載時(shí)間或第一次有意義的繪制，以便你可以比較它們的前后值。
另外不要忘記使用版本控制工具，例如Git。這樣，如果出現(xiàn)任何問題，你可以返回到你的代碼的先前版本。
總結(jié)
你可以使用許多 CSS 優(yōu)化技巧來提高網(wǎng)站的性能。它們中的大多數(shù)都很容易實(shí)現(xiàn)，但會(huì)對你的頁面加載時(shí)間產(chǎn)生重大影響。更快地加載頁面不僅可以增強(qiáng)用戶體驗(yàn)，還可以幫助你在搜索引擎中獲得更好的排名。
除了 CSS 優(yōu)化技巧之外，你還可以使用許多其他技術(shù)來提高加載速度，例如緩存和 HTTPS 協(xié)議。
更多關(guān)于CSS的優(yōu)化技巧，你還可以看看我們之前寫的文章CSS 技巧：加速CSS渲染的5個(gè)建議。
您可能對以下文章也感興趣
- 站長推薦
