これは何度も尋ねられていると思いますが、探している答えを見たことがありません。
HTMLファイルとCSSファイルを使用して、ページのレンダリングがCSSをブロックするのを止めようとして、ページの洞察（ google ）を通じてサイトを実行するいくつかの簡単なテストを行っています
今、私はこのような答えを見てきました:
<link rel="stylesheet" href="style.20180530.css?ver=1.0" media="none" onload="if(media!='all')media='all'">
そして、私は次のような答えを見てきました:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,700" rel="preload" onload="this.rel='stylesheet';this.removeAttribute('onload');" as="style">
Googleフォントについては、どちらも問題ありません！しかし、ページの主要なスタイルではありません。スタイルのないページを見て、突然それらが読み込まれるのは、良いユーザー エクスペリエンスではないと思います。
明らかに、すべてをインライン スタイルとして貼り付けることで、CSS のブロックを排除できますが、これも良い習慣ではないと思います。すべてのスタイルを HTML ページに出力し、スタイル シート経由で読み込まないのです。
サイトが実際に次のようにスタイルをロードするのを見てきました:
<link rel='stylesheet' id='main-css' href='./style.2018052108.css?ver=4.9' type='text/css' media='all' />
上のページインサイト スピード テストへのリンクを次に示します。私はサイトがワードプレスを実行していることを知っています。ページのソースを表示すると、上で使用したものとまったく同じものが使用されます。
そして、それらはレンダー ブロッキングではありません...どのように?
Cloudflare を使用している https を使用しています。スタイル シートは圧縮されており、約 24 バイトしかありませんが、まだレンダリング ブロックが発生しています。
- なんで？
- それを避ける方法は？