CSSパフォーマンスを最適化するための20のヒント

この記事では、CSSを最適化する20の方法について説明し、荷重速度を改善し、開発を簡素化し、効率を改善することを目指しています。最新のHTTPアーカイブレポートによると、Webサイトでリソース冗長性という広範な問題があり、Webサイトの中央値は1700kbのデータ、80のHTTP要求が必要であり、モバイルデバイスの完全なロードに17秒かかります。ページ重量を減らすための完全なガイドは、さまざまな提案を提供し、この記事ではCSSの最適化に焦点を当てます。 CSSは通常、パフォーマンスの問題の原因ではありませんが、典型的なWebサイトでは5つのスタイルのシートに散在する40kbのCSSしか使用していませんが、最適化の余地がまだあり、CSSの使用方法を変更することでWebサイトのパフォーマンスも改善できます。

キーポイント

• ブラウザツールとオンラインアナライザーを使用してください。ブラウザー開発者ツールやGoogle PageSpeed Insightsなどのオンラインプラットフォームを使用して、ゆっくりとしたCSSロードの問題を特定して解決します。 大規模な改善よりも優先されます：
HTTP/2を有効にし、GZIP圧縮を使用し、CDNを使用してより大きなリソースを効率的に処理し、負荷速度を大幅に改善します。
• 写真の代わりにCSS効果を使用してください。
写真の代わりにCSSを使用して、シャドウやグラデーションなどの視覚効果を実現して、ダウンロードサイズを削減し、保守性を向上させます。
• フォントのオーバーヘッドを最小化：
カスタムフォントの使用を制限し、必要なスタイルと厚さのみを選択し、システムフォントを使用してローディング時間を短縮することを検討します。
• 効率的なCSSプラクティスを実装してください：
FlexBoxやグリッドなどの最新のレイアウトメソッドを使用して、CSSコードを最小限に抑え、コストのかかるプロパティを回避してパフォーマンスとメンテナンスを簡素化します。

分析ツールの使用を学ぶ

問題を知らない限り、パフォーマンスの問題は解決できません。ブラウザ開発者ツールは最良の出発点です。メニューから開始するか、f12、

ctrl

Shiftiまたはmacosのサファリを押します cmd alt i 。すべてのブラウザは同様の機能を提供し、そのツールはパフォーマンスの低いページにゆっくりとロードされます！ただし、最も便利なタブには次のものが含まれます。ネットワークタブには、リソースのダウンロードの滝図が表示されます。最良の結果を得るには、キャッシュを無効にし、ネットワーク速度の低下を検討してください。ゆっくりダウンロードするファイルを見つけたり、他のリソースをブロックしたりします。ブラウザは通常、CSSおよびJavaScriptファイルがダウンロードされて解析されたときにブラウザのレンダリングをブロックします。パフォーマンスタブは、ブラウザプロセスを分析します。記録を開始し、ページリロードなどのアクティビティを実行してから、結果を表示するために録画を停止します。検索：1。レイアウト/再配置操作が多すぎると、ブラウザはページ要素の位置とサイズを再計算することを余儀なくされます。 3。構成操作、画面に表示されるためにページの描画された部分をグループ化してグループ化します。これは通常、プロセッサリソースを消費する操作が最も少ないです。

Chromeベースのブラウザは、GoogleのLighthouseツールを実行する「監査」タブを提供します。通常、プログレッシブWebアプリケーション開発者によって使用されますが、CSSパフォーマンスの推奨も提供します。

オンラインオプション

または、デバイスやネットワークの速度と機能の影響を受けないオンライン分析ツールを使用します。ほとんどのツールは、世界中のさまざまな場所からテストできます。

pingdom Webサイト速度テスト
gtmetrix
Google PagesSpeed Insights
webpageTest

2. 大きな進歩が最初に行われました

CSSは、パフォーマンスの問題の直接的な原因となる可能性は低いです。ただし、数分で最適化する必要があるヘビー級リソースをロードする場合があります。たとえば、

サーバーでHTTP/2とGZIP圧縮を有効にします
コンテンツ配信ネットワーク（CDN）を使用して、同時のHTTP接続の数を増やし、世界中の他の場所にファイルをコピーする
未使用のファイルを削除

画像は通常、最大のページサイズの理由ですが、多くのWebサイトは効果的に最適化できません。

ビットマップ画像のサイズを変更します。エントリーレベルのスマートフォンで撮影されたマルチメガピクセル画像は、最大のHD画面に完全に表示できません。 1600ピクセル以上の幅の画像が必要なWebサイトはほとんどありません。

1. 適切な画像形式を必ず使用してください。一般に、JPGは写真に最適で、SVGはベクター画像に最適で、PNGは他のすべての画像に最適です。最高のタイプを見つけるために実験できます。
2. メタデータを削除して圧縮係数を増やすことにより、画像ツールを使用してファイルサイズを縮小します。
3. つまり、
x

kbの画像データは、

x kbのCSSコードと同等ではないことに注意してください。バイナリ画像は並行してダウンロードされており、ページに配置するにはほとんど処理が必要です。 CSSはレンダリングをブロックし、継続するためにオブジェクトモデルに解析する必要があります。

写真の代わりにCSS効果を使用します

3. 背景画像を使用して、境界、影、丸い角、勾配、いくつかの幾何学的な形を作成することはまれです。 CSSコードで「画像」を定義すると、帯域幅が少なくなり、後で変更またはアニメーション化しやすくなります。

不要なフォントを削除

4. Googleフォントなどのサービスを使用すると、任意のページにカスタムフォントを簡単に追加できます。残念ながら、1行または2行のコードは、数百キロバイトのフォントデータを取得できます。提案：

必要なフォントのみを使用します。

1. 必要な厚さとスタイルのみをロードします。たとえば、ローマ、400の厚さ、イタリック体なし。

2. 制限文字セットはできるだけセットします。 Google Fontsを使用すると、フォントURLに

   値を追加することにより、特定の文字を選択できます。たとえば、
を開いたSANSに「SitePoint」を表示します。

3. &text= fonts.googleapis.com/css?family=Open Sans&text=SitePon補間を通じて複数の厚さとスタイルを定義する可変フォントを検討するため、ファイルは小さくなります。現在、サポートはChrome、Edge、およびSafariのいくつかのバージョンに限定されていますが、急速に成長するはずです。

4. オペレーティングシステムフォントを検討してください。 500kbのWebフォントはブランドフレンドリーかもしれませんが、一般的に使用されているHelveticaまたはArialに切り替えた場合、誰かがそれに気付くでしょうか？多くのWebサイトはカスタムWebフォントを使用しているため、標準のオペレーティングシステムフォントは以前よりもはるかに少ないです！

5. @import

   の使用は避けてください

@importルールでは、CSSファイルを別のCSSファイルに含めることができます。たとえば、

/* main.css */
@import url("base.css");
@import url("layout.css");
@import url("carousel.css");

これは、小さなコンポーネントとフォントをロードする合理的な方法のようです。 そうではありません。 ルールをネストすることができるため、ブラウザは各ファイルを順番にロードして解析する必要があります。 HTMLの複数の@importタグは、CSSファイルを並行してロードします。これは、特にHTTP/2：<link>を使用する場合にはるかに効率的です。

<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="carousel.css">

言い換えれば、より良い選択があるかもしれません...

6. 接続と圧縮

ほとんどのビルドツールを使用すると、すべての部品を、不要なスペース、コメント、文字を削除した大きなCSSファイルに結合することができます。リクエストをパイプおよびマルチプレックスするHTTP/2を使用すると、接続の必要性が低下します。場合によっては、CSSリソースが小さく頻繁に変更されている場合、別のファイルがより有益になる場合があります。ただし、ほとんどのWebサイトは、ブラウザによってすぐにキャッシュされる単一のファイルを送信することでメリットがあります。 GZIPを有効にすると、圧縮はかなりの利点をもたらさない場合があります。つまり、本当の欠点はありません。最後に、宣言でプロパティを一貫してソートするビルドプロセスを検討できます。 GZIPは、ファイル全体で一般的な文字列を使用すると、圧縮を最大化できます。

最新のレイアウトテクノロジーを使用して

7. 長年にわたり、CSSフロートを使用してページをレイアウトする必要がありました。このテクニックはテクニックです。レイアウトが効果的であることを確認するために、多くのコードとマージン/フィルの調整が必要です。それでも、メディアクエリが追加されない限り、フロートは画面サイズが小さくなります。現代の代替品：

CSS FlexBoxは、各ブロックの幅に基づいて次の行にラインをラップできる1次元レイアウトに使用されます。 FlexBoxは、メニュー、フォトギャラリー、カードなどに非常に適しています。

CSSグリッドは、明示的な行と列を備えた2次元レイアウトに使用されます。グリッドはページレイアウトに最適です。
• の両方のオプションは、開発が容易で、コードの使用が少なく、任意の画面サイズに適応でき、フローティングレンダリングよりも高速です。ブラウザはローカルで最適なレイアウトを決定できるためです。

CSSコードを削減します

8. 最も信頼性が高く最速のコードは、記述する必要のないコードです！スタイルシートが小さくなるほど、ダウンロードと解析が速くなります。すべての開発者は善意から始まりますが、CSSは機能の数が増えるにつれて時間の経過とともに膨張する可能性があります。削除して何かを壊すリスクがあるよりも、古くて不必要なコードを維持する方が簡単です。考慮すべきいくつかの提案：

• 大規模なCSSフレームワークに注意してください。ほとんどのスタイルを使用する可能性は低いため、必要に応じてモジュールを追加するだけです。
• CSSを明確な責任で小さなドキュメント（パーツ）に整理します。 CSSが明確に定義されている場合、Carouselウィジェットを削除する方が簡単です。 widgets/_carousel.css
スタンドアロンコンポーネントの開発を支援するために、BEMなどのネーミング方法を検討してください。
深くネストされたSASS/PREPROCERSORS宣言を避けてください。拡張コードは予想外に大きくなる可能性があります。
• を使用してカスケードを上書きしないでください。 !important
HTMLでインラインスタイルを使用しないでください。
UNCSSなどのツールは、HTMLを分析することで冗長コードを削除するのに役立ちますが、JavaScriptの相互作用によって引き起こされるCSS状態には注意してください。

カスケードに固執してください！
CSS-in-JSの台頭により、開発者はCSSグローバルネームスペースを回避できます。通常、ランダムに生成されたクラス名はビルド時に作成されるため、コンポーネントは競合できません。 CSS-in-JSがあなたの人生を改善した場合、それを使用し続けてください。ただし、すべてのプロジェクトで戦うのではなく、CSSカスケードの利点を理解する価値があります。たとえば、単一の場所で各要素に一般的に適用されるデフォルトのフォント、色、サイズ、テーブル、およびフォームフィールドを設定できます。各コンポーネントの各スタイルを宣言することはまれです。

Simplified Selector
最も複雑なCSSセレクターでさえ、解析するのに数ミリ秒かかりますが、複雑さを減らすと、ファイルのサイズが削減され、ブラウザの格差が役立ちます。本当にこのセレクターが必要ですか？ ！

同様に、複雑なセレクターが不注意に作成される可能性のあるSASSなどの前執行機関の深い巣に注意してください。

/* main.css */
@import url("base.css");
@import url("layout.css");
@import url("carousel.css");

費用のかかる属性に注意してください
一部のプロパティは、他のプロパティよりも遅くなります。遅れを増やすには、すべての要素にボックスシャドウを配置してみてください！

ブラウザのパフォーマンスはさまざまですが、一般的に言えば、描画前に再計算を引き起こす操作は、パフォーマンスの点でより高価になります。

<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="carousel.css">

• border-radius
• box-shadow
• opacity
• transform
• filter
• position: fixed CSSアニメーションを使用して

ネイティブCSS変換とアニメーションは、同じプロパティを変更するJavaScriptドライバーよりも常に高速です。 CSSアニメーションは、IE9以下のような古いブラウザでは機能しませんが、これらのユーザーは何が欠けているかを知りません。つまり、アニメーションのアニメーションを避けてください。微妙な効果は、パフォーマンスに悪影響を与えることなく、ユーザーエクスペリエンスを向上させることができます。アニメーションが多すぎると、ブラウザが遅くなり、一部のユーザーに動き止めを引き起こす可能性があります。

13. アニメーションの費用のかかる属性を避けてください

要素のサイズまたは位置をアニメーション化すると、すべてのフレームでページ全体が再レイアウトされる場合があります。アニメーションが段階にのみ影響する場合、パフォーマンスを改善できます。最も効果的なアニメーションの使用法：

• および/またはopacity
• 要素をパン（移動）、スケーリング、または回転させる（要素で使用される元のスペースは変更されません）。 transform

ブラウザは通常、ハードウェアアクセラレーションのGPUを使用してこれらの効果をレンダリングします。どちらも理想的ではない場合は、

を使用してページストリームから要素を削除して、自分のレイヤーでアニメーション化できるようにすることを検討してください。 position: absolute

14. どの要素がアニメーション化されるかを示します

属性により、CSSの著者は、ブラウザが事前にパフォーマンスの最適化を実行できるように要素がアニメーション化されることを示すことができます。たとえば、アプリケーションが要素に変換されていることを宣言するには：

will-change任意の数のコンマ区切り特性を定義できます。しかし、：

/* main.css */
@import url("base.css");
@import url("layout.css");
@import url("carousel.css");

パフォーマンスの問題を解決するための最後の手段として

を使用

• あまりにも多くの要素に適用しないでくださいwill-change
仕事に十分な時間を与えてください。つまり、すぐにアニメーションを開始しないでください。
• SVG画像を使用して

15. スケーラブルベクトルグラフィック（SVG）は、一般的にロゴ、チャート、アイコン、よりシンプルなチャートに使用されます。 JPGやPNGビットマップなどの各ピクセルの色を定義する代わりに、SVGはXMLを使用してライン、長方形、円などの形状を定義します。たとえば、
SVGSは、同等のビットマップよりも小さく、明確さを失うことなく無限に拡大することができます。 SVGは、CSSコードの背景画像として直接インランスできます。これは、より小さく、再利用可能なアイコンに最適であり、追加のHTTPリクエストを回避します。たとえば、

<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="carousel.css">

css

body > main.main > section.first h2:nth-of-type(odd) + p::first-line > a[href$=".pdf"]

を使用してSVGスタイルを設定します

より典型的な、SVGはHTMLドキュメントに直接埋め込まれています：
16. これにより、SVGノードがDOMに直接追加されます。したがって、すべてのSVGスタイルプロパティは、CSSを使用して適用できます。

埋め込まれたSVGコードの数が減少し、必要に応じてCSSスタイルを再利用またはアニメーション化できます。 SVG内部のSVGを使用するか、CSSの背景画像として使用すると、それらがDOMから分離され、CSSスタイルが機能しないことを意味します。

*, ::before, ::after {
  box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}

base64ビットマップ画像を使用しないでください

.myelement {
  will-change: transform;
}

img標準ビットマップJPG、PNG、およびGIFは、データURIのbase64文字列としてエンコードできます。たとえば、

17. 残念ながら：
    • base64エンコーディングは通常、そのバイナリ等価よりも30％大きい
    • ブラウザは、文字列を解析して使用する必要があります
    • 画像を変更すると、（キャッシュされた）CSSファイル全体が無効になります

    HTTPリクエストを削減している間、特にHTTP/2接続では明らかな利点がありません。一般に、画像が頻繁に変更されず、結果のBase64文字列が数百文字を超える可能性が低い場合を除き、インラインビットマップを避けてください。

    18. キーCSS Google Page Analyticsツールを使用しているユーザーには、通常、提案が表示されます。 CSSファイルのロードブロックレンダリングを使用するため、次の手順を使用してパフォーマンスを向上させることができます。
    画面上の要素をレンダリングするために使用されるスタイルを抽出します。 CriticalCSSなどのツールが役立ちます。

    これらのスタイルをhtml の要素に追加します。

    JavaScriptを使用して、メインのCSSファイルを非同期にロードします（おそらくページがロードされた後）。
    このテクノロジーは間違いなくパフォーマンスを向上させ、連続インターフェイスを備えたプログレッシブWebまたはシングルページアプリケーションに利益をもたらす可能性があります。他のWebサイト/アプリの場合、利点はそれほど明白ではない場合があります：
    2. <style></style>「崩壊」は認識されず、各デバイスで変更されます。
    3. ほとんどのWebサイトには異なるページレイアウトがあります。各ページには異なる重要なCSSが必要になる場合があるため、ビルドツールが重要になります。
    ダイナミック、JavaScript駆動型イベントは、重要なCSSツールによって認識されない画面上の変更を引き起こす可能性があります。
    このテクノロジーは、主にユーザーの最初のページの読み込みを助長します。 CSSは後続のページにキャッシュされるため、追加のインラインスタイルによりページの重みが増加します。
    つまり、Googleはあなたのウェブサイトを好み、各検索用語のNo.1ランキングにプッシュします。
    • （SEO「専門家」は私を引用できます。他の誰もがこれがナンセンスであることを知っているでしょう。
    • プログレッシブレンダリング プログレッシブレンダリングは、単一のサイト全体のCSSファイルを使用する代わりに、個々のコンポーネントの個別のスタイルシートを定義する手法です。各スタイルシートは、コンポーネントがHTMLで参照される直前にロードされます。
各はレンダリングをブロックしますが、ファイルが小さくなるため、短くなります。各コンポーネントが順番にレンダリングされるため、ページはより速く使用できます。この技術は、Firefox、Edge、IEに適しています。 ChromeとSafariは、すべてのCSSファイルをロードし、これが発生したときに白い画面を表示することでそれを体験しますが、各ファイルを

にロードすることほど悪くはありません。プログレッシブレンダリングは、個々のページがさまざまなコンポーネントの選択肢で構築されている大規模なWebサイトに利益をもたらす可能性があります。

20. css
最も重要なヒント：
スタイルシートを学びましょう！

StackoverFlowまたはBootstrapから多くのCSSを追加すると、高速な結果が生じる可能性がありますが、使用されていないジャンクでコードベースも膨らんでいきます。さらなるカスタマイズはイライラするほど難しくなり、アプリケーションは決して効率的ではありません。 CSSは簡単に習得できますが、マスターするのは困難です。有効なクライアントコードを作成する場合は、この手法を避けることはできません。いくつかのCSSの基本を理解することは、ワークフローに革命をもたらし、アプリケーションを強化し、パフォーマンスを大幅に向上させることができます。 お気に入りのCSSパフォーマンスのヒントがありませんか？

CSSパフォーマンスの最適化に関するよくある質問

CSSパフォーマンスに影響を与える重要な要因は何ですか？

CSSパフォーマンスは、さまざまな要因の影響を受けます。最初はCSSファイルのサイズです。大型ファイルはダウンロードと解析に時間がかかるため、ウェブサイトを遅くします。 2番目の要因は、CSSセレクターの複雑さです。複雑なセレクターは、ページ上の要素を一致させるためにより多くの処理能力を必要とします。最後に、CSSのアニメーションと変換を使用すると、特に処理能力が限られているモバイルデバイスのパフォーマンスにも影響します。

パフォーマンスを改善するためにCSSファイルのサイズを縮小する方法は？

CSSファイルのサイズを削減するためのさまざまな戦略があります。 1つは、未使用のスタイルを削除することです。 PurifyCSSのようなツールは、未使用のCSSを特定して削除するのに役立ちます。別の戦略は、CSSを圧縮することです。これにより、スペースやコメントなどの不要なキャラクターが削除されます。最後に、CSS圧縮ツールを使用するか、サーバー上のGZIP圧縮を可能にしてファイルサイズをさらに削減できるようにします。

複雑なCSSセレクターはパフォーマンスにどのように影響しますか？

複雑なCSSセレクターは、ページ上の要素を一致させるためにより多くの処理能力が必要なため、Webサイトを遅くしています。たとえば、子孫のセレクター（例えば、

）は、クラスのセレクター（例：

）よりも高価です。経験則として、パフォーマンスを改善するために、セレクターはできるだけシンプルかつ具体的に保つ必要があります。 .parent .child .classパフォーマンスに対するCSSアニメーションと変換の影響は何ですか？

CSSアニメーションと変換は、特に制限された処理能力を持つモバイルデバイスで、パフォーマンスに大きな影響を与える可能性があります。レイアウトオフセットや再描画を引き起こす可能性があり、ウェブサイトを遅くすることができます。パフォーマンスを向上させるには、

属性を使用して、どの属性と要素がアニメーション化されるかを事前にブラウザに伝えることを検討してください。

will-changeモバイルデバイスのCSSを最適化する方法は？

モバイルデバイスのCSSの最適化には、さまざまな戦略が含まれます。まず、メディアクエリを使用して、デバイスの特性に基づいてさまざまなスタイルを提供することを検討してください。第二に、モバイルデバイスのパフォーマンスを遅くする複雑なアニメーションと変換を避けてください。最後に、ダウンロードする必要があるデータの量を減らすために、レスポンシブ画像と怠zyなロードを使用することを検討してください。
CSSパフォーマンスを測定するためにどのツールを使用できますか？
さまざまなツールを使用して、CSSパフォーマンスを測定できます。 Googleの灯台とPageSpeed Insightsは、CSSを含むWebサイトのパフォーマンスの包括的な概要を提供できます。さらに、Chrome開発者ツールのパフォーマンスパネルは、高価なCSSを特定して最適化するのに役立ちます。

CSSはSEOにどのように影響しますか？

CSS自体はSEO自体に直接影響しませんが、間接的にランキングに影響します。負荷の遅いウェブサイト（通常は最適化されていない大規模なCSSによって引き起こされる）は、ユーザーエクスペリエンスが悪い可能性があり、SEOに悪影響を与える可能性があります。さらに、GoogleはPage Speedをランキングファクターとして扱うため、CSSを最適化するとSEOの改善に役立ちます。

CSSプリプロセッサを使用してパフォーマンスを向上させる方法は？

SASSなどのLessなどのPREPROCESSORSは、コードをより効率的かつ容易に書くことができるようにすることで、パフォーマンスを改善するのに役立ちます。これらは、変数、ネスト、ミキシンなどの機能を提供し、作成する必要があるコードの量を減らして管理しやすくします。
重要なCSSとは何ですか？パフォーマンスをどのように改善しますか？
重要なCSSは、コンテンツをWebページ画面の上にレンダリングするために必要なブロックCSSの最小量です。重要なCSSを識別して挿入することにより、ページの最初のレンダリングをスピードアップして、知覚パフォーマンスを改善できます。
CSS配信を最適化する方法は？
CSS配信の最適化には、さまざまな戦略が含まれます。まず、追加のHTTP要求を避けるために、小さなCSSをHTMLに直接入力することを検討してください。第二に、非批判的なCSSを遅らせて、レンダリングブロッキングリソースを減らします。最後に、HTTP/2を使用してCSSファイルをより効率的に配信することを検討してください。

以上がCSSパフォーマンスを最適化するための20のヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。