Welche Bildschirmgröße verwendet Googles PageSpeed ​​Insights für die mobile Vorschau?

Mit PageSpeed ​​Insights von Google können Sie die Geschwindigkeitsprobleme einer Website sowohl für Desktop- als auch für Smartphone-Geräte überprüfen.

Ich habe einige Medienabfragen zu CSS für Smartphones auf meiner Website, bin mir jedoch nicht sicher, wie groß der Bildschirm des PageSpeed-Smartphones ist. Kennt jemand die Bildschirmbreite?

In Google Pagespeed Insights Wie bereits erwähnt FAQ :

Verwendet PageSpeed ​​Insights ein echtes Gerät?
Bei der Analyse von PageSpeed ​​Insights werden keine realen Geräte verwendet. PageSpeed ​​Insights ruft eine Site mit einem Webkit-Renderer (der gleichen Rendering-Engine, die Chrome und Safari unterstützt) ab, der sowohl mobile Geräte als auch Desktop-Geräte emuliert.

Daher sollte die Bildschirmbreite kein Faktor sein, da sie in WebKit entsprechend gerendert wird.

Solange Sie eine gemeinsame Bildschirmbreite verwenden, sollte es Ihnen gut gehen. Wie im zentralen Webmaster-Blog von Google zu Responsive Design und Medienabfragen angegeben :

Die Standardbreite des Ansichtsfensters für den Standard-Android-Browser beträgt 800 Pixel und 980 Pixel für iOS.

Daher können Sie beide Zielbetriebssysteme 800pxfür Querformat-Smartphones, Hochformat-Tablets und schmale Desktops sowie 479pxfür Smartphones im Hochformat verwenden. Ein Beispiel aus dem Blog ist:

@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 */
}

Im Folgenden finden Sie eine Liste der Ansichtsfensterbreiten für bestimmte Geräte, falls Sie eine auswählen müssen: Ansichtsfenstergrößen

Wenn Sie alternativ Folgendes verwenden, wird das Ansichtsfenster automatisch auf die Standardbreite des Geräts eingestellt und sollte auch in PageSpeed ​​Insights funktionieren:

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

Zusammenfassend lässt sich sagen, dass Ihre Bildschirmbreite in mobilen Browsern auch in PageSpeed ​​Insights gut dargestellt werden sollte.

Es ist 320px breit.

Um dies herauszufinden, habe ich Page Speed ​​Insight (PSI) auf einer Seite mit verschiedenen Medienabfragen ausgeführt, bei denen die Hintergrundfarbe an verschiedenen Haltepunkten geändert wurde. Nachdem ich die Breite auf 20 Pixel eingegrenzt hatte, fügte ich eine Medienabfrage für jede Breite innerhalb dieses Bereichs von 20 Pixel hinzu, bis ich genau die Breite fand, die PSI verwendete.

Der Grund, warum dies (wohl) wichtig ist, ist für mich, dass ich versucht habe, meiner Portfolio-Site als Übung einen 100-PSI-Wert zu verleihen. Meine kleinste Medienabfrage ist max-width = "600px". Ich habe reaktionsschnelle Bilder mit Bildfüllung verwendet und das kleinste Bild im srcset auf das größte eingestellt. Die Bilder werden an meinem kleinsten Haltepunkt angezeigt (600 Pixel + 80 Pixel Auffüllung = 520 Pixel breite Bilder), aber ich habe einen schrecklichen PSI-Wert erhalten. Durch Hinzufügen eines kleineren, 320 Pixel breiten Bildes zum srcset wurde die Punktzahl korrigiert.

Der Grund, den ich wohl sage, ist, dass meine Seite für den realen Gebrauch perfekt optimiert wurde, ohne sich um die Breite des PSI-Ansichtsfensters zu kümmern. Mein Ziel war es jedoch speziell, einen hohen PSI-Wert zu erzielen. Daher war es wichtig, diese Zahl herauszufinden.

Die genaue Größe des Ansichtsfensters des PageSpeed ​​Insights Checker variiert .

Dies dient wahrscheinlich dazu, ein wirklich ansprechendes Webdesign zu fördern, anstatt es für bestimmte Geräte zu optimieren.

Wenn die Größe des Ansichtsfensters festgelegt wurde, können Benutzer möglicherweise auf PageSpeed ​​abzielen.

Sie können überprüfen, wie groß mein Ansichtsfenster ist. mit PageSpeed und sehen Sie die Größe des verwendeten Ansichtsfensters im Screenshot.

Wie in den Kommentaren und anderen Antworten angegeben, führt dies zu unterschiedlichen Ansichtsfenstergrößen.

Dies sagt natürlich nicht aus, ob die Algorithmen auf der Rückseite tatsächlich nur eine Breite des Ansichtsfensters von 1,024 px prüfen. Man müsste ein richtiges Experiment einrichten, das zB ein viel zu großes JPG @ 1.025 lädt, und prüfen, ob PageSpeed ​​sich darüber beschwert.

Ich habe einen Test erstellt, den Sie ausführen können, um ihn zu überprüfen. Für mich waren es 412px für Handys und 1350px für Desktops:

Hier ist der Test: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.dompiler.com%2Fexperiments%2Fviewport-width.html

Hier ist der HTML-Code, den Sie verwenden können, wenn Sie Ihren eigenen Test erstellen möchten:

<!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>

Alles, was es tut, ist das Hinzufügen von Text zum Hauptteil der Seite basierend auf window.innerWidth(dies ist die Breite des Ansichtsfensters).

Ich stelle mir vor, dass sich diese Breite von Zeit zu Zeit ändert (und vielleicht sogar dynamisch oder zufällig), aber zumindest gibt dies Ihnen die Möglichkeit, sie regelmäßig zu überprüfen.