重要なCSSをインラインにする方法と理由-CSSチュートリアル-php.cn

Webパフォーマンスの向上：キーCSSSを挿入するための戦略とヒント

ホームページ

ウェブフロントエンド

CSSチュートリアル

重要なCSSをインラインにする方法と理由

尊渡假赌尊渡假赌尊渡假赌

Feb 20, 2025 am 11:52 AM

Webパフォーマンスの向上：キーCSSSを挿入するための戦略とヒント

この記事では、ウェブサイトのパフォーマンスを最適化するために、キーCSS（CSSルールをHTMLドキュメントに直接埋め込む）をインライン化する方法を調査します。重要なCSSをインランス化することにより、特にファーストスクリーンコンテンツのロードを大幅に加速させることができ、外部CSSファイルを取得するための追加のHTTP要求によって引き起こされるレンダリングの遅延を回避します。

How and Why You Should Inline Your Critical CSS

キーポイント：

キーCSSを正確に識別します。重要なCSSは、最初の画面でコンテンツをレンダリングするために必要な最小CSSコードを指します。これはページごとに異なり、Google PageSpeed Insights、Critical Path CSSジェネレーター、Penthouse.jsなどのツールで認識と抽出が必要です。
トライアルオフ：インラインクリティカルCSSは読み込み速度を改善するだけでなく、HTMLドキュメントサイズを増加させ、コード冗長性を引き起こす可能性があります（特に同じCSSルールが複数のページで再利用される場合）。したがって、インラインされたCSSが実際にWebページにとって重要であることを確認することが重要です。
グラント、NPMモジュール（クリティカルなど）、Gulp、WordPressプラグインなどのツール（fold最適化、W3合計キャッシュなど）は自動的に識別できます。、抽出およびインラインキー、操作プロセスを簡素化します。

How and Why You Should Inline Your Critical CSS インターネットの初期には、Webサイトが主にテキスト情報を表示しました。ネットワーク速度が向上すると、ユーザーは高解像度の写真やビデオをすばやくダウンロードでき、さまざまなCSSやJavaScriptフレームワーク、プラグインなどを使用して、Webサイト機能がますます複雑になりつつあります。必要なすべてのファイルをロードするには時間がかかり、より速いWebサイトはユーザーエクスペリエンスの向上につながります。これは、Webサイトの成功に不可欠です。重要なCSSをインランス化し、非クリティカルなCSSを非同期に搭載することは、パフォーマンスを改善するための重要な戦略です。

重要なCSSは何ですか？

キーCSSとは、ホームページ上のコンテンツのスタイルをスタイリングするために使用されるCSSコードを指します（ナビゲーションやその他の要素を含むユーザーの最初の部分）。最初の画面でコンテンツをすばやくレンダリングすることが重要です。

ユーザーはさまざまなデバイスとWindowsを使用してWebサイトにアクセスすることに注意する必要があります。そのため、ホーム画面上のコンテンツを考慮するだけではすべての問題を解決するのに十分ではありません。基本的なレイアウトとタイポグラフィに関連するCSSも重要なCSSと見なされるべきです。

現代のWeb開発慣行は、インラインCSSを推奨します。

なぜインラインする必要があるのですか？

<!DOCTYPE html>
<html>
<head>
  <title>优化后的网页</title>
  <style type="text/css">
    /* 你的最小化关键 CSS 代码 */
  </style>
</head>
<body>
  <!-- 你的标记 -->
</body>
</html>

ログイン後にコピー

Google PagesSpeed Insightsなどのツールは、CSS負荷の最適化を促す可能性があり、インラインの重要なCSSと非同期ロードブロックレンダリングレンダリングスタイルシートを示唆しています。

ブラウザは、すべてのCSSファイルがロードされた後、ホームページのコンテンツのみをレンダリングします。多数のファイルをロードする必要がある場合、これはボトルネックになります。すべてのユーザーが高速ネットワーク接続を持っているわけではなく、コンテンツがロードされる前にライブラリ、CSS、およびJavaScriptがロードされるのを待つのがイライラする可能性があります。高速ネットワークユーザーでさえ、場合によっては接続を失う可能性があります（トンネルなど）。 Webサイトが重要なCSSを象徴しており、メインコンテンツが表示される前に他のファイルがロードされていない場合、接続が壊れている場合でもユーザーはメインコンテンツにアクセスできます。

次の図は、通常のWebページと最適化されたWebページの違いを示しています。最適化されたバージョンでは、ユーザーは約0.5秒前のコンテンツにアクセスできます。多数の追加ライブラリをロードする必要がある場合、改善はより明白になります。

キーCSSにインランスする必要がありますか？

状況に依存します。大きなフレームワークやライブラリを使用しておらず、独自のCSSファイルサイズも小さい場合は、CSSをインライン化する必要がない場合があります。

ブートストラップなどのフレームを使用する場合、フレームのすべての機能は使用されない場合があります。この場合、フレームワークスタイルシートから重要なCSSのみを抽出し、実際のフレームワークを非同期にロードできます。これにより、Webサイトの速度が大幅に向上します。

インラインスタイルシートはキャッシュできますが、HTMLは通常キャッシュされていません（通常は推奨されません！）。これは、2つの間に違いがあることを意味します。更新を行うときはこれを覚えておいてください！さらに、インラインCSSにより、ユーザーがWebサイトをロードするたびにページサイズが増加します。たとえば、ウェブサイトにページごとに30kbのインラインCSSがある場合、1人のユーザーが10ページのビューで300kbを消費します。これは大したことではないように聞こえるかもしれませんが、世界の一部の地域（および3G/4Gデータプラン）では、データは高価です。インラインを計画しているCSSがページにとって本当に重要であり、すべてをインラインではないことを確認してください。

（以下のコンテンツは元のテキストに似ています。複製を避けるために、キーCSSの検索方法、Grunt、NPMモジュール、GULPおよびその他のツールを使用する方法の詳細な手順、および最終的なFAQセクションは省略されています。これらは、元のテキストを通して見つかります
概要
重要なCSSをインラインにするかどうかは、ユーザーのアクセスパターンとWebサイト構造に依存するかどうか。サイトが単一ページのWebサイトである場合、訪問者は頻繁にアクセスしません。または、フレームワークとプラグインを備えた複雑なWebサイトがある場合、インラインの重要なCSSはパフォーマンスを大幅に改善できます。
インラインCSSの唯一の懸念は、訪問ごとにページサイズを増加させることです。これは、Cookieを使用して、最初の訪問時に重要なCSSを送信しながら、完全なCSSファイルを非同期にロードおよびキャッシュすることで軽減できます。これは少し複雑ですが、同時に両方の世界を最大限に活用できます。

以上が重要なCSSをインラインにする方法と理由の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。