建站
咨詢
售后
建站咨詢
新聞中心
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：申請域名、雅安服務(wù)器托管、營銷軟件、網(wǎng)站建設(shè)、固原網(wǎng)站維護(hù)、網(wǎng)站推廣。
即使在2021年，網(wǎng)絡(luò)性能仍然是一個問題。根據(jù)http Archive，平均每個頁面需要2MB的下載，發(fā)出60多個HTTP請求，在移動設(shè)備上完全加載可能需要18秒。樣式表占60 kB，分為七個請求，因此在試圖解決性能問題時，它很少是最優(yōu)先考慮的。
然而，CSS確實有影響，不管它看起來多么輕微。一旦解決了JavaScript問題，學(xué)習(xí)正確優(yōu)化CSS應(yīng)該是下一個重點。
CSS如何影響頁面性能
CSS看起來是無辜的，但可能需要一些繁重的處理。
CSS渲染阻塞
當(dāng)瀏覽器遇到標(biāo)記時，它會在獲取和解析CSS文件時停止其他瀏覽器下載和處理。
JavaScript也可以阻止瀏覽器渲染，但異步處理可以通過以下方式實現(xiàn)：
諸如圖像之類的資源通常需要更多帶寬，但可以使用有效的格式，并且可以延遲加載（loading="lazy"屬性），而不阻止瀏覽器渲染。
所有這些都不可能用CSS實現(xiàn)。文件被緩存，因此后續(xù)頁面加載應(yīng)該更快，但渲染阻塞過程仍然存在。
大型CSS文件處理耗時
樣式表越大，下載和處理CSS對象模型（CSSOM）所需的時間就越長，瀏覽器和JavaScript API可以使用該模型顯示頁面。盡管CSS樣式表比大多數(shù)其他網(wǎng)站文件都小，但它們也不能免于“越小越好”的經(jīng)驗法則。
CSS文件增長
識別不再使用的樣式可能很困難，刪除錯誤的樣式可能會對站點造成嚴(yán)重破壞。開發(fā)人員通常選擇最安全的“保留一切”方法。不再使用的頁面樣式、組件和小部件仍然存在于CSS中。結(jié)果如何？文件大小、復(fù)雜性和維護(hù)工作量呈指數(shù)級增長，使得開發(fā)人員刪除冗余代碼的可能性越來越小。
樣式表可以引入其他資源
CSS可以使用@import規(guī)則引用其他樣式表。這些導(dǎo)入阻止當(dāng)前樣式表的處理，并串聯(lián)進(jìn)一步加載 CSS 文件。
其他資產(chǎn)，如字體和圖像，也可以參考。瀏覽器將嘗試優(yōu)化下載，但當(dāng)有疑問時，它會立即獲取它們。內(nèi)襯基座 64 編碼文件仍需進(jìn)一步處理。
CSS可以使用@import規(guī)則引用其他樣式表。這些導(dǎo)入會阻止當(dāng)前樣式表的處理，并以串行方式加載更多CSS文件。
也可以引用其他資源，例如字體和圖像。瀏覽器將嘗試優(yōu)化下載，但如果有疑問，它將立即獲取下載。內(nèi)聯(lián)base64編碼文件需要進(jìn)一步處理。
CSS效果渲染
瀏覽器有三個渲染階段：
- 布局layout（或回流reflow）階段計算每個元素的尺寸，以及它如何影響周圍元素的大小或位置。
- 繪制paint階段將每個元素的可視部分繪制到單獨的層上：文本、顏色、圖像、邊框、陰影等。
- 渲染層合成（composite draws）根據(jù)堆疊上下文、位置、z-indexes等，以正確的順序?qū)⒚總€層繪制到頁面上。
如果不小心，CSS屬性更改和動畫可能會導(dǎo)致所有三個階段重新渲染。某些特性（如陰影和漸變）在計算上也比塊顏色和邊距更昂貴。
CSS性能分析工具
承認(rèn)您有CSS性能問題是恢復(fù)的第一步！找到并解決原因是另一回事。
以下工具和服務(wù)（不按任何順序排列）可以幫助您識別代碼中的樣式瓶頸。
1. 開發(fā)人員工具網(wǎng)絡(luò)面板
Web性能專家花大量時間在開發(fā)工具上，尤其是在網(wǎng)絡(luò)面板上。DevTools是大多數(shù)現(xiàn)代瀏覽器的原生版本，不過我們將在示例中使用Google Chrome。
DevTools可以從瀏覽器菜單打開，通常是在“更多工具”>“開發(fā)人員工具”中，或者通過鍵盤快捷鍵Ctrl | Cmd+Shift+I或F12打開。
切換到“網(wǎng)絡(luò)”選項卡，并確保選中“禁用緩存”，以防止緩存文件影響報告。您還可以更改限制選項以模擬較慢的移動網(wǎng)絡(luò)。
刷新頁面以查看下載和處理瀑布圖：
DevTools網(wǎng)絡(luò)面板
任何耗時較長的加載進(jìn)度條都值得關(guān)注，但您應(yīng)該特別關(guān)注堵塞/停滯加載進(jìn)度條（顯示為白色）。在本例中，高亮顯示的行和所有后續(xù)行都無法開始下載，直到在HTML頁面頂部處理了渲染阻塞CSS和JavaScript文件。
過濾器框允許您顯示或隱藏特定資源：
larger-than:: 限制大于的文件，以字節(jié)（10000）、千字節(jié)（1000 kB）或兆字節(jié)（1 M）表示-larger-than:: 限制小于的文件-domain:*<.yourdomain.com>：顯示未從主域加載的第三方請求。這些都是網(wǎng)站速度慢的主要原因。
具有優(yōu)化CSS的高性能頁面通常具有較少的資源，這些資源與短阻塞/暫停條并行加載。
2. WebPageTest
WebGetest提供了類似的網(wǎng)絡(luò)瀑布視圖，以及許多其他性能圖表：
WebPageTest.org頁面資源加載瀑布圖
該服務(wù)使用基于不同全球位置的設(shè)備，因此您可以評估真實世界的性能和CSS優(yōu)化。
3. Chrome開發(fā)人員工具Lighthouse面板
DevTools Lighthouse面板在基于鉻的瀏覽器中提供，如Chrome、Edge、Brave、Opera和Vivaldi。您可以為移動和桌面設(shè)備生成性能、漸進(jìn)式Web應(yīng)用、最佳實踐、可訪問性和搜索引擎優(yōu)化報告。
DevTools Lighthouse面板
該工具提供改進(jìn)建議，包括優(yōu)化CSS的方法。并非所有這些都是切實可行的，但最有利于性能提升的點都會被強(qiáng)調(diào)。
4. Google PageSpeed Insights
PageSpeed Insights是Lighthouse的在線版本。它的功能較少，但可以在任何瀏覽器中使用，并提供一些可選的見解。
例如，一個樹狀圖顯示了最大的JavaScript資源，其中包含一個覆蓋率指標(biāo)，該指標(biāo)指示使用和未使用代碼的比例：
Google PageSpeed Insights樹狀圖
CSS不會顯示，但JavaScript的數(shù)量將影響樣式的效率。
類似的網(wǎng)站速度測試工具包括Pingdom和GTmetrix等十余個。
5. Chrome開發(fā)人員工具覆蓋范圍面板
Chromium瀏覽器中的DevTools覆蓋范圍面板有助于定位未使用的CSS（和JavaScript）代碼。從DevTools更多工具子菜單中選擇覆蓋范圍，然后刷新頁面并瀏覽站點/應(yīng)用程序：
DevTools覆蓋范圍面板
CSS和JavaScript資產(chǎn)顯示在覆蓋范圍面板中，未使用代碼的比例用紅色表示。單擊任何文件以查看其源代碼，未使用的代碼在行號欄中以紅色突出顯示。
需要注意的幾件事：
- 如果刷新或?qū)Ш降叫马撁?，覆蓋率指標(biāo)將重置，這在WordPress站點上是典型的。只有在瀏覽一個加載內(nèi)容而不刷新頁面的單頁應(yīng)用程序時，未使用的代碼度量才會降低。
- 該工具只能解釋在特定時間點使用的CSS。它無法確定小部件是否未被查看或具有多個JavaScript綁定狀態(tài)。
6. Chrome開發(fā)人員工具性能監(jiān)視器
基于Chromium的瀏覽器具有實時性能監(jiān)視器。同樣，這可以從DevTools的“更多工具”菜單中獲得。當(dāng)您瀏覽頁面、滾動和觸發(fā)動畫時，圖表會更新：
DevTools性能監(jiān)視器
以下指標(biāo)對于優(yōu)化CSS性能特別重要（越低越好）：
- CPU使用率：處理器使用率從0%到100%。
- 布局/秒：瀏覽器重新布局頁面的速率。
- 樣式重新計算次數(shù)/秒：瀏覽器必須重新計算樣式的速率。
如果CSS由于外部因素而陷入困境，其他指標(biāo)也可能有用（同樣，值越低表示性能越好）：
- JS堆大小：JavaScript對象使用的總內(nèi)存。
- DOM節(jié)點：HTML文檔中的元素數(shù)。
- JS事件偵聽器：已注冊的JavaScript事件偵聽器的數(shù)量。
- 文檔：資源的數(shù)量，包括頁面、CSS文件、JavaScript模塊等。
- 文檔幀：幀、iframe和JavaScript工作腳本的數(shù)量。
7. Chrome開發(fā)人員工具性能報告
DevTools性能面板允許您記錄頁面活動以進(jìn)行進(jìn)一步分析，并幫助確定性能問題。生成的報告很復(fù)雜，許多開發(fā)人員都避免使用它們，但它們提供了有價值的信息。
性能面板的設(shè)置圖標(biāo)允許您設(shè)置各種選項，例如降低網(wǎng)絡(luò)和CPU的速度。您還可以禁用JavaScript示例，以便不記錄詳細(xì)的調(diào)用堆棧。
要開始，請單擊循環(huán)記錄圖標(biāo)，加載和/或使用頁面，然后單擊停止按鈕查看報告：
DevTools性能報告
幾乎所有這些指標(biāo)都對JavaScript開發(fā)人員有用，但CSS優(yōu)化問題可能從以下方面特別明顯：
- 頂部紅色條：這表示幀速率顯著下降，這可能會導(dǎo)致性能問題。這在頁面加載開始時是應(yīng)該的，但是過多的CSS動畫也可能是一個問題。
- 摘要圖表：高加載、渲染和繪制度量可能表明CSS問題。
間接CSS性能優(yōu)化
下面的優(yōu)化程序不會直接解決CSS問題，但它們可以幫助您解決一些性能問題，所需的工作量相對較小。
使用好主機(jī)
使用一臺性能良好的主機(jī)，使服務(wù)器在物理上更接近用戶，將立即帶來性能優(yōu)勢。托管計劃各不相同，但主要有三種類型：
云托管計劃和價格差異巨大。你可以考慮：
交換主機(jī)可以提高性能。它不太可能解決您所有的問題，但它是解決后端和帶寬問題的經(jīng)濟(jì)高效的解決方案。
您還可以考慮使用內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN）或?qū)I(yè)圖像和視頻CDN，它可以在地理上更接近用戶的多個位置上分發(fā)負(fù)載。
利用瀏覽器和服務(wù)器效率功能
大約10%的站點不激活gzip（或更好的）壓縮，這通常是默認(rèn)的服務(wù)器選項。通過在傳輸之前壓縮文件，可以將CSS的大小減少60%或更多。它不會修復(fù)低效的CSS，但代碼會更快到達(dá)！
您還應(yīng)該激活HTTP/2（或更好），它以較小的二進(jìn)制格式發(fā)送數(shù)據(jù)，壓縮頭，并且可以在同一TCP連接上發(fā)送多個文件。
最后，確保瀏覽器能夠有效緩存CSS和其他文件。這通常是在HTTP頭中設(shè)置Expires、Last Modified和/或ETag哈希的問題。
優(yōu)化CMS
諸如WordPress之類的內(nèi)容管理系統(tǒng)可以通過主題和插件進(jìn)行擴(kuò)展，這些主題和插件服務(wù)于它們自己的CSS。在可能的情況下，您應(yīng)加快CMS的速度，以：
優(yōu)化圖像
圖像的處理和呈現(xiàn)開銷與HTML、CSS和JavaScript不同，但它們占頁面重量和可用帶寬的很大一部分?？紤]：
專業(yè)的圖像CDN可以為您處理一些這方面的工作。有關(guān)更多提示，請查看我們關(guān)于如何為Web優(yōu)化圖像的指南。
刪除未使用的CSS
最快的樣式是那些您永遠(yuǎn)不需要加載或渲染的樣式！嘗試刪除/編輯您不再需要的任何CSS代碼，例如用于遺留頁面、小部件或框架的CSS代碼。在較大的網(wǎng)站上，這可能很困難，而且并不總是清楚特定的樣式集是否是必需的。
以下工具在構(gòu)建時分析HTML和CSS的使用情況，或者通過抓取URL來識別冗余代碼。這并不總是足夠的，因此可以設(shè)置其他配置，以確保列出由JavaScript和用戶交互觸發(fā)的樣式：
- UnCSS
- UnusedCSS
- PurgeCSS
- PurifyCSS
還有一個更好的選擇：將CSS拆分為具有明確責(zé)任級別的單獨文件，并相應(yīng)地編制文檔。然后，刪除不必要的樣式變得相當(dāng)容易。
優(yōu)化CSS加載性能
并不是所有的CSS都加載相同。謙遜的標(biāo)簽有許多不總是合乎邏輯的選項和怪癖。
優(yōu)化Web字體使用
谷歌字體和類似的字體設(shè)計商已經(jīng)徹底改變了網(wǎng)絡(luò)字體，但幾行字體代碼可能會占用數(shù)百KB的帶寬。
以下是我們的優(yōu)化建議：
使用適當(dāng)?shù)淖煮w加載選項
下載和處理Web字體可能需要幾秒鐘的時間。瀏覽器將：
兩者都不理想。CSS font-display屬性和Google Font & display =參數(shù)可以選擇一個備選選項：
- auto：瀏覽器的默認(rèn)行為（通常為FOIT）。
- block：有效地阻止。文本最多三秒鐘不可見。沒有字體交換，但文本可能需要時間才能顯示。
- swap：實際上是FOUT。在web字體可用之前，將使用第一個回退。文本可以立即讀取，但字體交換效果可能會不和諧。Font Style Matcher可用于定義大小類似的回退。
- fallback：FOIT和FOUT之間的妥協(xié)。文本在短時間內(nèi)不可見（通常為100毫秒），然后使用第一個回退，直到web字體可用。
- optional：與回退類似，只是沒有發(fā)生字體交換。只有在初始期間可用時，才會使用web字體。您的第一個頁面視圖可能會顯示回退字體，后續(xù)視圖將使用下載和緩存的web字體。
使用swap、fallback或optional可以提高性能。
避免CSS @import
@import at-rule允許將CSS文件包含在其他文件中：
/* main.css */
@import url("reset.css");
@import url("grid.css");
@import url("widget.css");
這似乎是加載較小組件和字體的有效方法。不幸的是，每個@import都是渲染阻塞，每個文件都必須按順序加載和解析。
HTML中的多個標(biāo)記更有效，可以并行加載CSS文件：
也就是說，這樣更加合理…
串聯(lián)和最小化CSS
現(xiàn)代構(gòu)建工具、CSS預(yù)處理器（如Sass）和WordPress插件可以將所有部分組合到一個大型CSS文件中。然后刪除不必要的空白、注釋和字符，以將文件大小減至最小。
使用HTTP/2及更高版本，多個文件的性能問題較少，但單個文件只需要一個頭，可以更高效地進(jìn)行g(shù)zip壓縮和緩存。
單獨的CSS文件只有在您有一個或多個頻繁更改的樣式表（可能每周更改幾次）時才實用。即使如此，大部分靜態(tài)CSS代碼仍然可以合并到一個文件中。有關(guān)更多提示，請查看我們關(guān)于如何最小化CSS和JS的教程。
避免Base64編碼
工具可以將圖像編碼為base64字符串，您可以將其用作HTML的
.background {
background-image: url('data:image/jpg;base64,ABC123...');
}
這會減少HTTP請求的數(shù)量，但會損害CSS性能：
- base64字符串可以比其二進(jìn)制等效字符串大30%。
- 瀏覽器必須先解碼字符串，然后才能使用圖像，并且
- 改變一個圖像像素會使整個CSS文件無效。
只考慮Base64編碼，如果您使用的是非常小的、不經(jīng)常改變的圖像，其中生成的字符串不長于URL。
也就是說，您可以用UTF8編碼可重用的SVG圖標(biāo)，例如。
.svgbackground {
background-image: url('data:image/svg+xml;utf8,');
}
刪除CSS Hacks和IE Fallbacks
除非你很不幸，并且有很多Internet Explorer用戶，否則可以從你的CSS中刪除有條件的樣式表和黑客。在大多數(shù)情況下，IE用戶仍然會看到一些東西，特別是如果您使用的是“移動優(yōu)先”設(shè)計，默認(rèn)情況下會顯示更簡單的線性視圖。結(jié)果可能不太好，也不會是完美的像素，但你的開發(fā)預(yù)算最好是考慮所有用戶的可訪問性。
預(yù)加載CSS文件
標(biāo)記提供了一個可選的預(yù)加載屬性，可以立即開始下載，而不是等待HTML中的真正引入：
My page
這在WordPress和其他CMS中尤其有用，在這些CMS中，插件可以在頁面下方添加樣式表。
使用關(guān)鍵內(nèi)聯(lián)CSS
分析工具可能會建議您“內(nèi)聯(lián)關(guān)鍵CSS”或“減少渲染阻塞樣式表”。這可以通過以下方式提高性能：
- 識別折疊上方元素使用的基本樣式（頁面加載時可見的樣式）
- 將關(guān)鍵CSS內(nèi)聯(lián)到
中的