Comment accélérer chargement d'une image ?

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par ortolojf, 4 Septembre 2021.

  1. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 485
    J'aime reçus:
    28
    Bonjour

    A ma grande stupeur, je me suis aperçu que mes simples affichages d'historiques de courses, me valaient un 87% en performance sur Lighthouse.

    Comment accélérer les chargements de la forme :

    HTML:
    
    <img class="view2" alt="Historique Courses du lendemain" itemscope itemtype="http://schema.org/ImageObject" itemprop="name" title="Historique Courses du lendemain" itemprop="image" src="[URL='https://www.pronostics-courses.fr/php/courses_nouvelles/new_historique.php?FILENAME=resultats1.txt&FIRST_PERIODE=8085&LAST_PERIODE=8086&PARAMS=a%3A8%3A%7Bi%3A0%3Bi%3A1%3Bi%3A1%3Bi%3A2%3Bi%3A2%3Bi%3A3%3Bi%3A3%3Bi%3A4%3Bi%3A4%3Bi%3A5%3Bi%3A5%3Bi%3A6%3Bi%3A6%3Bi%3A7%3Bi%3A7%3Bi%3A8%3B%7D&ID=1&WIDTH_SCREEN=1024&HEIGHT_SCREEN=768']https://www.pronostics-courses.fr/php/courses_nouvelles/new_historique.php?FILENAME=resultats1.txt&amp;FIRST_PERIODE=8085&amp;LAST_PERIODE=8086&amp;PARAMS=a%3A8%3A%7Bi%3A0%3Bi%3A1%3Bi%3A1%3Bi%3A2%3Bi%3A2%3Bi%3A3%3Bi%3A3%3Bi%3A4%3Bi%3A4%3Bi%3A5%3Bi%3A5%3Bi%3A6%3Bi%3A6%3Bi%3A7%3Bi%3A7%3Bi%3A8%3B%7D&amp;ID=1&amp;WIDTH_SCREEN=1024&amp;HEIGHT_SCREEN=768[/URL]" />
    
    
    Ce sont des images type *.png, pas de possibilité de compression.

    Merci beaucoup beaucoup de votre aide.

    Amicalement.
     
  2. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 485
    J'aime reçus:
    28
    Voili voilou

    Monsieur Spout m'avait dit celà : lire/traduire en base64, et afficher en inline.

    Il me suffirait de charger le base64 en amont.

    Merci beaucoup à Spout. ;)

    Amicalement.
     
  3. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 801
    J'aime reçus:
    273
    base64 inline éventuellement pour les petites images genre icônes, ça alourdit quand même la page et on se prive de la mise en cache dont bénéficient les images.

    Si, quand même un peu, par exemple avec OptiPNG : http://optipng.sourceforge.net/
     
  4. Furtif
    Furtif WRInaute accro
    Inscrit:
    9 Août 2005
    Messages:
    2 917
    J'aime reçus:
    273
  5. emualliug
    emualliug WRInaute occasionnel
    Inscrit:
    1 Février 2020
    Messages:
    371
    J'aime reçus:
    73
    À noter que le base 64 produit des fichiers 33 à 36 % plus volumineux que le fichier "de base". On en récupère peut-être une partie avec la compression, à vérifier.

    Fournir un contenu en inline est à double-tranchant sur la vitesse :
    • + il n'est pas nécessaire de faire une nouvelle requête au serveur
    • - pas de possibilité de mise en cache, le contenu devra toujours être téléchargé
    Pour des petites ressources, ça peut être intéressant, dans la mesure où le temps lié à la requête avec le serveur est supérieur au temps de transfert des données. J'avais lu quelque part que c'est intéressant pour les ressources de jusqu'à 1 ko. Le seuil peut varier, mais c'est l'idée : intéressant uniquement pour les ressources (très) légères.
     
  6. passion
    passion WRInaute accro
    Inscrit:
    6 Janvier 2006
    Messages:
    3 952
    J'aime reçus:
    183
    Tu as plusieurs méthodes qui ont leurs avantages et inconvénients : lazy load, base64 mais ne serait-ce pas mieux de convertir tes images en JPEG ?
    Si tu tiens à rester en png, tu as ça qui est très bien : https://app.imagify.io/ il te convertit jusqu'à 80% sans perte de qualité
     
  7. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 801
    J'aime reçus:
    273
    Moi je ne vois pas d'image sur son site donc difficile de savoir de quel genre d'image il parle :confused:
     
  8. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 485
    J'aime reçus:
    28
    Excuses-moi rick38

    Avec les pages internes de stats de courses, on peut choisir de cliquer sur "Ok", pour sélectionner "Affichage Hist." au lieu de "pas d 'Affic".

    L'historique est en haut de l'écran.

    Pour mes essais, je n'ai plus du tout de requête HTTP, seulement deux fonctions : old_historique() et new_historique(), qui rendent : base64_encode(ob_get_contents($image)).

    Sous Firefox, tout baigne.

    Par contre Chrome me donne souvent cette erreur :

    Code:
    
                    400 Bad Request
                Request Header Or Cookie Too Large
                    nginx/1.20.1
    
    
    Ceci, même à d'autres pages que les stats, et seulement, après avoir vu un historique.

    Incompréhensible, car aléatoire.

    Souvent, en relançant avec la même url, le résultat est correct.

    Le problème ne se produit pas avec Firefox.

    Mon Fedora 34 récemment réinstallé est-il fautif ?

    Le gnome-shell s'arrêtait jusqu'à hier souvent, avant ma mise à jour d'hier soir.

    Je viens de désactiver selinux.

    Merci beaucoup de votre aide.
     
  9. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 485
    J'aime reçus:
    28
    Pour plus d'explications.

    Y a -t-il une erreur ?

    Merci beaucoup.


    PHP:

    <?php

    /*********************************************/
    /**    Fin de (new|old)_historique()    **/
    /*********************************************/
    //        header("Content-type: image/png");
            
    imagepng($image);
            
    $result ob_get_contents();
            
    ob_end_clean();
            
    imagedestroy($image);
            return 
    base64_encode($result);
    }


    /*******************************************/
    /**      Chargement de  $BASE64    **/
    /******************************************/
    if(preg_match("{statistiques_}"$_SERVER['SCRIPT_NAME']))
    {
        if(
    is_array($P))
        {
            
    $PARAMS serialize($P);
        }
        else
        {
            
    $PARAMS "";
        }

    /** Update : $FIRST_PERIODE et $LAST_PERIODE **/
        
    first_last_periode();

        
    $WIDTH_SCREEN    1024;
        
    $HEIGHT_SCREEN    768;

        
    $base64_img old_historique($resultats$id_course$FIRST_PERIODE$LAST_PERIODE$WIDTH_SCREEN$HEIGHT_SCREEN$PARAMS);

        
    $BASE64 'data:image/png;charset=utf-8;base64,' $base64_img;
    }


    /**********************************/
    /**        Affichage image     **/
    /*********************************/
        
    echo "<img class=\"view2\" alt=\"Historique Courses Pass&eacute;es\" itemscope itemtype=\"http://schema.org/ImageObject\" itemprop=\"name\" title=\"Historique Courses Pass&eacute;es\" itemprop=\"image\" src=\"" $BASE64 ."\" style=\"width:97%; height:auto;\" />\n";

    ?>

     
  10. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 485
    J'aime reçus:
    28
    Je vous demande pardon

    Voici les deux requêtes HTTP, la première passe, la deuxième avec un formulaire : Erreur 400.

    Les deux requêtes sont identiques.

    Où est l'erreur ?

    Merci beaucoup.


    Code:
    
      Direct :
    ***********
    192.168.0.1 - - [07/Sep/2021:10:37:29 +0200] "GET /php/courses_anciennes/statistiques_old_courses.php?
    ENTIERS=01r07r2021r2107010104r3r1r3.0847524948532r39.969551223193r2107010104&
    MODE=1&
    REDIRECT=1&
    TEND=3&
    PARAM%5B%5D=1&PARAM%5B%5D=2&PARAM%5B%5D=3&PARAM%5B%5D=4&PARAM%5B%5D=5&PARAM%5B%5D=6&PARAM%5B%5D=7&PARAM%5B%5D=8&PARAM%5B%5D=9&PARAM%5B%5D=10&PARAM%5B%5D=11&PARAM%5B%5D=12&PARAM%5B%5D=13&PARAM%5B%5D=14&PARAM%5B%5D=15&PARAM%5B%5D=16&
    TAB_P=1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16&
    AFFIC=1&
    FIRST_PERIODE=8084&
    LAST_PERIODE=8085
    HTTP/1.1" 200 14293 "-" "Mozilla/5.0 (X11; Fedora; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36"
    
      Formulaire
    ****************
    192.168.0.1 - - [07/Sep/2021:10:37:38 +0200] "GET /php/courses_anciennes/statistiques_old_courses.php?
    ENTIERS=01r07r2021r2107010104r3r1r3.0847524948532r39.969551223193r2107010104&
    MODE=1&
    REDIRECT=1&
    TEND=3&
    PARAM%5B%5D=1&PARAM%5B%5D=2&PARAM%5B%5D=3&PARAM%5B%5D=4&PARAM%5B%5D=5&PARAM%5B%5D=6&PARAM%5B%5D=7&PARAM%5B%5D=8&PARAM%5B%5D=9&PARAM%5B%5D=10&PARAM%5B%5D=11&PARAM%5B%5D=12&PARAM%5B%5D=13&PARAM%5B%5D=14&PARAM%5B%5D=15&PARAM%5B%5D=16&
    TAB_P=1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16&
    AFFIC=1&
    FIRST_PERIODE=8084&
    LAST_PERIODE=8085
     HTTP/1.1" 400 635 "http://ortolojf/php/courses_anciennes/statistiques_old_courses.php?ENTIERS=01r07r2021r2107010104r3r1r3.0847524948532r39.969551223193r2107010104&MODE=1&REDIRECT=1&TEND=3&PARAM%5B%5D=1&PARAM%5B%5D=2&PARAM%5B%5D=3&PARAM%5B%5D=4&PARAM%5B%5D=5&PARAM%5B%5D=6&PARAM%5B%5D=7&PARAM%5B%5D=8&PARAM%5B%5D=9&PARAM%5B%5D=10&PARAM%5B%5D=11&PARAM%5B%5D=12&PARAM%5B%5D=13&PARAM%5B%5D=14&PARAM%5B%5D=15&PARAM%5B%5D=16&TAB_P=1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16&AFFIC=1&FIRST_PERIODE=8084&LAST_PERIODE=8085" "Mozilla/5.0 (X11; Fedora; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36"
    
    
     
  11. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 801
    J'aime reçus:
    273
    Request Header Or Cookie Too Large est une erreur qui dit que les cookies sont trop gros ou corrompus, il faut les supprimer puis voir si l'erreur continue.
     
  12. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 485
    J'aime reçus:
    28
    Bonjour rick38

    Hier, j'ai effacé les cookies de ortolojf mon site local.

    Sur Chrome version : 93.0.4577.63-1 et Linux Fedora 34, erreur 400 sur formulaire, jamais direct.

    Sur Firefox, pas d'erreur.

    Bug de Chrome ? :(

    Pour les cookies, il y a :

    SES ( session ),
    _ga,
    _gid,
    euconsent,
    et 1083 octet dans mémoire du browser.

    Merci beaucoup de ton aide.
     
  13. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 485
    J'aime reçus:
    28
    Et voilà. ;)

    Problème résolu.

    Celà venait probablement du fait que j'avais omis de faire des url_decode des _get.

    Scripts sur le site, çà marche en mettant le imagedestroy() après le ob_get_contents().

    Testez le site. ;)

    https://www.pronostics-courses.fr

    J'obtiens 100% partout sur Lighthouse, sauf le problème du CSP 93%.

    Merci beaucoup de votre aide.
     
  14. passion
    passion WRInaute accro
    Inscrit:
    6 Janvier 2006
    Messages:
    3 952
    J'aime reçus:
    183
    AH non, je n'ai pas la même chose dsl :(
    [​IMG]
     
  15. passion
    passion WRInaute accro
    Inscrit:
    6 Janvier 2006
    Messages:
    3 952
    J'aime reçus:
    183
    Bon... j'avais envie de faire mon fifou :)

    Mon image, c'est un montage, c'est du fake !
    Allez relâche la pression, ton test lighthouse avoisine les + 95 !

    Bravo ;)
     
  16. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 485
    J'aime reçus:
    28
    Bonjour passion

    Je fais comme Gaston :

    Pfffouu... ;)

    Et mon action manuelle y est toujours.

    Après deux demandes infructueuses.

    J'ai quand même ~ 1k vu / jour.

    ?

    Merci beaucoup de ton aide. ;)

    Amicalement.
     
  17. cthierry
    cthierry WRInaute passionné
    Inscrit:
    15 Janvier 2005
    Messages:
    2 340
    J'aime reçus:
    71
    Après l'optimisation... place au contenu !
     
Chargement...
Similar Threads - accélérer chargement image Forum Date
Conseils pour accélérer le temps de chargement - html +JS Demandes d'avis et de conseils sur vos sites 14 Octobre 2011
Comment accélérer la désindexation de pages en noindex Crawl et indexation Google, sitemaps 17 Novembre 2019
Accélérer l'indexation et le nombre de pages indexées par google Référencement Google 2 Octobre 2014
accelerer virtualpc le truc qui tue Débuter en référencement 31 Janvier 2013
Comment accélérer le passage de robot Google dans mon site? Débuter en référencement 23 Mai 2012
Votre avis sur Cloudflare (accélérer la vitesse de son site) Référencement international (langues, pays) 17 Octobre 2011
Accélérer positionnement de mon site Problèmes de référencement spécifiques à vos sites 21 Juillet 2011
Comment accélérer son wordpress sur un VPS ? Administration d'un site Web 4 Mars 2011
Temps de chargement, diminuer le travail du main thread Développement d'un site Web ou d'une appli mobile 1 Juin 2021
Temps de chargement - Une image full width peut-elle peser moins de 100ko ? Développement d'un site Web ou d'une appli mobile 1 Juin 2021