タックルレンダリングレンダリングWebサイトのブロックCSS

CSSロード戦略を最適化し、Webレンダリング速度を改善します

この記事では、ブラウザがCSSファイルをロードする方法とWebレンダリング速度への影響について説明し、ユーザーエクスペリエンスの向上に役立ついくつかの最適化戦略を導入します。

問題：cssブロックレンダリング

Googleページの速度洞察を使用している場合、次のようなヒントを見たことがあるかもしれません：

ブラウザはDOMとCSSOMを使用してWebページをレンダリングします。 CSSは重要なレンダリングパスにあります。つまり、ブラウザはすべてのHTMLおよびCSS情報をダウンロードして処理してレンダリングを開始する必要があります。特に外部スタイルのシートは、ブラウザとサーバーの間に複数のラウンド旅行を引き起こし、HTMLダウンロードの完了とページのレンダリングの間に時差を引き起こします。

キーCSSの概念

HTMLはページレンダリングに不可欠ですが、すべてのCSSが重要であるわけではありません。ユーザーが最も懸念しているのは、ページの可視領域（ビューポート）のコンテンツです。したがって、一般的な最適化戦略は、ブロッキングリソースの遅延または非同期負荷、またはHTMLへの主要部分のインラインです。

最適化戦略

以下は、開発者に一般的に使用される最適化方法です。

1. メディアタイプとメディアクエリでのレンダリングブロッキングを最小化します：外部cssを異なるファイル（例：、style.css、print.css）に分割し、適切なメディアタイプとメディアクエリを使用してください。彼ら。たとえば、other.css

<link href="style.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">

ブラウザはすべてのスタイルシートをダウンロードしますが、ノンブロッキングスタイルのシートを好みます。

2. コマンドを使用して：preloadコマンドは、ブラウザに特定のリソースを事前に取得するように指示します。 JavaScriptのイベントと組み合わせると、非同期ロードスタイルシートを実装できます。 preload onload現在、
のブラウザサポートは制限されており、フィラメントグループが提供するポリフィルを使用できます。

<link rel="preload" as="style" href="style.css" onload="this.rel='stylesheet'">

preload

Filament Groupのソリューション：ブラウザをサポートしていないポリフィルを含むLoadCSSライブラリを使用しています。

このメソッドは「上のビューポート」の概念に依存せず、代わりにスタイルシートリンクを対応するHTMLコンテンツの前に配置してページレンダリングを実装します順番のコンテンツ。たとえば、preload

結論

ブラウザがスタイルシートをダウンロードする方法は、ページのレンダリングをブロックし、ユーザーエクスペリエンスに影響を与える可能性があります。この記事で導入されたいくつかの最適化方法は、この問題を解決し、Webページの読み込み速度を改善するのに役立ちます。 選択する方法は、ウェブサイトのサイズと複雑さによって異なります。

FAQ（FAQ）

• 重要なレンダリングパス（CRP）は何ですか？迅速なロードWebサイトにとってなぜそれが重要なのですか？

  CRPは、HTML、CSS、およびJavaScriptを画面ピクセルに変換するためのブラウザの一連のステップです。 CRPの最適化により、Webページの読み込みをスピードアップしてユーザーエクスペリエンスを向上させることができます。

• キーレンダリングパスを最適化する方法は？

  CRPは、ファイルサイズを縮小し、重要なリソースの数を最小限に抑え、臨界パスの長さを短縮することで最適化できます。たとえば、圧縮ファイル、インラインの重要なCSS、非批判的なCSSおよびJavaScriptの遅延、非同期負荷を使用します。

• レンダリングブロッキングリソースとは何ですか？それらはウェブサイトの読み込み速度にどのように影響しますか？

  レンダリングブロッキングリソースは、完全にダウンロードされて処理されるまで、Webページが表示されるのをブロックするファイル（通常はCSSおよびJavaScriptファイル）です。彼らはウェブのレンダリングを遅らせ、負荷を遅くします。

• レンダリングレンダリングリソースを排除する方法は？

  非クリティカルなCSSとJavaScript、インラインの重要なCSS、およびファイルの非同期負荷を遅らせることにより、レンダリングブロッキングリソースを排除できます。

• 同期荷重と非同期負荷の違いは何ですか？

  ファイルが完全にダウンロードされて処理されるまで、Webページのレンダリングにより、ファイルのダウンロード中にレンダリングを続けることができます。

• 重要なCSSをインライン化する方法は？なぜこれが有益なのですか？

  インラインキーCSSは、外部ファイルではなく、CSSをHTMLドキュメントに直接配置することです。これにより、個別のネットワークリクエストの必要性が排除され、Webページのレンダリングに必要な時間が短縮されます。

• 重要なレンダリングパスにおけるJavaScriptの役割は何ですか？

  JavaScriptはDOMとCSSOMを動作させることができますが、適切に処理されていない場合は、レンダリングプロセスもブロックします。

• 圧縮ファイルでウェブサイトの読み込み速度を上げるにはどうすればよいですか？

  圧縮ファイルは、コード内の不要な文字（スペースやコメントなど）を削除し、ファイルのサイズを削減し、ダウンロードを高速化します。

• 重要なレンダリングパスを分析および最適化するためにどのツールを使用できますか？ Google PageSpeed Insights、Lighthouse、WebPagetestなどのツールは、重要なレンダリングパスの分析と最適化に役立ちます。

ユーザーエクスペリエンスを改善するためにキーレンダリングパスを最適化する方法は？
• 重要なレンダリングパスを最適化すると、Webページの読み込み時間を短縮し、ユーザーエクスペリエンスを向上させることができます。読み込み速度が高速化すると、ユーザーの満足度が向上し、検索エンジンのランキングが改善される可能性があります。

（この記事の一部はSiteGroundによって提供されています）

以上がタックルレンダリングレンダリングWebサイトのブロックCSSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。