Page SpeedInsight et HTTP/2

Discussion dans 'Google : l'entreprise, les sites web, les services' créé par saluts92, 19 Février 2019.

  1. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    856
    J'aime reçus:
    34
    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
     
  2. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 119
    J'aime reçus:
    317
    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 :

    [​IMG]
     
    saluts92 apprécie ceci.
  3. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    856
    J'aime reçus:
    34
    Ok mais où vois tu cette information dans PSI stp ?
     
  4. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    856
    J'aime reçus:
    34
    laisse tomber je viens de comprendre
     
  5. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    856
    J'aime reçus:
    34
    mais alors; cela voudrait-il dire que Google ne prend pas en compte le HTTP/2 pour juger de la rapidité d'un site ?
     
  6. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 119
    J'aime reçus:
    317
  7. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    856
    J'aime reçus:
    34
  8. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 119
    J'aime reçus:
    317
    Si Google utilise le même outil que Pagespeed Insight, c'est open source, donc il ne cache rien.
     
  9. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    856
    J'aime reçus:
    34
    je ne comprends pas té réponse par rapport à ma demande qui était :
     
  10. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 119
    J'aime reçus:
    317
    Je ne sais pas te dire car je ne bosse pas chez Google ;)
     
  11. sebux69
    sebux69 WRInaute occasionnel
    Inscrit:
    2 Juillet 2009
    Messages:
    332
    J'aime reçus:
    10
    le passage en http 2 n'a rien changé a la vitesse de mon site dans page speed insight
     
  12. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 119
    J'aime reçus:
    317
    Bien que plusieurs request puissent se faire en même temps en HTTP/2, ça n'en change pas son nombre.
     
  13. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    856
    J'aime reçus:
    34
    ç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
     
  14. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    856
    J'aime reçus:
    34
    a priori normal puisqu'on vient de démontrer que PSI donne le résultat en HTTP1.1 et non en HTTP/2
     
  15. colonies
    colonies WRInaute impliqué
    Inscrit:
    10 Septembre 2006
    Messages:
    577
    J'aime reçus:
    75
    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=<?= (PAUSE_SECONDES 1?>" style="background-color: blue;" onload="this.width = 100; this.height = 100;">
    </body>
    </html>
     

    Fichiers attachés:

    • image.png

      image.png

      Taille de fichier:
      5.7 KB
      Affichages:
      5
    spout apprécie ceci.
  16. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    856
    J'aime reçus:
    34
    http2.jpg
    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
     
    #16 saluts92, 20 Février 2019
    Dernière édition: 20 Février 2019
  17. colonies
    colonies WRInaute impliqué
    Inscrit:
    10 Septembre 2006
    Messages:
    577
    J'aime reçus:
    75
    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.
     
  18. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    856
    J'aime reçus:
    34
    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
     
  19. colonies
    colonies WRInaute impliqué
    Inscrit:
    10 Septembre 2006
    Messages:
    577
    J'aime reçus:
    75
    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.
     
  20. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    856
    J'aime reçus:
    34
    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)
     
  21. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    856
    J'aime reçus:
    34
    ce sont les résultats de vitsse des utilisateurs ? je pensais que c'était une moyenne Google de différents émulateurs
     
  22. colonies
    colonies WRInaute impliqué
    Inscrit:
    10 Septembre 2006
    Messages:
    577
    J'aime reçus:
    75
    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".
     
  23. colonies
    colonies WRInaute impliqué
    Inscrit:
    10 Septembre 2006
    Messages:
    577
    J'aime reçus:
    75
    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).