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

[flexi2202]

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.

 

[pomination]

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

 

[flexi2202]

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}

 

[pomination]

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

 

[flexi2202]

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

 

[pomination]

Mais... est-ce réellement un problème ?
Car le score Insights me semble très bon de toute façon, non ?

 

[flexi2202]

en terme de performance des fois cela n'est plus qu 'a 79%

 

[pomination]

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 !)

 

[rick38]

Ce n'est pas une question de cache, un fichier CSS est toujours bloquant le temps de son chargement.

 

[flexi2202]

Merci pour les reponses , mais donc comment regler ce soucis qui ne se produit que sur mobile

 

[flexi2202]

De plus ce sont des fichiers qui sont mis en cache par litle speed

 

[pomination]

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.

 

[eldk]

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

 

[flexi2202]

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

<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

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

 

[flexi2202]

j'ai essaye avec ce code entre autre , mais rien n'y fait

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');

 

[flexi2202]

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

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

 

[pomination]

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 ?

 

[flexi2202]

Oui ,il faudrait reduire la taille de l'image , mais cela c'est wordpress et le theme qui le gere

 

[flexi2202]

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

 

[pomination]

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.

 

[flexi2202]

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.

 

[pomination]

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)

 

[flexi2202]

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

 

[pomination]

Ca je ne peux pas le garantir.
A suivre, mais globalement, rien ne semble dramatique

 

[Valentin]

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.

 

[flexi2202]

Bonjour,
Merci de la réponse.
Désolé du retard de ma réponse, mais je viens de m'apercevoir que la réponse était tombée dans les spams.
J'ai donc plusieurs remarques.
La première est que j'ai déjà essayé de minimiser et de combiner les fichiers CSS, mais cela ne change rien. En fait, c'est le fichier généré par Little Speed Cache qui pose problème. Je pense qu'il faudrait que je puisse voir le fichier qui pose problème lorsque Little Speed Cache combine et minifie les codes.
Par contre, pour le LCP, j'ai tout essayé, mais en vain. J'ai même essayé d'aller trifouiller dans le plugin de WordPress pour optimiser cette première image car elle fait partie d'un widget.
Mes images sont mises en lazy-loading.
J'ai bien entendu contacté Little Speed Cache, mais après avoir tenté une multitude de leurs solutions, le problème est toujours présent.

 

[pomination]

Pour les CSS, il faut distinguer la minification et la combinaison :
- La minification, enlève les caractères inutiles, espaces, commentaires, etc. mais conserver les fichiers unitaires. Bien qu'ils soient renommés dans le cache, en cliquant sur le lien on voit le contenu du css et on peut en déduire à quoi il est rattaché.
- La combinaison, regroupe tous les fichiers en un seul. Ca pouvait être utile avec le http/1.1, mais devient quasiment inutile avec http/2. Qui plus est cela peut générer des effets de bords.

C'est le même principe pour les JS, mais la combinaison est encore pire avec les JS avec un gros risque d'effets de bord.

Pour le LCP, l'image me semble être un faux problème. Ce sont bien des images présentes dans les médias que consomme le widget. Les images sont en dessous de 100ko, don c'est ok.

Par contre les polices de caractères prennent pas mal de temps. Elles ne sont pas dans le cache Litespeed et semblent venir de CLoudflare ou plus exactement, il y a peut être Cloudflare paramétré comme CDN dans le plugin Litespeed. Certainement un choix de Hostinger.

 

[flexi2202]

Bonjour,
Merci pour les réponses et les compléments d'informations.
Oui, en effet, lorsque l'on clique sur le fichier en question, on voit bien que c'est un seul fichier qui rassemble les autres.
Je viens seulement de remarquer que dans mon fichier .htaccess, que j'avais en fait inscrit au tout début de la naissance de mon WordPress alors que je n'y connaissais rien, ces lignes.

<ifModule mod_headers.c>
    <filesMatch "\.(ico|jpe?g|png|gif|swf)$">
        Header set Cache-Control "public"
    </filesMatch>
    <filesMatch "\.(css)$">
        Header set Cache-Control "public"
    </filesMatch>
    <filesMatch "\.(js)$">
        Header set Cache-Control "private"
    </filesMatch>
    <filesMatch "\.(x?html?|php)$">
        Header set Cache-Control "private, must-revalidate"
    </filesMatch>
</ifModule>

Et je me demande si cela n'a pas joué un rôle néfaste.
Pour ce qui est des polices, lorsque je les désactive, Google me signale des erreurs.

 

[pomination]

Les directives de cache présentes dans le .htacces indique les fichiers js/php/html ne peuvent être mis en cache que dans le navigateur du client et non dans un cache de type CDN.
Pour les polices, il ne faut pas les désactiver, il faut juste comprendre qu'elles ont un impact sur le temps de téléchargement, mais rien de rhédibitoire
Le CSS est donc combiné, pour ça qu'il n'y a qu'un seul fichier

 

[flexi2202]

Merci pour les explications
je viens de comprendre ce qui se passe
enfin je crois
je n'ai pas de cache pour l'objet