3

多くの人が知っていると思いますが、Google PageSpeed Insights は、サイトをテストするときに「レンダリング ブロック css」と呼ばれるものについて不平を言うことがあります。

彼らの提案は、HEAD で「必要な」CSS インラインのみをレンダリングすることです。外部ファイルに CSS がある場合 (ほとんどの人がそうであるように)、ページの読み込み後にこれを読み込むことをお勧めします。これはかなり極端に思えますが、それが推奨事項です。モバイルの PageSpeed スコアを改善する上でも、大きな妨げになっているようです...

Apache または nginx 用の PageSpeed モジュールを使用して、どの CSS が実際に「必要」であるかを特定できます。繰り返しになりますが、これを行うことの相対的な価値については議論の余地がありますが、これは Google の現在の推奨事項です。

テーマのフッターで小さなスクリプトを起動し、CSS を頭に挿入することで、javascript を使用して CSS ファイルを「遅延読み込み」するという考えがありました。このテクニックの例をここで見ることができます: https://bensmann.no - これは私のサイトではありません。私は基本的に、縮小された CSS で彼が行ったことを複製またはコピーしようとしています。ページの下部に含まれる Javascript を介してページが読み込まれた後、HEAD に読み込みます。

次に<!-- W3TC-include-css --> 、タグ内<noscript>に配置することで、縮小された CSS の配置を抑制し、JS 以外のブラウザーでも確実に表示されるようにします。

したがって、問題は、縮小された CSS ファイルの場所と、ファイルの名前に使用されるハッシュ (要素の ID) を取得する必要があることです。フッターに PHP を使用して、縮小された CSS ファイルの場所にアクセスする方法を知っている人はいますか?

4

2 に答える 2

0

この投稿では解決策が得られませんが、必要な場所にcssを移動することに近づく可能性があります。
配置

于 2014-04-25T10:10:10.293 に答える
0

滑りやすい斜面であるCritical Path CSSについて学ぶ必要があります。実際、どの CSS がクリティカルかどうかは誰にもわかりません。

暫定的に (または恒久的な解決策として)、Autoptimizeなどのプラグインをインストールしていろいろと試してみると、Page Speed Insights のスコアが大幅に向上します。

設定に移動するときは、[高度なオプションを表示] にチェックを入れることを忘れないでください。個人的には、すべてのCSS をインライン化してそのオプションを使用することをお勧めしますが、それは私だけです。

これを実装した後にプラグインが壊れた場合は、最適化 CSS コードのチェックを外し、プラグインの CSS ファイルを見つけて、それを例外リストに追加します。

于 2014-11-01T12:51:39.600 に答える