CSS 非同期読み込みテクノロジーはページの rendering_html/css_WEB-ITnose には影響しません

この記事では、スタイル シートを非同期的にダウンロードして、ダウンロードによってページのレンダリングがブロックされるのを防ぎ、それによって訪問者ができるだけ早く情報コンテンツを取得できるようにする手法を説明します。

警告! 私は善意でこれを投稿していますが、これを読んだ人に以下で遭遇する問題を知らせる責任はありません。コミュニティからはすぐに多くのフィードバックが寄せられました (いくつかのフィードバックには感謝しています)。そして、このテクノロジーが私が期待していたほど安定していないことがますます明らかになり、テストと活用に成功した私とは異なり、多くの開発者が IE と Firefox で問題を経験していましたが (Chrome と Safari で F F テストがクラッシュしました)、他の開発者は での成功を報告しました。クロムとサファリ。今の私のアドバイスは、製品には使用しないことです。このフィードバックに対処し、関連情報を含めてこの記事を更新する予定です。

これらのテクニックの背後にある原理は新しいものではありません。たとえば、Filament 技術グループは、CSS とフォントのロードに関する多くのコンテンツを公開しています。この記事は、ノンブロッキング リソースのロードに関する私の考えと意見を記録するために書きました。

非同期スタイルのダウンロードをトリガーするコツは、 要素を使用し、media 属性に使用できない値を設定することです (ここでは media="none" を使用しましたが、他の値も使用できます)。メディア クエリが false と評価された場合でも、ブラウザはスタイル シートをダウンロードしますが、ページをレンダリングする前にスタイル シート リソースが利用可能になるのを待ちません。

スタイルシートをダウンロードしたら、スタイル ルールを適用できるようにメディア属性を使用可能な値に設定する必要がありますHTML ドキュメントの onload イベントを使用して、メディア属性を all に切り替えることができます:

CSS をロードするこの方法は、標準的な方法よりもはるかに速く訪問者に有益な情報を提供します。重要な CSS は通常のブロック方法で読み込むことができます (または、究極のパフォーマンスを得るためにインラインで処理することもできます)。一方、重要でないスタイルは、解析/レンダリング プロセス中にゆっくりとダウンロードしてレンダリングでき、後の段階で適用されます。

この手法では JavaScript を使用しますが、JavaScript を実行できないブラウザを処理するには、同等のブロック 要素を

このテクニックには副作用があります。ノンブロッキング スタイル シートの読み込みが完了すると、ドキュメントが再描画されて、定義されている新しいスタイル ルールが反映されます。新しいスタイルをページに挿入するとコンテンツのリフローがトリガーされますが、これが問題となるのは履歴キャッシュがないページの最初の読み込み時のみです。パフォーマンスに関連するものと同様に、リフローのコストを制御する必要性が潜在的な速度の利点を上回る場合は、必要な調整を行う必要があります。

フォントを読み込むには非ブロッキング CSS を使用してください

フォントの最初の描画のパフォーマンスが問題です。フォントはリソースをブロックしており、フォントのダウンロード中に適用されているテキストが非表示になります。上の例の非ブロッキング リンクを使用すると、表面のレンダリングをブロックせずに、フォント データを含むスタイルシートをバックグラウンドでダウンロードできます:

font.css には Base64 が含まれています-エンコードされた WOFF フォント。

@font-face { フォントファミリー: メリウェザー; フォントスタイル: 通常; フォントの太さ: 400; src: local('data:application/x-font-woff;charset=utf) -8;base64,...')}

main.css には、サイトに適用する必要があるすべてのスタイル ルールが含まれています。以下はフォントの宣言です:

body { font-family: Merriweather, "Lucida Grande", ...;}

フォントのダウンロード中に、最初に一致するフォールバック フォント (ここでは Lucida Grande) が使用されますページのコンテンツをレンダリングします。 フォント スタイルシートが適用されると、避けられないリフローが可能な限り目立たないよう、フォールバック フォントが優先フォントと同様のレイアウト特性を共有するように努めます。

Chrome の Google アナリティクス デバッガー サイトを使用して、シミュレートされた 3G ネットワーク接続でブロッキングと非ブロッキングをテストしました。ローカル テストでは、以下に示すネットワーク ダイアグラムが生成されました。ノンブロッキング テクノロジを使用すると、DOMContentLoaded が 450 ミリ秒早くトリガーされ、リソースのダウンロードが高速になることに注意してください。

3G ネットワークをシミュレートするグラフィック。ブロックされたフォントが上部に表示されます。下部にはノンブロッキング フォントが表示されます。

これをテスト サーバーにデプロイし、3G 接続で webpagetest コンストラクトを実行すると、次のタイムラインが生成されました:

3G タイムライン。ブロッキング フォントは上部に表示され、非ブロッキング フォントは下部に表示されます。

どちらの方法もページを完全にレンダリングするのに 2.8 秒かかりましたが、非ブロック方法は通常のブロック方法よりも 1 秒早く描画されました。メイン スタイルシートをインラインで使用して同じテストを実行すると、フォントの処理にノンブロッキング CSS が適用されている場合に 0.7 秒の時間的利点が示されます:

メイン CSS コンテンツの 3G タイムライン。ブロッキング フォントを上部に表示し、非ブロッキング フォントを下部に表示します。

このテクニックはフォントに対して非常にうまく機能しますが、フォントの読み込みをより細かく制御できる新しい CSS フォント読み込みモジュールにも注目することをお勧めします。

概要

フォントの読み込みはノンブロッキング技術を適用する例ですが、JavaScript 拡張スタイルをコア CSS から分離するなど、他の目的にも使用できます。

私は、スタイルをフレーム (コア レイアウト) とプレゼンテーション (その他すべて) に分割するというアイデアの実験を開始しました。これにより、表示されるスタイル データがしばらく遅延する一方で、重要なページ レイアウトがページ レンダリングをブロックできるようになります。