私はGoogle PageSpeedのインサイトを使用してサイトのパフォーマンスを試し、改善してきましたが、これまでのところ非常に成功していることが証明されています。スクリプトの延期などはうまく機能しまし.ready()た。ページが完全に読み込まれるまでスクリプトを延期する社内バージョンのjQueryがすでにあったため、その特定の関数をインライン化し、完全なスクリプトをページの最後に移動するだけで済みました。それはうまくいきました。

しかし、チェックリストに残っている黄色い点が1つ残っていることに気づきました。「スクロールせずに見えるコンテンツのレンダリングをブロックするCSSを排除する」。

CSSの設定方法は_.css、一般にページ構造に適用されるスタイルを含む、またはサイト全体で1つか2つ以上の場所で使用されるスタイルを含む1つのグローバルファイルを持つことです。ほとんどのページは、（例えば、関連するCSSファイルを持っparty.phpているparty.cssその特定のページへのスタイルの特定を含みます）。すべてのCSSファイルは無期限にキャッシュされます。ファイル/t=FILEMTIMEが変更されたときにファイルが確実に更新されるようにするために、ファイル名に追加します（後で.htaccessで削除します）。

とにかく、Googleはスクロールせずに見える範囲のコンテンツに必要な重要なスタイルをインライン化することをお勧めします。問題は...まあ、このスクリーンショットを見てください：http : //prntscr.com/1qt49e

ご覧のとおり... コンテンツはすべてスクロールせずに見える範囲にあります。特に多くのページをロードする必要があるゲームでは、人々はスクロールを嫌います。そこで、私は1つの画面に収まるようにサイトを設計しました（十分な解像度がある場合）。つまり、すべてのスタイルがスクロールせずに見えるコンテンツに適用されます。それで...解決策はありますか？それとも、ほぼ完璧なスコアに黄色のマークが付いたままですか？

以前に関連する質問がありました。GooglePagespeedの「スクロールせずに見えるコンテンツ」とは何ですか。

まず、これはすべて「モバイルページ」に関するものであることに注意する必要があります。
だから私があなたの質問とスクリーンショットを正しく解釈したとき、これはあなたのサイトではありません！

逆に、Googleのガイドラインで助言されていることの一部を実行すると、「通常の」Webサイトの場合よりも事態が悪化します。
そして、グーグルから来るすべてが「聖杯」であるとは限らない。また、HTMLマークアップを見ると、それら自体は良いロールモデルではありません。

私があなたに与えることができる最高のアドバイスは：

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

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

常に注意すべきことは次のとおりです。

• リクエストの数をできるだけ減らします
• 全体的なページの重みをできるだけ低く保つ

そして、GoogleのPageSpeed Insightsツールを100％取得する方法について頭を悩ませないでください...！;-)

補足1：Googleが表示するページは、CSS配信の最適化に推奨されるものです。

前に述べたように、これは現実的でも、「通常の」ウェブサイトにとって意味があるとも思いません！主にレスポンシブWebデザインがある場合、メディアクエリやその他のレイアウトスタイルを使用することが最も確実だからです。したがって、CSSを最初にロードしない場合は、ブロックしてFOUT（Flash Of Unstyled Text）を取得します。私はこれがページをレンダリングするために少なくとも数ミリ秒以上「良い」とは本当に信じていません！

Imho Googleが新しい "誇大広告"を開始しています（Stackoverflowでこの問題に関するすべての質問を確認したとき）...！

Google Page Speedで99/100を獲得した方法（モバイル用）

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

私は今、そのとらえどころのない100/100スコアを約1週間追跡してきました。あなたと同じように、最後に残った項目は、「スクロールせずに見える範囲のコンテンツのレンダリングをブロックするCSS」を削除することでした。

きっと簡単な解決法はありますか？いいえ。フィラメントグループのloadCSSソリューションを試してみました。好みに合わせて.jsが多すぎます。

asynccss（jsなど）の属性はどうですか？それらは存在しません。

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

私のスタイルタグに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になりました!!!

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

YMMV（マイレージは異なる場合があります）は、CSSの長さによって異なります。Googleは、スクロールせずに見える範囲のコンテンツを表示しすぎている可能性があります。しかし、想定しないでください。テスト！

ノート

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

2. あなたのCSSはキャッシュされません。私も心配していません。彼らが私のサイトの別のページにヒットした2番目に、.css がキャッシュされます（注1を参照）。

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

• 私は昨日のCSS最適化でこの記事に出くわしました： ...最適化
  のためのCSSプロファイリングCSSに関する多くの有用な情報と、CSSが最もパフォーマンスの低下を引き起こしているもの。

• Googe Chrome（Canary）Dev Toolsの "hidden secrets"に関するjQueryUKに関する次のプレゼンテーションを見ました 。DevToolsはそれを行うことができます。Time to First Paint、再ペイント、およびコストのかかるCSS に関するセクションを確認してください。

• また、requireJSのようなローダーを使用している場合は、require-CSSと呼ばれるCSSローダープラグインの1つを確認できます。このプラグインは、CSSOを使用します。同じプロパティを持つブロックをマージします。私はそれを数回使用し、ケースごとにかなりのCSSを節約できます。

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

次のページhttps://varvy.com/pagespeed/render-blocking-css.htmlをご覧ください。これにより、「レンダリングブロッキングCSS」を取り除くことができました。「Render Blocking CSS」を削除するために、次のコードを使用しました。今Googleページの速度の洞察では、レンダリングブロッキング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>

私もこの新しいpagespeedメトリックと格闘しました。

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

すべてのcssを1つのファイルに結合すると、非常に役立ちます。私のサイトはすべて％95-％98に戻っています。

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

これに対する2019年の最適なソリューションは、HTTP / 2サーバープッシュです。

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

私のサイトhttps://r.je/には、モバイルとデスクトップの両方で100/100のスコアがあります。

これらのエラーの理由は、ブラウザがHTMLを取得し、ページがレンダリングされる前にCSSがダウンロードされるのを待つ必要があるためです。HTTP2を使用すると、HTMLとCSSの両方を同時に送信できます。

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

Apacheの例（.htaccess）：

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

NGINXの場合、サーバー構成のロケーションタグにヘッダーを追加できます。

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

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

CSSが最初のリクエストでのみ送信されるように微調整する必要がありますが、リンクヘッダーは「レンダリングブロッキングJavascriptとCSSを排除する」ための最も完全で最もハッキングの少ないソリューションです

詳細については、私の投稿をご覧ください。HTTP/ 2プッシュを使用してレンダリングブロッキングCSSを削除します。

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

jQueryのこんにちはあなたはこのようにしか使用できません

asyncとtype = "text / javascript"のみを使用してください