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

WRInaute accro
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.
 
WRInaute accro
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.
 
WRInaute impliqué
À 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.
 
WRInaute accro
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é
 
WRInaute accro
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.
 
WRInaute accro
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";

?>
 
WRInaute accro
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"
 
WRInaute passionné
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.
 
WRInaute accro
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.
 
WRInaute accro
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.
 
WRInaute accro
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 ;)
 
WRInaute accro
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.
 
Discussions similaires
Haut