Problèmes de performances avec le cache et le rendu sur mon site Web

WRInaute discret
Bonjour,
Je rencontre deux petits soucis avec mon site lorsque je le teste avec Google PageSpeed Insights.

Pour améliorer le cache, j'utilise Litespeed Cache et je suis hébergé chez Hostinger.

Cela fait des semaines que j'essaie de trouver une solution, en testant différents paramètres dans Litespeed Cache, mais il me reste toujours un problème : "Éliminez les ressources qui bloquent le rendu".

Ensuite, un autre problème concerne "Largest Contentful Paint" avec un temps de 3 230 ms, identifié comme une image.
 

Fichiers joints

  • ecran3.jpg
    ecran3.jpg
    412.8 KB · Affichages: 9
WRInaute discret
Bonjour,
Plusieurs choses :
- Est-ce que le cache objet est actif ?
- Avoir un cache ne garantit pas que la page est en cache au moment où le robot la visite. il peut se produire différents évènements qui purgent le cache. Pour le savoir faire un test de l'URL avec https://httpstatus.io. Et chercher dans les header si le cache renvoie "HIT. S'il est à "MISS" c'est que la page n'est pas en cache. (exemple en image)
- Le LCP ce n'est pas tant un problème de cache que de poids de l'image. Là il vaut mieux optimiser la compression de l'image pour qu'elle reste de qualité mais qu'elle pèse le moins possible (idéalement en dessous de 100ko). Le site https://compress-or-die.com/ est très pratique pour ça.
NB : PHP 7.4, ce n'est pas le plus performant. A voir si l'hébergeur donne la possibilité de passer sur du 8.1/8.2, versions supportées par les versions récentes de WordPress

1705744735028.png
 
WRInaute discret
Bonjour,

Merci pour la réponse et les liens.

Lorsque je scanne l'URL, je constate que je suis bien en "hit".

Je viens donc de compresser les images, mais cela n'a pas changé grand-chose. J'ai toujours le message d'erreur.

J'ai essayé de passer en PHP 8 ou supérieur, mais cela fait planter mon site.

J'ai donc désactivé les plugins et changé de thème, mais mon site continue de planter.

Voici une liste des messages d'erreur que je reçois dans le log.

J'ai un peu de mal à comprendre pourquoi le site continue de planter même lorsque les plugins sont désactivés.

[20-Jan-2024 13:23:05 UTC] Erreur d’événement de replanification de tâche pour le crochet action_scheduler_run_queue. Code d’erreur : invalid_schedule. Message d’erreur : L’évènement planifié n’existe pas.. Données : {"schedule":"every_minute","args":["WP Cron"],"interval":60}
[20-Jan-2024 13:23:05 UTC] Erreur d’événement de replanification de tâche pour le crochet litespeed_task_imgoptm_pull. Code d’erreur : invalid_schedule. Message d’erreur : L’évènement planifié n’existe pas.. Données : {"schedule":"litespeed_filter","args":[],"interval":60}
[20-Jan-2024 13:23:05 UTC] Erreur d’événement de replanification de tâche pour le crochet litespeed_task_ccss. Code d’erreur : invalid_schedule. Message d’erreur : L’évènement planifié n’existe pas.. Données : {"schedule":"litespeed_filter","args":[],"interval":60}
[20-Jan-2024 13:23:05 UTC] Erreur d’événement de replanification de tâche pour le crochet litespeed_task_ucss. Code d’erreur : invalid_schedule. Message d’erreur : L’évènement planifié n’existe pas.. Données : {"schedule":"litespeed_filter","args":[],"interval":60}
[20-Jan-2024 13:23:05 UTC] Erreur d’événement de replanification de tâche pour le crochet litespeed_task_vpi. Code d’erreur : invalid_schedule. Message d’erreur : L’évènement planifié n’existe pas.. Données : {"schedule":"litespeed_filter","args":[],"interval":60}
[20-Jan-2024 13:23:05 UTC] Erreur d’événement de replanification de tâche pour le crochet litespeed_task_lqip. Code d’erreur : invalid_schedule. Message d’erreur : L’évènement planifié n’existe pas.. Données : {"schedule":"litespeed_filter","args":[],"interval":60}
[20-Jan-2024 13:23:05 UTC] Erreur d’événement de replanification de tâche pour le crochet litespeed_task_avatar. Code d’erreur : invalid_schedule. Message d’erreur : L’évènement planifié n’existe pas.. Données : {"schedule":"litespeed_filter","args":[],"interval":60}
[20-Jan-2024 13:23:05 UTC] Erreur d’événement de replanification de tâche pour le crochet litespeed_task_imgoptm_req. Code d’erreur : invalid_schedule. Message d’erreur : L’évènement planifié n’existe pas.. Données : {"schedule":"litespeed_filter","args":[],"interval":60}
[20-Jan-2024 13:32:10 UTC] Erreur d’événement de replanification de tâche pour le crochet action_scheduler_run_queue. Code d’erreur : invalid_schedule. Message d’erreur : L’évènement planifié n’existe pas.. Données : {"schedule":"every_minute","args":["WP Cron"],"interval":60}
 
WRInaute discret
Purgez intégralement le cache.
WP est à jour ?
Au pire revenir à PHP 7.4, il ne faut pas traiter tous les problèmes en même temps :)
 
WRInaute discret
merci pour l'aide
oui le cache est a chaque fois purger plusieurs fois
je suis revenu a php 7.4 pour l'instant
mais du côté de google insight cela est resté pareil
 
WRInaute discret
OK, donc ça, ça doit la variabilité du cache, mais qui est normale :
- Le cache objet étant un cache en mémoire, il n'est pas conservé longtemps et peut être écrasé sur un hébergement mutualisé
- Le cache LiteSpeed est aussi purgé en case de modification/mises à jour de contenus, de plugins, de versions de WP, etc.

Bref il n'est pas constant et c'est normal (et heureux !)
 
WRInaute passionné
Ce n'est pas une question de cache, un fichier CSS est toujours bloquant le temps de son chargement.
 
WRInaute discret
Il faut comprendre la différence de la mesure entre mobile et desktop.
La mesure mobile prend en compte des critères spécifiques à ce type de matériel :
- Puissance plus ou moins élevée de processeur selon le modèle et l'âge
- idem pour la mémoire
- Qualité du réseau dès lors qu'il s'agit d'une connexion de type 5g/4g/3g. Débits variables, qualité du réseau incertaine etc..

Du fait de ces critères, la score Insight est plus "sévère" sur le mobile et propose donc des améliorations qui vont permettre de s'affranchir au maximum des aléas des critères énoncés.

Pas de mystère, pour optimiser ça aux petits oignons, il faut maîtriser techniquement ce qui est mis en oeuvre sur le site :
- Code HTML
- Code CSS
- Code JavaScript

Dès lors qu'on utilise un thème WP, on devient tributaire de la qualité de dév de ce thème et des optimisations qu'auront bien voulu apporter les développeurs.
Ou alors il faut faire un thème enfant et mettre les mains dans le cambouis.

Au regard du score obtenu en mode optimal (cache actif) sur votre site, l'effort ne me semble pas nécessaire.
 
WRInaute discret
Bonjour,

Va voir dans la search console : "Core web Vitals" : ceux sont des données issues de mesures réelles effectuées sur tes visiteurs : https://support.google.com/webmasters/answer/9205520?hl=fr#about_data .

Sur le fichier joint que tu donnes, l'image se charge en moyenne entre 150 et 500 ms en téléchargement direct : https://pecheperle.be/wp-content/uploads/2024/01/perle3020-480.webp.

Il faut voir le contexte. Essaies de ne pas utiliser le lazy-loaded pour celle-ci si c'est possible : et vois ... Si elle est en haut de page et qu'elle se charge à la fin, elle bloque le rendu. ...peut-être parceque chargée par un javascript declenché sur un windows.onload ....

Cordialement,

Eric
 
WRInaute discret
Bonjour
Merci pour la reponse
Mais il est vrai que cette image se charge en haut de la page

Sauf erreur de ma part je ne pense pas qu'elle soit chargee par du javascript , mais bon avec wordpress on ne sait jamais ce qui se passe

cette image est dans un widjet dans lequel je suis allé mettre mes mains dedans pour justement la mettre a ma sauce pour eviter le probleme des performance
voici le code que j'ai ecris
Code:
<picture>
  <!-- Pour les petits smartphones en mode portrait (jusqu'à 300px de large) -->
  <source media="(max-width: 300px)" srcset="https://pecheperle.be/wp-content/uploads/2024/01/perle-verre-peche-3020-300x225.webp">
  <!-- Pour les petits smartphones en mode paysage et les smartphones en mode portrait (jusqu'à 768px de large) -->
  <source media="(max-width: 480px)" srcset="https://pecheperle.be/wp-content/uploads/2024/01/perle3020-480.webp" >
<source media="(max-width: 480px)" srcset="https://pecheperle.be/wp-content/uploads/2024/01/perle3020-480.webp" class="img-fluid"  style="display: block; margin-left: auto; margin-right: auto; max-width: 100%;" width="768" height="576">
  <!-- Pour les smartphones en mode paysage et les tablettes en mode portrait (jusqu'à 1024px de large) -->
  <source media="(max-width: 768px)" srcset="https://pecheperle.be/wp-content/uploads/2024/01/perle-verre-peche-3020-768x576.webp">
  <!-- Image par défaut pour les autres cas (tablettes en mode paysage et plus grands) -->
  <img src="https://pecheperle.be/wp-content/uploads/2024/01/perle-verre-peche-3020-1024x768.jpg" class="img-fluid" alt="baniere pour la pêche à la perle" style="display: block; margin-left: auto; margin-right: auto; max-width: 100%;" width="1024" height="768" >
</picture>
 <?php

voici le code qui est genere lors du chargement de la page avec ce fameux data-lazyloaded="1" peut etre qu'un code en javascript pourrait contrecarer cela

Code:
<img data-lazyloaded="1" src="https://pecheperle.be/wp-content/uploads/2024/01/perle3020-480.webp" data-src="https://pecheperle.be/wp-content/uploads/2024/01/perle-verre-peche-3020-10…" class="img-fluid entered litespeed-loaded" alt="baniere pour la pêche à la perle" style="display: block; margin-left: auto; margin-right: auto; max-width: 100%;" width="1024" height="768" data-ll-status="loaded">

On voit bien que de nouveau entered litespeed-loaded et un code ajouter data-lazyloaded="1"
 
WRInaute discret
j'ai essaye avec ce code entre autre , mais rien n'y fait


Code:
function disable_lazyload_on_homepage($content) {
    // Vérifie si nous sommes sur la page d'accueil
    if (is_home() || is_front_page()) {
        // Désactive le LazyLoad en supprimant l'attribut data-lazyloaded
        $content = preg_replace('/data-lazyloaded="1"/', '', $content);
    }

    return $content;
}

add_filter('the_content', 'disable_lazyload_on_homepage');
 
WRInaute discret
je viens de voir dans les options de litle speed cache une option pour exlure les images
j'essaye de la onfigurer
cela a fonctionne mais cela ne change rien

voici le code genere
Code:
<img width="392" height="272" src="https://pecheperle.be/wp-content/uploads/2021/11/superperle-392x272.webp" class="attachment-colormag-highlighted-post size-colormag-highlighted-post wp-post-image" alt="perles verre facettes pour la pêche" title="Mes perles en verre avec facettes aussi" decoding="async" srcset="https://pecheperle.be/wp-content/uploads/2021/11/superperle-392x272.webp 392w, https://pecheperle.be/wp-content/uploads/2021/11/superperle-300x208.webp 300w, https://pecheperle.be/wp-content/uploads/2021/11/superperle-130x90.webp 130w, https://pecheperle.be/wp-content/uploads/2021/11/superperle.webp 552w" sizes="(max-width: 392px) 100vw, 392px">
 
WRInaute discret
Si ça change bien. L'attribut lazy-loaded a été supprimé, dès lors l'affichage de l'image n'est pas différé.
En soi, ça ne vas pas améliorer le temps de chargement de l'image puisque sa taille reste identique.
Eventuellement, cela va réduire le temps d'attente.

J'ai testé le site sur smartphone, ça m'a semblé très rapide. Donc au final quel est le problème ?
 
WRInaute discret
le probleme que je rencontre concerne litle speed cache
car c'est le fichier genere qui prduit cette erreur
Éliminez les ressources qui bloquent le rendu et cette erreur
Réduisez les ressources CSS inutilisées
 
WRInaute discret
Comme l'a dit Rick38, il n'y pas de solution simple sauf à optimiser à fond les fichiers CSS pour chaque page !
Là le cache est paramétré pour regrouper tous les fichiers CSS et les minifier (supprimer les commentaires, les blancs, etc.)
En désactivant ça, le navigateur devra récupérer, un par un, tous les fichiers CSS nécessaires au rendu de la page.
Mais dans tous les cas, il 'est pas certain que 100% du code des fichiers CSS soit nécessaire pour afficher la page. Et c'est là qu'il faudrait optimiser (c'est en substance ce que propose LiteSpeed avec l'UCSS mais les résultat peut rapidement devenir chaotique et nécessite beaucoup de temps à optimiser)

Statistiquement, dans l'outil Insights ça renvoie un mauvais score, mais est-ce qu'au final cela est vraiment pénalisant à l'usage sur un smartphone ou une tablette ? Est-ce que le site mets des secondes et des secondes à s'afficher ? Probablement non.
 
WRInaute discret
Merci pour la réponse et les explications, c'est vraiment gentil.

Non, en effet, cela ne provoque aucun ralentissement du point de vue du chargement. Je m'inquiétais simplement d'être pénalisé par Google.
 
WRInaute discret
Pour les sites qui ont beaucoup de trafic, Insights renvoie la valeur réelle des insights vs ceux calculés en "labo". Bien souvent, les réels sont meilleurs que les "labo". Dis autrement, les "labo" sont sacrément exigeants. Mais ils permettent de répondre au cas de figure d'un vieux smartphone avec une connectivité médiocre (car il y en a, c'est certain). Donc il faut bien chercher à optimiser tant qu'on peut, mais il faut aussi tester en réel (donc pas le smartphone en wifi mais sur une connexion 3g/4g)
 
WRInaute discret
Merci pour l'aide
donc cela ne sera pas sanctionné par google pour le classement ??
bien que je sois dans les premiers lors de la recherche
 
Nouveau WRInaute
Bonjour,
Je rencontre deux petits soucis avec mon site lorsque je le teste avec Google PageSpeed Insights.

Pour améliorer le cache, j'utilise Litespeed Cache et je suis hébergé chez Hostinger.

Cela fait des semaines que j'essaie de trouver une solution, en testant différents paramètres dans Litespeed Cache, mais il me reste toujours un problème : "Éliminez les ressources qui bloquent le rendu".

Ensuite, un autre problème concerne "Largest Contentful Paint" avec un temps de 3 230 ms, identifié comme une image.

Bonjour,

Certaines ressources de votre site web entravent le chargement initial de la page. Pour résoudre cela, vous pouvez :
Activer l'option "Minifier et combiner les fichiers CSS et JavaScript" dans Litespeed Cache, définir des délais d'expiration pour les ressources statiques, utiliser des sprites CSS pour réduire les requêtes HTTP et retarder le chargement des scripts non essentiels.

Pour améliorer le LCP de 3 230 ms, qui est assez élevé :
Optimiser la taille de l'image en question et utiliser un format d'image plus performant comme le WebP. En outre, retarder le chargement de l'image jusqu'à ce qu'elle soit nécessaire.
Mettre en place le chargement différé (lazy-loading) pour les images.

Envisagez d'utiliser la version Pro de Litespeed Cache pour des options de configuration plus avancées et consultez la documentation de Litespeed Cache et Hostinger pour des instructions détaillées. Utilisez également d'autres outils de test de performance web pour obtenir des informations complémentaires.
 
Dernière édition par un modérateur:
Discussions similaires
Haut