CSS パフォーマンスに関する 10 のヒント by@wownetort
798 測定値

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

2022/11/14
5
@wownetort 798 測定値
JA
Read on Terminal Reader

長すぎる; 読むには


Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - CSS パフォーマンスに関する 10 のヒント
Nikita Starichenko HackerNoon profile picture

@wownetort

Nikita Starichenko

8+ years full-stack developer

約 @wownetort
LEARN MORE ABOUT @WOWNETORT'S EXPERTISE AND PLACE ON THE INTERNET.
react to story with heart

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

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

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

しない:

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

行う:

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

2. 重要なインライン CSS

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

  1. スクロールせずに見える要素 (ページの読み込み時に表示されるもの) で使用される基本的なスタイルを特定する

  2. その重要な CSS を<head><style>タグにインライン化する

  3. レンダリングのブロックを回避するために、残りの 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. 短いヒント

  1. 画像を CSS 効果で置き換える - CSS コードを使用して「画像」を定義すると、使用する帯域幅が大幅に少なくなり、後で変更したりアニメートしたりするのが簡単になります。

  2. 最新のレイアウト手法 -フレックスボックスグリッドを使用してください。

  3. CSS アニメーションを使用 -トランジションアニメーションは常に JavaScript より高速です。

  4. 高価なプロパティを避ける - 一部の 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

PS読んでくれてありがとう!

フロントエンド開発に関するその他の記事:

  1. React のパフォーマンスを改善するための 9 つのヒント
  2. HTML、CSS の小さな秘密を 1 つの記事で
  3. あまり知られていない HTML 5 & CSS 3 のヒントとベスト プラクティス
  4. JavaScript のベスト プラクティスに関するあまり知られていない 12 のヒント

関連ストーリー

L O A D I N G
. . . comments & more!
Hackernoon hq - po box 2206, edwards, colorado 81632, usa