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

7

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?

Jérôme Verstrynge
quelle

Antworten:

2

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.

dan
quelle
4

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.

Jesse Trippe
quelle
320px ist die Breite, die alle iPhone-Webbrowser verwenden. Angesichts der üblichen Größe wäre es für Google sinnvoll, diese auszuwählen.
Stephen Ostermiller
1
@StephenOstermiller 320 px entspricht nicht der Breite des Ansichtsfensters jedes iPhones. Das iPhone 6 verwendet bereits 375 Pixel. viewportsizes.com
Andy
2

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.

Andy
quelle
1
zeigt mir 411x731 mit Ihrer Seite
Iggy
1
Interessant. Ich habe mich gefragt: Wenn die Größe festgelegt würde, wäre es möglich, die Seitengeschwindigkeit zu bestimmen - was Google definitiv nicht will. Sie variieren also wahrscheinlich die Bildschirmabmessungen.
Andy
Ursprünglich waren es in meinem Fall 375 × 667 px² für Mobilgeräte und 1024 × 768 px² für Desktops. Jesse meldete eine Breite von 320 px für Mobiltelefone.
Andy
1

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:

Screenshot von PageSpeed ​​mit einer Ansichtsfensterbreite von 412px

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.

Nicholas Westby
quelle