156

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

しかし今、私はチェックリストに残っている 1 つの黄色い点に気付きました。

私の CSS の設定方法は_.css、一般的なページ構造に適用されるか、サイト全体の 1 つまたは 2 つ以上の場所で使用されるスタイルを含む 1 つのグローバル ファイルを用意することです。ほとんどのページには、その特定のページに固有のスタイルを含む関連付けられた CSS ファイル (たとえば、party.phphas ) があります。ファイルが変更されたときにファイルが更新されることを保証するために、party.cssすべての CSS ファイルは無期限にキャッシュされます。/t=FILEMTIME

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

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

4

7 に答える 7

186

関連する質問が以前に尋ねられました: Google Pagespeed の「スクロールせずに見えるコンテンツ」とは何ですか?

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

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

私があなたにできる最善のアドバイスは次のとおりです。

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

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

常に気をつけなければならないことは次のとおりです。

  • リクエストの数をできるだけ減らす
  • ページ全体の重量をできる限り低く保つ

そして、Google の PageSpeed Insights ツールを 100% 入手する方法について頭を悩ませる必要はありません ...! ;-)

追加 1: これは Google が示しているページで、CSS 配信の最適化に推奨されるものです。

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

Imho Google は新しい「誇大広告」を開始しています (Stackoverflow でそれに関するすべての質問を見たとき) ...!

于 2013-09-14T15:40:04.803 に答える
16

Google Page Speed で 99/100 を達成した方法 (モバイル用)

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

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

確かに簡単な解決策はありますか?? いいえ。Filament グループの loadCSSソリューションを試してみました。私の好みには.jsが多すぎます。

asynccss (js など) の属性はどうですか? それらは存在しません。

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

スタイルタグに 1263 行の CSS を埋め込むのは絶対に間違っているように思えました。しかし、私はそれを回転させました。最初に次を使用して圧縮しました（そしてプレフィックスを付けました）：

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

これで、スペースのない CSS の 1 つの長い行だけになりました。ホームページのタグにcss を追加しました<style>your;great-wall-of-china-long;css;here</style>。次に、ページ速度の洞察で再分析しました。

モバイルで 90/100 から 99/100 になりました!!!

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

YMMV (マイレージは異なる場合があります) は、css の長さによって異なります。スクロールせずに見える範囲のコンテンツが多すぎると、Google があなたを非難するかもしれません。しかし、仮定しないでください。テスト！

ノート

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

  2. CSS はキャッシュされません。とはいえ、あまり心配していません。私のサイトの別のページにアクセスした瞬間に、.cssがキャッシュされます (注 1 を参照)。

于 2016-08-21T18:30:23.150 に答える
9

役立つヒント:

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

  • Googe Chrome (Canary) Dev Tools の「hidden secrets」に関する jQueryUK に関する次のプレゼンテーションを見ました: DevTools Can do that . Time to First Paint、再描画、コストのかかる CSSに関するセクションを確認してください。

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

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

于 2013-09-16T19:36:09.777 に答える
4

私もこの新しいページ速度指標に苦労しました。

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

すべての css を 1 つのファイルにまとめると、非常に役立ちました。すべてのサイトが %95 ～ %98 に戻っています。

私が考えることができる他の唯一のことは、最初のページで必要なすべてのcss（少なくとも私のページではほとんどのように見えます）をインライン化して、甘いハイスコアを取得することでした. 速度スコアには役立つかもしれませんが、ページの読み込みが遅くなる可能性があります.

于 2013-09-18T18:38:24.073 に答える