web-dev-qa-db-fra.com

Quelle est la taille d'écran utilisée par les aperçus PageSpeed ​​Insights pour mobile de Google?

Le PageSpeed ​​Insights de Google permet de vérifier les problèmes de vitesse d'un site Web sur les ordinateurs de bureau et les smartphones.

J'ai un certain nombre de requêtes de médias CSS pour les smartphones sur mon site Web, mais je ne suis pas sûr de la taille de l'écran du smartphone de PageSpeed. Est-ce que quelqu'un connaît la largeur de l'écran?

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

Comme indiqué dans Google PageSpeed ​​Insights FAQ :

Est-ce que PageSpeed ​​Insights utilise un périphérique réel?
L'analyse de PageSpeed ​​Insights n'utilise pas de véritables périphériques. PageSpeed ​​Insights récupère un site avec un moteur de rendu Webkit (le même moteur de rendu qui alimente Chrome et Safari), qui émule à la fois les périphériques mobiles et les périphériques de bureau.

Par conséquent, la largeur de l'écran ne doit pas être un facteur car elle sera rendue en conséquence dans WebKit.

Tant que vous utilisez une largeur d'écran commune, tout va bien. Comme indiqué dans le blog Webmaster Central de Google sur Responsive Design et Media Queries :

La largeur de la fenêtre par défaut pour le navigateur Android par défaut est 800px et 980px pour iOS.

Ainsi, pour les deux systèmes d'exploitation cibles, vous pouvez utiliser 800px pour les smartphones paysagers, les tablettes portrait et les ordinateurs de bureau étroits, et 479px pour les smartphones en mode portrait. Un exemple du blog est:

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

Vous trouverez ci-dessous une liste des largeurs de fenêtres pour des périphériques spécifiques, si vous devez en cibler une: tailles de la fenêtre

Vous pouvez également utiliser les éléments suivants pour définir la fenêtre d'affichage sur la largeur par défaut du périphérique et devrait également fonctionner dans PageSpeed ​​Insights:

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

En résumé, si la largeur de votre écran est correcte dans les navigateurs mobiles, elle doit également l'être dans PageSpeed ​​Insights.

2
dan

C'est 320px large.

Pour comprendre cela, j'ai exécuté Page Speed ​​Insight (PSI) sur une page contenant des plages de requêtes de support modifiant la couleur d'arrière-plan à différents points d'arrêt. Après avoir réduit la largeur à moins de 20 pixels, j’ai ajouté une requête multimédia pour chaque largeur comprise dans cette plage de 20 pixels jusqu’à ce que j’ai trouvé exactement la largeur utilisée par PSI.

La raison pour laquelle cela est (sans doute) important est que, pour moi, je tentais d'obtenir un score de 100 psi par site. Ma plus petite requête multimédia est max-width = "600px". J'utilisais des images sensibles avec picturefill, réglant la plus petite image du jeu sur le plus grand des images qui apparaissaient à mon point d'arrêt le plus petit (600px + 80px padding = 520px wide images), mais obtenais un score PSI épouvantable. L'ajout d'une image plus petite de 320 pixels de large au jeu de points a corrigé le score.

La raison pour laquelle je dis que c'est peut-être parce que, pour une utilisation réelle, ma page a été optimisée parfaitement sans se soucier de la largeur de la fenêtre de visualisation de PSI. Mais mon objectif était spécifiquement d'obtenir un score PSI élevé, il était donc important de comprendre ce nombre.

4
Jesse Trippe

La taille exacte de la fenêtre d'affichage de PageSpeed ​​Insights Checker varie .

Ceci est probablement destiné à encourager la création de sites Web réactifs au lieu de l’optimisation pour certains appareils.

De plus, si la taille de la fenêtre d'affichage était fixe, les utilisateurs pourraient peut-être cibler PageSpeed.

Vous pouvez vérifier Quelle est la taille de la fenêtre? avec PageSpeed et voir la taille de la fenêtre utilisée dans la capture d'écran.

En tant que statut dans les commentaires et autres réponses, cela se traduira par différentes tailles de fenêtres d'affichage.

Bien sûr, cela ne dit pas si les algorithmes à l'arrière ne vérifient réellement que la largeur de la fenêtre d'affichage de 1,024 px. Il faudrait mettre en place une expérience appropriée, qui f.e. charge un JPG @ 1.025 bien trop gros, et vérifie si PageSpeed ​​s’en plaint.

2
Andy

J'ai créé un test que vous pouvez exécuter afin de vérifier. Pour moi, c'était 412px pour mobile et 1350px pour le bureau:

Screenshot of PageSpeed showing viewport width of 412px

Voici le test: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.dompiler.com%2Fexperiments%2Fviewport-width.html

Voici le code HTML que vous pouvez utiliser si vous voulez créer votre propre test:

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

Il ne fait qu'ajouter du texte au corps de la page en fonction de window.innerWidth (qui correspond à la largeur de la fenêtre).

J'imagine que cette largeur change de temps en temps (et peut-être même de manière dynamique ou aléatoire), mais au moins, cela vous donne le moyen de la vérifier périodiquement.

1
Nicholas Westby