web-dev-qa-db-ja.com

「何よりも上のコンテンツのレンダリングをブロックするCSSを排除する」

私は自分のサイトのパフォーマンスを向上させるためにGoogle PageSpeedの洞察を使ってきましたが、これまでのところ非常に成功しています。ページが完全にロードされるまでスクリプトを延期するためのjQueryの.ready()のインハウスバージョンが既にあるので、スクリプトを延期するようなものは美しく機能しました。 。それはうまくいった。

しかし今、私は自分自身がチェックリストに残っている1つの黄色い点に目を光らせています。

私のCSSを設定する方法は、一般的にページ構造に適用されるスタイルを含む、またはサイト全体で1つまたは複数の場所で使用されるスタイルを含む1つのグローバル_.cssファイルを用意することです。その場合、ほとんどのページには、その特定のページに固有のスタイルを含む関連CSSファイルがあります（たとえば、party.phpにはparty.cssがあります）。ファイルが変更されたときにファイルが更新されることを保証するために、ファイル名に/t=FILEMTIMEを追加して（そして後で.htaccessで削除します）、すべてのCSSファイルは無期限にキャッシュされます。

とにかく、Googleは何よりも重要なコンテンツに必要な重要なスタイルをインライン化することをお勧めします。問題は...まあ、このスクリーンショットを見てみましょう： http://prntscr.com/1qt49e

ご覧のとおり...すべてのの内容は何よりも重要です。特に多くのページをロードするゲームでは、スクロールが嫌いです。そのため、私はサイトが1画面に収まるように設計しました（十分な解像度があると仮定して）。つまり、...ALLのスタイルは、倍以上のコンテンツに適用されます。それで…何か解決策はありますか？それとも、それ以外の点では完璧に近いスコアに黄色のマークが付いていますか。

csspagespeed
153
Niet the Dark Absol

関連する質問が以前に出されました： Google Pagespeedの「倍以上の内容」とは何ですか？

まず、これはすべて「モバイルページ」についての説明です。
だから私はあなたの質問とスクリーンショットを正しく解釈したとき、これはあなたのサイトではないです！

それどころか、Googleのガイドラインで推奨されていることをいくつか実行すると、「通常の」Webサイトでは状況が悪くなります。
そして、グーグルから来るからといってグーグルから来るすべてが「聖杯」であるとは限らない。あなたが彼らのHTMLマークアップを見ているなら、そしてそれら自体は良いロールモデルではありません。

私があなたにあげることができる最もよいアドバイスは以下の通りです：

  • CSSで置換された要素に幅と高さを設定して、ブラウザが要素をレイアウトできるようにし、置換されたコンテンツを待つ必要がなくなります。

さらに、なぜ1つだけではなく異なるCSSファイルを使用するのですか。
追加の要求は、少量のデータ量よりも深刻です。そして最初のリクエストの後にCSSファイルはとにかくキャッシュされます。

常に気をつけるべきことは、次のとおりです。

  • リクエスト数をできるだけ少なくする
  • ページ全体の重さをできるだけ少なくする

そして、GoogleのPageSpeed Insightsツールを100％利用する方法についてあなたの頭脳を困惑させないでください。 ;-)

追加1：これは、Googleが私たちに示しているページです。彼らが推奨するものは CSS配信の最適化 です。

前述したように、これが現実的でも「普通の」Webサイトでも意味がないとは思いません。主にレスポンシブWebデザインを使用している場合は、メディアクエリやその他のレイアウトスタイルを使用するのが最も確実です。あなたが最初にCSSをロードするつもりでないならば、そしてブロッキング方法であなたはFOUT（を得るでしょう。スタイルのないテキストのフラッシュ）。私は、これがページをレンダリングするための少なくとも数ミリ秒より「良い」とは思わない。

Imho Googleは新しい "誇大宣伝"を始めている（私がStackoverflowでそれについてのすべての質問をここで見ている時）...！

181
Netsurfer

Google Page Speedで99/100を取得する方法（モバイル用）

TLDR：あなたの<style></style>タグの間にあなたのcssスクリプト全体を圧縮して埋め込む。

私は今では約1週間の間そのとらえどころのない100/100のスコアを追いかけています。あなたのように、最後の残りの項目は「フォールドコンテンツより上のレンダリングブロックCSS」を排除することでした。

確かに簡単な解決策はありますか？いや。私は試してみました フィラメントグループのloadCSS 解決策。私の好みでは多すぎる。

（jsのように）cssのasync属性はどうですか？それらは存在しません。

私はあきらめる準備ができていました。それからそれは私に夜明けになった。 リンキングスクリプトがレンダリングをブロックしていた場合、代わりに頭全体にCSS全体を埋め込んだ場合はどうなりますか。そのようにブロックするものは何もありませんでした。

私のstyleタグに1263行のCSSを埋め込むのは絶対に間違っているようでした。しかし、私はそれを一周しました。最初に次のものを使って圧縮しました

postcss -u autoprefixer --autoprefixer.browsers 'last 2 versions' -u cssnano --cssnano.autoprefixer false *.css -d min/NPM postcssパッケージを参照 。

今はスペースのないCSSの1行だけでした。私は私のホームページの<style>your;great-wall-of-china-long;css;here</style>タグでCSSを開発しました。それから私はページスピードの洞察で再分析しました。

私はモバイルで90/100から99/100に行きました!!!

これは私（そしておそらくあなた）のすべてに反します。しかし、それは問題を解決しました。私は今のところ私のホームページでそれを使っていて、PHPincludeを介してプログラムで圧縮されたcssをインクルードしています。

あなたのcssの長さに応じて保留中のYMMV（あなたの走行距離は変わるかもしれません）。 Googleは、フォールドコンテンツをはるかに超えてDingすることがあります。 しかし仮定しないでください。テストしてください

ノート

  1. 私は今のところ私のホームページでこれをやっているだけなので、人々は私の最も重要なページでFASTレンダリングを得ます。

  2. あなたのcssはキャッシュされません。でも心配はしません。 2番目に私のサイトの別のページにアクセスすると、.cssがキャッシュされます（注1を参照）。

13
elbowlobstercowstand

役立つかもしれないいくつかのヒント：

質問から脱しました。ロードしているすべての小さいアイコン用のスプライトを作成するのに、@ Enzinoが2番目です。ファイルサイズが非常に小さいので、各アイコンのサーバーラウンドトリップを保証するものではありません。ブラウザが同時に実行できるhttpリクエストの総数も覚えておいてください。そのため、多数の小さいアイコンを要求することも「レンダリングをブロックする」ことになります。空のページはあなたのものと比較しますが、私は例えば duckduckgo がどのように読み込まれるかが好きです。

9
frequent

次のページをご覧ください https://varvy.com/pagespeed/render-blocking-css.html 。これは私が "Render Blocking CSS"を取り除くのを助けました。 "Render Blocking CSS"を削除するために、次のコードを使用しました。今グーグルのページスピードの洞察力で私はレンダリングブロッキングCSSに関連する問題を得ていません。

<!-- loadCSS -->
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/cssrelpreload.js"></script>
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/loadCSS.js"></script>
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/onloadCSS.js"></script>
<script>
      /*!
      loadCSS: load a CSS file asynchronously.
      */
      function loadCSS(href){
        var ss = window.document.createElement('link'),
            ref = window.document.getElementsByTagName('head')[0];

        ss.rel = 'stylesheet';
        ss.href = href;

        // temporarily, set media to something non-matching to ensure it'll
        // fetch without blocking render
        ss.media = 'only x';

        ref.parentNode.insertBefore(ss, ref);

        setTimeout( function(){
          // set media back to `all` so that the stylesheet applies once it loads
          ss.media = 'all';
        },0);
      }
      loadCSS('styles.css');
    </script>
    <noscript>
      <!-- Let's not assume anything -->
      <link rel="stylesheet" href="styles.css">
    </noscript>
6
Amuk Saxena

私もこの新しいページスピード測定基準に苦労しました。

スコアを％100に戻すための実用的な方法はありませんが、役に立つことがいくつかあります。

すべてのCSSを1つのファイルにまとめることは大いに役に立ちました。私のサイトはすべて％95 - ％98にバックアップされています。

私が考えることができる唯一の他のことは甘いハイスコアを得るために最初のページにすべての必要なcss（それのほとんどである - 少なくとも私のページのために）をインライン化することでした。それはあなたのスピードスコアには役立つかもしれませんが、これはおそらくあなたのページロードを遅くします。

3
Glipt

これに対する2019最適な解決策は、HTTP/2 Server Pushです。

あなたはハッキーなJavaScriptソリューションやインラインスタイルを必要としません。ただし、HTTP 2.0をサポートしているサーバーは必要です（最新のサーバーバージョンであればどれでも構いません）。サーバー自体がSSLを実行する必要があります。しかし、Let's Encryptでは、とにかくSSLを使用しない理由はありません。

私のサイト https://r.je/ はモバイルとデスクトップの両方で100/100のスコアを持っています。

これらのエラーの理由は、ブラウザがHTMLを取得し、そしてページがレンダリングされることができる前にCSSがダウンロードされるのを待たなければならないということです。 HTTP 2を使用すると、HTMLとCSSの両方を同時に送信できます。

Linkヘッダーを設定することでHTTP/2 Pushを使用できます。

Apacheの例（.htaccess）：

Header add Link "</style.css>; as=style; rel=preload, </font.css>; as=style; rel=preload"

NGINXの場合は、サーバー設定のlocationタグにヘッダーを追加できます。

location = / {
    add_header Link "</style.css>; as=style; rel=preload, </font.css>; as=style; rel=preload";
}

このヘッダーセットを使用すると、ブラウザはHTMLとCSSを同時に受信し、CSSがレンダリングをブロックするのを防ぎます。

最初のリクエストでのみCSSが送信されるように微調整したいと思うでしょうが、Linkヘッダーは「レンダリングブロックのJavaScriptとCSSを排除する」ための最も完成度が高く、最もハッカーの少ない解決策です。

詳細な議論については、ここで私の投稿を見てみてください。 HTTP/2プッシュを使用してレンダリングブロックCSSを排除する

1
Tom B

あなたのcssファイルから自動的にインラインスタイルを生成するためのパッケージの使用を検討してください。良いのは Grunt Critical または LaravelのCritical css です。

0
tsveti_iko