web-dev-qa-db-ja.com

ページサイズが14.6 kb未満の場合に表示コンテンツの優先順位を取得する

私は テストページ を実行していますが、これにはjsと2.24 KBのインラインcssがありません。 pagespeed でテストを実行するとすべてが正常になりますが、5.9 KBのイメージを含めると、「可視コンテンツの優先順位付け」警告が表示されます。

レイアウトに画像を含めたいのですが、pagespeedから警告が表示される危険はありません。

これまでのところ、インライン化されたcssの2.24 KBと、8.14 KBに等しい5.9 KBのイメージがあることがわかっています。通常、最初の輻輳ウィンドウは14.6kB圧縮されているため、表示されるテキストに6.46 KBのレバレッジが残っています。ただし、表示されるテキストが6.46 KBを超えるとは思いません。 GTmetrixによると、ドキュメント全体のサイズは15.5KBのみです。

何かを誤解したかもしれませんが、表示されるコンテンツのサイズを測定する方法はありますか？

page-speedgoogle-pagespeed
3
Fabian Amran

私のサイトのいくつかで同様の問題を抱えているときにこの質問に出会い、あなたがしたように、折り目の上の画像（私の場合はロゴ）がそれぞれの問題であることを確認しました。興味深いことに、私は、PVC警告を引き起こさないロゴが折り目の上にある他の多くのサイトを持っています。

Googleフォーラムスレッド を読んだことがあります。画像の正確な寸法を指定するだけで、PVCテストに合格しますが、それは誤りであることがわかりました。私にはそれが必要ですが、実際の寸法も重要です。

残念ながら、いくつかの実験を行った後、PVC警告をトリガーするものをGoogleがどのように決定するかを明らかにする一貫したパターンや解決策を見つけることはできませんが、私が気づいた最も興味深いことは、実際に画像を変更する必要がないことです。幅と高さの宣言を介して単純に縮小する必要がありました。これは、ファイルサイズがおそらく関連する要素ではないことを示しています。

もちろん、サンプルサイズが小さい（3つのサイト）と、すべてのサイトが同じテーマを使用しているという事実は、間違って一般化されている可能性があることを意味します。それでも、同じ問題に遭遇した場合は試してみる価値があります。テスト用に、幅と高さの仕様を簡単に調整できるロゴイメージコードを生成する関数を作成しました。おそらくやり過ぎかもしれませんが、テーマのfunctions.phpファイルで宣言する3つの可能なグローバルスケーリング変数のいずれかを考慮する関数を作成しました。

  1. $GLOBALS['image_ratio']
  2. $GLOBALS['image_maxheight']
  3. $GLOBALS['image_maxwidth']

次に、これらのいずれかが設定されているかどうかを確認し、元の画像の寸法に基づいて適切な幅と高さの値を再計算します。最終的なコードは次のとおりです。

if ( ! function_exists( 'se103976_scale_image' ) ) {
    function se103976_scale_image() {
        $image_alt = get_bloginfo( 'name' );
        $image_src = "image.png";   // --- whatever image you want to use (with relevant path)
        list( $image_width, $image_height ) = getimagesize( $image_src );

        // --- Sometimes need to reduce image to pass Google PageSpeed Prioritize Visible Content warning 
        // --- So, can do by a ratio, by a max width or a max height, depending on global variable set in functions.php file 
        if ( $GLOBALS['image_ratio'] != false) { 
            $image_width = round($GLOBALS['image_ratio'] * $image_width);
            $image_height = round($GLOBALS['image_ratio'] * $image_height);
        }
        if ( $GLOBALS['image_maxheight'] != false) {
            if ($image_height > $GLOBALS['image_maxheight']) {
                $ratio = $GLOBALS['image_maxheight'] / $image_height;
                $image_height = $GLOBALS['image_maxheight'];
                $image_width = round($image_width * $ratio);
            }
        }
        if ( $GLOBALS['image_maxwidth'] != false) {
            if ($image_width > $GLOBALS['image_maxwidth']) {
                $ratio = $GLOBALS['image_maxwidth'] / $image_width;
                $image_width = $GLOBALS['image_maxwidth'];
                $image_height = round($image_height * $ratio);
            }
        }
?><img alt="<?php echo $image_alt; ?>" src="<?php echo $image_src; ?>" width="<?php echo $image_width; ?>" height="<?php echo $image_height; ?>" /><?php
    }
}

PVC警告を排除する寸法を見つけたら、 online image resizer を使用して、元の画像のサイズを変更して置き換えます。

1
Mojamba

Googleによる 「可視コンテンツの優先順位付け」について：

最新のWebページをレンダリングするには大量のネットワークリソースが必要ですが、それらすべてがすぐに必要なわけではありません。ページの表示コンテンツはネットワークとブラウザで優先されるため、ページの他の部分と競合する必要はありません。

フォールドの下に画像があるページでこの警告が表示されます。この問題を解決する方法は、イメージを遅延ロードすることです。そのためには、HTMLコードを次のようにします。

<img src="blank.gif" data-src="real-image.jpg">

次に、src属性をdata属性の値で置き換えるjavascriptを用意します。これは、onloadイベントの後、またはユーザーが特定のポイントまでスクロールしたときに発生します。多くの遅延読み込みJavaScriptライブラリが利用可能です。それらを検索するだけです。

0
Stephen Ostermiller