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

ortolojf · 4 Septembre 2021

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.

ortolojf · 5 Septembre 2021

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.

rick38 · 5 Septembre 2021

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.

ortolojf a dit:
Ce sont des images type *.png, pas de possibilité de compression.

Si, quand même un peu, par exemple avec OptiPNG : http://optipng.sourceforge.net/

Furtif · 5 Septembre 2021

ortolojf a dit:
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.

Si c'est la performance que tu cherches, passe par le "lazy loading" pour tes images

https://developers.google.com/search/docs/advanced/javascript/lazy-loading?hl=fr
https://web.dev/browser-level-image-lazy-loading/

emualliug · 5 Septembre 2021

À 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.

passion · 5 Septembre 2021

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é

rick38 · 5 Septembre 2021

Moi je ne vois pas d'image sur son site donc difficile de savoir de quel genre d'image il parle

ortolojf · 6 Septembre 2021

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.

ortolojf · 6 Septembre 2021

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";

?>

ortolojf · 7 Septembre 2021

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"

rick38 · 7 Septembre 2021

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.

ortolojf · 7 Septembre 2021

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.

ortolojf · 7 Septembre 2021

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.

passion · 8 Septembre 2021

AH non, je n'ai pas la même chose dsl

passion · 8 Septembre 2021

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

ortolojf · 8 Septembre 2021

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.

cthierry · 9 Septembre 2021

Après l'optimisation... place au contenu !