皆さんこんにちは！ 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>  <link rel="stylesheet" href="/css/main.css" media="print" onload="this.media='all'"> <noscript> <link rel="stylesheet" href="/css/main.css"> </noscript> 3. を避ける @import を使用すると、任意の CSS ファイルを別の CSS ファイルに含めることができます。これは、小さなコンポーネントとフォントをロードするための合理的な方法のようです。そうではありません。 @import ルールはネストできるため、ブラウザは各ファイルを順番にロードして解析する必要があります。 @import HTML 内の複数の タグは、CSS ファイルを並行してロードします。これは、特に HTTP/2 を使用する場合に、かなり効率的です。 <link> しない： /* 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 ファイルをプリロードする タグは、HTML での実際の参照を待つのではなく、すぐにダウンロードを開始できるオプションの preload 属性を提供します。 <link>  <link rel="preload" href="/css/main.css" as="style" />   <link rel="stylesheet" href="/css/main.css" /> 5. プログレッシブ レンダリング は、単一のサイト全体の CSS ファイルを使用するのではなく、個別のコンポーネントに対して個別のスタイルシートを定義する手法です。 HTML でコンポーネントが参照される直前に、それぞれがロードされます。 プログレッシブ レンダリング 各 は引き続きレンダリングをブロックしますが、ファイルが小さいため、時間は短くなります。各コンポーネントが順番にレンダリングされるため、ページはすぐに使用可能になります。コンテンツのロードを残したまま、ページの上部を表示できます。 <link> <head>  <link rel='stylesheet' href='base.css' /> </head> <body>  <link rel='stylesheet' href='header.css' /> <header>...</header>  <link rel='stylesheet' href='content.css' /> <main>  <link rel='stylesheet' href='form.css' /> <form>...</form> </main>  <link rel='stylesheet' href='footer.css' /> <footer>...</footer> </body> 6. メディア クエリ レンダリングを使用する 単一の連結および縮小はほとんどのサイトに役立ちますが、大量の大きな画面スタイルを必要とするサイトでは、CSS ファイルを分割し、メディア クエリを使用して読み込むことができます。  <link rel="stylesheet" href="core.css">  <link rel="stylesheet" media="(min-width: 40em)" href="40em.css">  <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 スタイルを再利用またはアニメーション化できます。 タグ内または CSS 背景画像として SVG を使用することは、それらが DOM から分離されていることを意味し、CSS スタイルは効果がないことに注意してください。 <img> 9. Base64 エンコーディングを避ける 画像を base64 文字列にエンコードして、HTML の タグや CSS の背景でデータ URI として使用できます。 <img> これにより、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 は他のものより多くの処理を必要とします。 border-radius box-shadow text-shadow opacity transform filter position: fixed backdrop-filter background-blend-mode PS読んでくれてありがとう！ フロントエンド開発に関するその他の記事: React のパフォーマンスを改善するための 9 つのヒント HTML、CSS の小さな秘密を 1 つの記事で あまり知られていない HTML 5 & CSS 3 のヒントとベスト プラクティス JavaScript のベスト プラクティスに関するあまり知られていない 12 のヒント

Mozilla

Progressive

このオーディオは、ストーリーの元の言語で制作されています。

長すぎる; 読むには

Let Your Engineers & PMs focus on Product. Apply for $50K Credits!

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

長すぎる; 読むには

Companies Mentioned

@wownetort

関連ストーリー