折りたたみCSSの上にhttp / 2を採用してインライン化することはまだ推奨されていますか?


8

ここしばらくの間、私はここでGoogleの推奨事項(https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery)に従い、CSSのスクロールせずにクリティカルをインラインで読み込み時間を短縮しています。私は不思議に思っていました、これはまだhttp2の採用がどんどん高くなっているのに必要でしょうか?私の推論は、CSSがすぐにダウンロードを開始できるように、http2が1つの接続を介して並列リクエストを許可することを私が理解している方法です。http2がどのように機能するかについての私の理解が間違っている場合、誰かが私を訂正してください...

回答:


2

HTTP / 2の採用によりCSSをインライン化する必要がなくなったという点については、あなたは正しいです。実際のところ、HTTP / 2のベストプラクティスは、インライン化の反対を示唆しています。あなたとこの投稿の読者にとって残る問題は、いつこの切り替えを行うのが適切なタイミングかということです。

インライン化から非インライン化への変更(およびイメージスプライトについても同様)は、ユーザーのブラウザー/クライアントの機能を慎重に評価してHTTP / 2を受け入れるようにして初めて行う必要があります。分析を使用して決定を通知すると、これが当てはまる場合は当て推量がなくなります。

時間が経つにつれ、HTTP / 1クライアント/ブラウザに対してのみ自動インライン化するように、apache、mod_pagespeed、nginx、vanishなどに変更を加えても驚くことはありません。したがって、主要なWebサーバーのバージョンの更新に注目して、この変更を自動化できるようにしてください。

HTTP / 2の詳細については、HTTP / 2に関するchangelog.comポッドキャストをお勧めします。IlyaGrigorievaは、Googleのhttp / 2の取り組みを主導しているアーキテクトです。インタビューはこちらから聞いてください。


1

スクロールせずに見える範囲のインライン化の背後にある考え方は、CSSへのリクエストには同じ時間を要し、CSSファイルのダウンロード中もページがブロックされるため、優れたアイデアです。HTTP / 2はダウンロードを高速化しません。同時ダウンロードが可能です。このように、画像やその他のファイルは順番に並んで待つ必要はありませんが、ダウンロードして実行したりインストールしたりするのに、HTTP / 2と同じくらいの時間がかかります。


1つのcssファイルと1つの画像を含むページがあるとします。画像はcssより大きいファイルサイズです。それらが同時にダウンロードされる場合、ダウンロード時間はとにかく最も長いリソース、この場合は画像と同じくらい長くかかるので、CSSがインライン化されているかどうかは問題ではないでしょうか?
jetyet47

@ jetyet47私の要点は、OPはHTTP / 2がダウンロードを高速化すると考えていたことです。ありません。CSSは、ダウンロードされてCSSオブジェクトモデルが作成されるまで、最初のペイントをブロックします。
2016
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.