web-dev-qa-db-ja.com

GoogleのPageSpeed Insightsでモバイルプレビューに使用される画面サイズはどのくらいですか？

Googleの PageSpeed Insights を使用すると、デスクトップデバイスとスマートフォンデバイスの両方についてWebサイトの速度の問題を確認できます。

ウェブサイトにスマートフォン用のメディアクエリCSSがいくつかありますが、PageSpeedのスマートフォンの画面サイズがわかりません。誰もが画面の幅を知っていますか？

googlepage-speedscreen-size
7
Jérôme Verstrynge

GoogleのPageSpeed Insightsに記載されているとおり FAQ ：

PageSpeed Insightsは実際のデバイスを使用しますか？
PageSpeed Insightsの分析では、実際のデバイスは使用しません。 PageSpeed Insightsは、モバイルデバイスとデスクトップデバイスの両方をエミュレートするWebkitレンダラー（ChromeとSafariを強化する同じレンダリングエンジン）でサイトを取得します。

したがって、画面の幅は factor にしないでください。WebKitでそれに応じてレンダリングされます。

共通の画面幅を使用している限り、問題ありません。 レスポンシブデザインとメディアクエリ ：に関するGoogleのウェブマスターセントラルブログに記載されているとおり

デフォルトのAndroidブラウザのデフォルトのビューポート幅は800px、iOSの場合は980pxです。

そのため、両方のターゲットOSで、横長のスマートフォン、縦長のタブレット、狭いデスクトップには800pxを使用し、縦長モードのスマートフォンには479pxを使用します。ブログの例：

@media screen and (min-width:480px) and (max-width:800px) {
  /* Target landscape smartphones, portrait tablets, narrow desktops

  */
}

@media screen and (max-width:479px) {
  /* Target portrait smartphones */
}

以下は、ターゲットにする必要がある特定のデバイスのビューポート幅のリストです。 Viewport Sizes

または、次を使用すると、ビューポートがデバイスのデフォルトの幅に自動的に設定され、PageSpeed Insightsでも機能するはずです。

<meta name="viewport" content="width=device-width, initial-scale=1">

要約すると、モバイルブラウザーで画面の幅が適切にレンダリングされる場合、PageSpeed Insightsでも同様に適切にレンダリングされるはずです。

2
dan

幅は320ピクセルです。

これを理解するために、さまざまなブレークポイントで背景色を変更するメディアクエリの範囲があるページでPage Speed Insight（PSI）を実行しました。幅を20ピクセル以内に絞り込んだ後、PSIが使用している幅を正確に見つけるまで、その20ピクセルの範囲内のすべての幅に対してメディアクエリを追加しました。

これが（ほぼ間違いなく）重要である理由は、私にとって、演習としてポートフォリオサイトに100 PSIのスコアを取得しようとしたことです。私の最小のメディアクエリはmax-width = "600px"です。 srcsetの最小画像を最小ブレークポイントで表示される最大画像（600px + 80px padding = 520px wide images）に設定するpicturefillでレスポンシブ画像を使用していましたが、ひどいPSIスコアを取得していました。 srcsetにより小さい320ピクセル幅の画像を追加すると、スコアが修正されました。

私が間違いなく言う理由は、実際の使用のために、私のページはPSIのビューポート幅を気にせずに完全に最適化されたからです。しかし、私の目標は、特に高いPSIスコアを取得することでした。したがって、この数値を把握することが重要でした。

4
Jesse Trippe

PageSpeed Insights Checkerの正確なビューポートサイズは異なります。

これはおそらく、特定のデバイスの最適化ではなく、実際のレスポンシブWebデザインを促進するためです。

さらに、ビューポートのサイズが修正された場合、人々はPageSpeedをターゲットにできる可能性があります。

（私のビューポートサイズは何ですか？with PageSpeed） を使用すると、スクリーンショットで使用されているビューポートサイズを確認できます。

コメントやその他の回答に記載されているように、これにより異なるビューポートサイズが作成されます。

もちろん、これは、後ろのアルゴリズムが実際に1.024ピクセルのビューポート幅のみをチェックするかどうかはわかりません。適切な実験をセットアップする必要があります。大きすぎるJPG @ 1.025をロードし、PageSpeedがそれについて文句を言うかどうかを確認します。

2
Andy

チェックするために実行できるテストを作成しました。私にとっては、モバイルでは412px、デスクトップでは1350pxでした。

Screenshot of PageSpeed showing viewport width of 412px

テストは次のとおりです。 https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.dompiler.com%2Fexperiments%2Fviewport-width.html

独自のテストを作成する場合に使用できるHTMLコードは次のとおりです。

<!doctype html>
<html>
<head>
    <title>Viewport Width</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style type="text/css">
        body {
            font-size: 100px;
        }
    </style>
</head>
<body>
    <script>
        document.querySelector("body").appendChild(
            document.createTextNode(window.innerWidth.toString() + "px Wide"));
    </script>
</body>
</html>

window.innerWidth（ビューポートの幅）に基づいてページの本文にテキストを追加するだけです。

この幅は時々変化することを想像します（そしておそらく動的に、あるいはランダムに）でも、少なくともこれは定期的にチェックする方法を提供します。

1
Nicholas Westby