Page SpeedInsight et HTTP/2

S
saluts92
WRInaute passionné
BOnjour,
Je n'arrive pas à avoir une information claire la dessus.

Est ce que PSI utilise le protocole HTTP/2 pour les sites qui le supporte ?

Pour rappel : les informations de vitesse dans le paragraphe "Données de laboratoire" sont elles faites en temps réel ? ou est-ce une moyenne sur x jours ?

D'avance merci
 
spout
spout
WRInaute accro
On crée une page bidon, dans mon browser ça indique :
HTTP/2.0

PHP: 
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>$_SERVER</title>
</head>
<body>
<h1 style="font-size: 100px;"><?php echo $_SERVER['SERVER_PROTOCOL']; ?></h1>
</body>
</html>

Dans PSI :

N9fugz9.png
 
S
saluts92
WRInaute passionné
mais alors; cela voudrait-il dire que Google ne prend pas en compte le HTTP/2 pour juger de la rapidité d'un site ?
 
S
saluts92
WRInaute passionné
spout a dit:
Bien que plusieurs request puissent se faire en même temps en HTTP/2, ça n'en change pas son nombre.
Cliquez pour agrandir...
ça n'en change pas son nombre mais ça les parrallèlise et ça agrègent aussi certaines ressources : ce qui fait gagner du temps

personnellement je viens de passer en HTTP/2 ce matin et j'ai gagné 33% de rapidité, passant de 1,5 seconde à moins de 1 seconde pour ma page d'accueil
 
colonies
colonies
WRInaute impliqué
spout a dit:
On crée une page bidon, dans mon browser ça indique :
HTTP/2.0
Dans PSI :

N9fugz9.png
Cliquez pour agrandir...

Puis on crée un test un peu plus élaboré et on se rend compte que même s'il indique HTTP/1.1, il supporte le H2/Push.

PHP: 
<?php
define('PAUSE_SECONDES', 3);

if (isset($_GET['image']))
{
    if (isset($_GET['wait']))
        sleep($_GET['wait']);
    else
        sleep(PAUSE_SECONDES);
    header('Expires: ' . gmdate('D, d M Y H:i:s \G\M\T', time() + 60));
    header('Content-Type: image/png');
    echo base64_decode('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=');
    die();
}

$image_url = $_SERVER['PHP_SELF'] . '?image&uid=' . md5(time());

// H2/Push, à commenter pour constater la différence
header('Link: <' . $image_url . '>; rel=preload; as=image', FALSE);
?><!doctype>
<html>
<head>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
    <script>
        function showTime(id)
        {
            var date = new Date();
           var str = date.getHours()
                  + ':' + (date.getMinutes()<10?'0':'') + date.getMinutes()
                  + ':' + (date.getSeconds()<10?'0':'')+date.getSeconds();
            document.getElementById(id).innerHTML = '<h1>' + str + '<h1>';
        }
    </script>
  
</head>
<body>
    <img src="" id="myImg" data-src="<?= $image_url ?>" style="background-color: purple;">
    <div id="debut"></div>
    <div id="fin"></div>
    <script>
       showTime("debut");
       setTimeout(function() {
          var oImg = document.getElementById('myImg');
          oImg.onload = function() {
              this.width = 100;
              this.height = 100;
              showTime("fin");
          };
          oImg.src = oImg.getAttribute('data-src');
       }, <?= PAUSE_SECONDES * 1000 ?>);
    </script>
  
    <img src="<?= $_SERVER['PHP_SELF'] . '?image&uid=' . microtime() ?>&wait=<?= (2 * PAUSE_SECONDES + 1) ?>" style="background-color: blue;" onload="this.width = 100; this.height = 100;">
</body>
</html>
 

Fichiers joints

  • image.png
    image.png
    5.7 KB · Affichages: 5
S
saluts92
WRInaute passionné
http2.jpg
colonies a dit:
Puis on crée un test un peu plus élaboré et on se rend compte que même s'il indique HTTP/1.1, il supporte le H2/Push.
Cliquez pour agrandir...
en quoi ton test montre que page speed insight utilise lt HTTP/2 ?

les temps de réponse donné par PSI sont ceux de HTTP/1

ci-dessus le résultat de ton test
 
Dernière édition:
colonies
colonies
WRInaute impliqué
saluts92 a dit:
en quoi ton test montre que page speed insight utilise lt HTTP/2 ?
les temps de réponse donné par PSI sont ceux de HTTP/1
ci-dessus le résultat de ton test
Cliquez pour agrandir...

Mon test :
— La page est chargée et l'heure est affichée
— On attend trois secondes coté navigateur (setTimeout)
— On appelle une image qui met trois secondes à arriver. Quand elle est chargée, on réaffiche l'heure.

Cette image (du haut) va donc s'afficher au bout de 6 secondes environ (ou un peu plus avec la latence) : l'attente coté navigateur avant de changer de src, puis les trois secondes d'attente coté serveur avant d'envoyer l'image.

Le problème, c'est que l'attente coté navigateur n'est pas considérée par PSI comme faisant partie du chargement initial : Il affiche l'heure, et s'arrête aussitôt.
On a donc une deuxième image (en bas), qui met 7 secondes à arriver, toute l'attente étant coté serveur, pour forcer PSI à attendre et qu'on puisse voir le chargement de l'autre image.

Voilà ce que ça donne en HTTP/1.1 :

Unknown.jpeg
Et voilà comment ça charge :

Capture d’écran 2019-02-20 à 11.09.05.png

En HTTP/2 :

En HTTP/2, dès le chargement de la page, l'image du haut est envoyée par push au navigateur. Par conséquent on a :
— La page qui se charge, qui affiche l'heure et lance le téléchargement de l'image (qui met trois secondes à arriver).
— On attend trois secondes coté navigateur (setTimeout)
— On remplace le src de l'image du haut par l'image qui met trois secondes à arriver... mais elle a pu être chargé par le serveur push de HTTP/2 et elle est dans le cache, elle est donc affichée immédiatement, ainsi que l'heure, trois secondes après l'affichage de la première heure.
— L'image du bas s'affiche, 7 secondes après le début du chargement.

download.jpg
Capture d’écran 2019-02-20 à 11.12.50.png

Note : pour afficher le résultat en HTTP 1/1, il suffit de commenter le serveur push.
PHP: 
header('Link: <' . $image_url . '>; rel=preload; as=image', FALSE);


Alors je ne sais pas ce que tu as fait, mais quand tu écris : "ci-dessus le résultat de ton test"... Non, c'est pas le résultat de mon test, non. Du tout. Déjà parce que l'heure indique que tu n'as pas fait le test avec PSI, ensuite je ne sais pas ce que c'est que ton navigateur mais les images cassées, là, c'est pas normal, et du coup le onload n'a pas lieu et il n'y a qu'une heure qui s'affiche. Et ce qui est intéressant pour voir si PSI supporte le server push, c'est de regarder la timeline, pas le rendu final... comme tu peux le constater quand le test se déroule normalement.
 
S
saluts92
WRInaute passionné
ok, mais quel est le rapport entre la demande initial qui était de savoir si PSI remonte les délais en utilisant http2 ou pas
Mes tests montrent que non : j'ai exactement le même temps de réponse avant et après mon passage en http/2 alors que sur tous les autres outils de métrique je gagne entre 30 et 50%

tu dévie le test en utilisant le H2PUSH
 
colonies
colonies
WRInaute impliqué
saluts92 a dit:
ok, mais quel est le rapport entre la demande initial qui était de savoir si PSI remonte les délais en utilisant http2 ou pas
Mes tests montrent que non : j'ai exactement le même temps de réponse avant et après mon passage en http/2 alors que sur tous les autres outils de métrique je gagne entre 30 et 50%

tu dévie le test en utilisant le H2PUSH
Cliquez pour agrandir...

J'ai écrit mon test pour tenter de voir si PSI s'était mis à interpréter le push, car avant il suggérait d'inliner des CSS envoyées en push, puis un jour il a arrêté de suggérer cette mauvaise idée.
Mais après tout, il n'y a pas besoin que le push fonctionne réellement pour éviter de suggérer l'inlining, et mon test n'est finalement pas fiable, car le navigateur peut simplement interpréter le header Link:preload, et donc lancer un téléchargement normal dès la page arrivée, sans attendre les 3 secondes.

Donc voilà : PSI est en HTTP/1.1, du coup il n'est pas franchement représentatif des connexions réelles des utilisateurs, et ça casse pas mal son intérêt.
Restent les stats réelles des utilisateurs qui sont très intéressantes, mais qui se font sur une moyenne de 30 jours.
 
S
saluts92
WRInaute passionné
nous sommes d'accord : wait and see

mais ton intervention n'a pas été inutile pour moi étant donné que ça m'a donné envie d'aller voir un peu plus loin le H2PUSH : et je constate que cette technologie est encore à prendre avec des pincettes car le serveur PUSH une seule fois par session mais ne sait pas si l'utilisateur a déjà le fichier en cache de son navigateur. JE ne vois paq trop l'intéret pour le moment (mais ça fera certainement l'objet d'un autre post)
 
colonies
colonies
WRInaute impliqué
En gros ça revient à faire de l'inlining, sauf que le navigateur peut indiquer au serveur qu'il a déjà les ressources et qu'il peut arrêter les transferts.
Personnellement, je n'envoie en push que les ressources bloquantes et que si l'utilisateur n'a pas de cookie de session, donc qu'il arrive pour la première fois, donc que je suis certain qu'il n'a pas les ressources nécessaires. Ça permet d'avoir des premiers affichages plus rapides, ce qui est toujours appréciable pour des connexions lentes comme le Edge ou la 3G "de base".
 
colonies
colonies
WRInaute impliqué
saluts92 a dit:
ce sont les résultats de vitsse des utilisateurs ? je pensais que c'était une moyenne Google de différents émulateurs
Cliquez pour agrandir...
Non, d'après ce qui est indiqué. C'est la zone "Données de champ", mais pour ça il faut que la page ait un traffic suffisant (ex : https://developers.google.com/speed/pagespeed/insights/?hl=fr&url=https://www.lemonde.fr)

Quand tu cliques sur rapport d'expérience utilisateur Chrome dans la description, il est indiqué que ce sont bien des mesures réelles (d'utilisateurs de Chrome uniquement, bien sûr).
 
Vous devez vous connecter ou vous inscrire pour répondre ici.
1.fr
Haut