1,927 測定値

CSS パフォーマンスに関する 10 のヒント

に Nikita Starichenko5m2022/11/14

長すぎる; 読むには

皆さんこんにちは！ CSS スタイルに関するヒントやコツはたくさんあります。しかし、この記事ではありません。今日は、CSS をより効率的に使用して作成する方法についてお話ししたいと思います。

Companies Mentioned

featured image - CSS パフォーマンスに関する 10 のヒント

皆さんこんにちは！ CSS スタイルに関するヒントやコツはたくさんあります。しかし、この記事ではありません。今日は、CSS をより効率的に使用してプラットフォームを高速化する方法についてお話ししたいと思います。

1. シンプルなセレクター

CSS には、スタイリングの HTML 要素をターゲットにするために使用できる、幅広く柔軟なコーディングオプションがあります。何年にもわたって、専門家は開発者に単純なセレクターを作成して、ブラウザーの負荷を軽減し、コードをクリーンでシンプルに保つようにアドバイスしてきました。最も複雑な CSS セレクターでさえ解析に数ミリ秒かかりますが、複雑さを軽減するとファイルサイズが小さくなり、ブラウザーの解析が容易になります。

しない：

 main > div.blog-section + article > * { /* Code here */ }

行う：

 .hero-image { /* Code here */ }

2. 重要なインライン CSS

重要な CSS ルールをインライン化できます。これにより、次のようにパフォーマンスが向上します。

スクロールせずに見える要素 (ページの読み込み時に表示されるもの) で使用される基本的なスタイルを特定する
その重要な CSS を<head>の<style>タグにインライン化する
レンダリングのブロックを回避するために、残りの CSS を非同期的に読み込みます。これは、ブラウザが低い優先度を与える「印刷」スタイルでスタイルシートをロードすることで実現できます。ページが読み込まれると、JavaScript はそれを「すべて」のメディアスタイルに切り替えます。

 <style> /* critical styles */ body { font-family: sans-serif; color: #111; } </style> <!-- load remaining styles --> <link rel="stylesheet" href="/css/main.css" media="print" onload="this.media='all'"> <noscript> <link rel="stylesheet" href="/css/main.css"> </noscript>

3. `@import`を避ける

@importを使用すると、任意の CSS ファイルを別の CSS ファイルに含めることができます。これは、小さなコンポーネントとフォントをロードするための合理的な方法のようです。そうではありません。

@importルールはネストできるため、ブラウザは各ファイルを順番にロードして解析する必要があります。

HTML 内の複数の<link>タグは、CSS ファイルを並行してロードします。これは、特に HTTP/2 を使用する場合に、かなり効率的です。

しない：

 /* main.css */ @import url("style1.css"); @import url("style2.css"); @import url("style3.css");

行う：

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

4. CSS ファイルをプリロードする

<link>タグは、HTML での実際の参照を待つのではなく、すぐにダウンロードを開始できるオプションの preload 属性を提供します。

 <!-- preload styles --> <link rel="preload" href="/css/main.css" as="style" /> <!-- some code --> <!-- load preloaded styles --> <link rel="stylesheet" href="/css/main.css" />

5. プログレッシブレンダリング

プログレッシブレンダリングは、単一のサイト全体の CSS ファイルを使用するのではなく、個別のコンポーネントに対して個別のスタイルシートを定義する手法です。 HTML でコンポーネントが参照される直前に、それぞれがロードされます。

各<link>は引き続きレンダリングをブロックしますが、ファイルが小さいため、時間は短くなります。各コンポーネントが順番にレンダリングされるため、ページはすぐに使用可能になります。コンテンツのロードを残したまま、ページの上部を表示できます。

 <head> <!-- core styles used across components --> <link rel='stylesheet' href='base.css' /> </head> <body> <!-- header component --> <link rel='stylesheet' href='header.css' /> <header>...</header> <!-- primary content --> <link rel='stylesheet' href='content.css' /> <main> <!-- form styling --> <link rel='stylesheet' href='form.css' /> <form>...</form> </main> <!-- header component --> <link rel='stylesheet' href='footer.css' /> <footer>...</footer> </body>

6. メディアクエリレンダリングを使用する

単一の連結および縮小はほとんどのサイトに役立ちますが、大量の大きな画面スタイルを必要とするサイトでは、CSS ファイルを分割し、メディアクエリを使用して読み込むことができます。

 <!-- core styles loaded on all devices --> <link rel="stylesheet" href="core.css"> <!-- served to screens at least 40em wide --> <link rel="stylesheet" media="(min-width: 40em)" href="40em.css"> <!-- served to screens at least 80em wide --> <link rel="stylesheet" media="(min-width: 80em)" href="80em.css">

7. SVG 画像を採用する

スケーラブルベクターグラフィックス (SVG) は通常、ロゴ、チャート、アイコン、および単純な図に使用されます。 JPG や PNG ビットマップのように各ピクセルの色を定義するのではなく、SVG は XML で線、四角形、円などの形状を定義します。

単純な SVG は同等のビットマップよりも小さく、定義を失うことなく無限にスケーリングできます。 SVG は、CSS コードで背景画像として直接インライン化できます。これは、小さくて再利用可能なアイコンに最適であり、追加の HTTP リクエストを回避できます。

SVG の例:

 <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600"> <circle cx="400" cy="300" r="50" stroke-width="5" stroke="#f00" fill="#ff0" /> <svg>

SVG の使用例:

 .mysvgbackground { background: url('data:image/svg+xml;utf8,<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600"><circle cx="400" cy="300" r="50" stroke-width="5" stroke="#f00" fill="#ff0" /></svg>') center center no-repeat; }

8. CSS で SVG をスタイルする

SVG は、HTML ドキュメント内に直接埋め込むことができます。これにより、SVG ノードが DOM に直接追加されます。したがって、すべての SVG スタイル属性は CSS を使用して適用できます。

DOM の SVG:

 <body> <svg class="mysvg" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600"> <circle cx="400" cy="300" r="50" /> <svg> </body>

SVG スタイル:

 circle { stroke-width: 1em; } .mysvg { stroke-width: 5px; stroke: #f00; fill: #ff0; }

埋め込まれた SVG コードの量が削減され、必要に応じて CSS スタイルを再利用またはアニメーション化できます。

<img>タグ内または CSS 背景画像として SVG を使用することは、それらが DOM から分離されていることを意味し、CSS スタイルは効果がないことに注意してください。

9. Base64 エンコーディングを避ける

画像を base64 文字列にエンコードして、HTML の<img>タグや CSS の背景でデータ URI として使用できます。

これにより、HTTP リクエストの数が減りますが、CSS のパフォーマンスが低下します。

base64 文字列は、同等のバイナリよりも 30% 大きくなる可能性があります。
ブラウザは、画像を使用する前に文字列をデコードする必要があります。
1 つの画像ピクセルを変更すると、CSS ファイル全体が無効になります。

結果の文字列が URL よりも大幅に長くない、非常に小さく、頻繁に変更されない画像を使用している場合にのみ、base64 エンコーディングを検討してください。

しない：

 .background { background-image: url('data:image/jpg;base64,ABC123...'); }

行う：

 .svgbackground { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><circle cx="300" cy="300" r="150" stroke-width="3" stroke="#f00" fill="#ff0" /></svg>'); }

10. 短いヒント

画像を CSS 効果で置き換える - CSS コードを使用して「画像」を定義すると、使用する帯域幅が大幅に少なくなり、後で変更したりアニメートしたりするのが簡単になります。
最新のレイアウト手法 -フレックスボックスとグリッドを使用してください。
CSS アニメーションを使用 -トランジションとアニメーションは常に JavaScript より高速です。
高価なプロパティを避ける - 一部の CSS は他のものより多くの処理を必要とします。
1. border-radius
2. box-shadow
3. text-shadow
4. opacity
5. transform
6. filter
7. position: fixed
8. backdrop-filter
9. background-blend-mode