Amélioration du Core Web vitals

[nzokal]

Bonjour,
Dans la Search console de Google, je remarque que des pages indexées sont mises dans la partie "Amélioration nécessaire" du "core web vitals" je voulais savoir comment améliorer pour les rendre verts (bon).
Pour des détails en plus, je crois que ça vient du Largest Contentful Paint (LCP); les images de mises en avant de mes articles. Pourtant j'ai le plugin LScache qui, si je ne me trompe, change mes images en version Webp pour un meilleur chargement. Je crée mes images de mise en avant avec une taille de 1280x720.
Une aimable personne pourrait me dire quel est le problème et comment résoudre svp ?

 

[colonies]

Bonjour,
Ça peut venir d'autre chose que de l'image elle-même. Est-ce que la console te dit que l'image est trop lourde ? Peut-être ne la compresses-tu pas assez (ou même que tu la sauvegardes en mode "sans pertes").
Peut-être que ton serveur est trop lent et que ça n'est qu'une conséquence d'une page qui met trop de temps à arriver.
Peut-être aussi que le navigateur ne peut pas la découvrir assez tôt (par exemple c'est une image de fond CSS, et pire : définie dans une CSS externe).
Auquel cas tu dois aider le navigateur à la découvrir dès le chargement du HTML avec un preload : https://web.dev/articles/preload-responsive-images?hl=fr
Peut-être aussi as-tu trop de choses sur ta page et que l'image principale doit batailler avec trop de ressources, auquel cas tu devrais utiliser loading=lazy sur les images bas dans la page.
Et enfin, tu peux définir la priorité des chargements pour indiquer au navigateur ce qui doit être chargé le plus vite possible : https://web.dev/articles/fetch-priority?hl=fr

 

[nzokal]

Voici le lien du site: https://starlinkpulse.com
Le message que je reçois de la console est :
Problème LCP : dépasse 2,5 s (mobile)
Et ça concerne pratiquement tous les liens de mes articles
Pour la vitesse de page, j'ai des doutes vu que j'utilise le plugin Litespeed Cache et que les tests avec https://pagespeed.web.dev/ sont plutôt positifs
Cependant dans les diagnostics LCP, je remarque que c'est toutes mes images de mise en avant d'article qui sont concernés

 

[Fred]

Voici le lien du site: https://starlinkpulse.com
Le message que je reçois de la console est :
Problème LCP : dépasse 2,5 s (mobile)
Et ça concerne pratiquement tous les liens de mes articles
Pour la vitesse de page, j'ai des doutes vu que j'utilise le plugin Litespeed Cache et que les tests avec https://pagespeed.web.dev/ sont plutôt positifs
Cependant dans les diagnostics LCP, je remarque que c'est toutes mes images de mise en avant d'article qui sont concernés

Tu peux essayer le format avif, ça déchire au niveau de la compression, c'est très supérieur à webp et tu as une couche alpha pour la transparence. Installe GIMP qui le propose en exportation. Ton fichier wepb qui fait 70 Ko, ne pèse plus que 28 ko en avif. Et encore, j'ai utilisé le fichier déjà compressé de ton site.

Les évaluations mobiles c'est impossible d'avoir du 100%, surtout si tu as des images. Ton cache ne peut rien faire pour les images. Une image de 70 Ko, c'est 70Ko à télécharger. Le cache est utile pour site en php car il envoie des pages html préfabriquées au navigateur, ce qui permet d'avoir les pages bien plus rapidement car elles n'ont pas besoin d'être générées de façon dynamique par le serveur apache. En plus, il y a l'optimisation des css et des fichiers javascript. Mais une image compressée, un système de cache ne peut rien optimiser dessus, à part la charger après le texte pour accélérer l'affichage du texte.

 

[colonies]

Voici le lien du site: https://starlinkpulse.com

Le problème est que tu as un plug-in de lazy loading qui s'applique à toutes les images, et qui est visiblement mal fait, combiné à un paquet de polices de caractères.
- Supprime ton plug-in de lazy loading
- Retire les polices non utilisées (=> change l'URL vers la CSS de Google Fonts pour n'inclure que les polices que tu utilises vraiment)

 

[nzokal]

Tu peux essayer le format avif, ça déchire au niveau de la compression, c'est très supérieur à webp et tu as une couche alpha pour la transparence. Installe GIMP qui le propose en exportation. Ton fichier wepb qui fait 70 Ko, ne pèse plus que 28 ko en avif. Et encore, j'ai utilisé le fichier déjà compressé de ton site.

Les évaluations mobiles c'est impossible d'avoir du 100%, surtout si tu as des images. Ton cache ne peut rien faire pour les images. Une image de 70 Ko, c'est 70Ko à télécharger. Le cache est utile pour site en php car il envoie des pages html préfabriquées au navigateur, ce qui permet d'avoir les pages bien plus rapidement car elles n'ont pas besoin d'être générées de façon dynamique par le serveur apache. En plus, il y a l'optimisation des css et des fichiers javascript. Mais une image compressée, un système de cache ne peut rien optimiser dessus, à part la charger après le texte pour accélérer l'affichage du texte.

Dommage que sur Photoshop le format avif n'existe pas. En plus vu que ce n'est pas vraiment un aspect critique du site, je ne pense pas me tourner vers ce format là. J'ai fais quelques modification de Litespeed Cache et je pense que la solution doit s'y trouver

 

[nzokal]

Le problème est que tu as un plug-in de lazy loading qui s'applique à toutes les images, et qui est visiblement mal fait, combiné à un paquet de polices de caractères.
- Supprime ton plug-in de lazy loading
- Retire les polices non utilisées (=> change l'URL vers la CSS de Google Fonts pour n'inclure que les polices que tu utilises vraiment)

• Extensions en place : Rank Math, MC4WP, Litespeed Cache, UpdraftPlus, Akismet, Wordfence, Really Simple SSL

Le seul plugin dans mon site qui pourrait avoir ce paramètre est Litespeed Cache où je n'ai pas trouvé donc j'ai lancé les système de préréglages et j'ai pris "Avancé recommandé". Actuellement dans le test Pagespeed je ne vois pas le problème LCP, je vais un peu patienter pour voir si ça va changer de façon permanente.
Pour les polices, j'avais déjà retiré. Avec le préréglages le paramètre "retirer les polices google" est rentrer sur "inactif"

 

[eldk]

Bonjour,

Pour le LCP sur mobile : https://starlinkpulse.com/renforcement-securite-de-compte-starlink-2sv/

Tu as la colonne droite qui se charge avant le contenu du post (desktop first). Puis qui est envoyée en pied de page, tandis que l'image est chargée et donc le début du contenu du post descendu ... le menu de la colonne droite re-descendu.

C'est donc une question de design.

Tu verras bien la différence en utilisant "LightHouse" dans un navigateur chrome.

Après, il y a peut-être également d'autres "plus petits" soucis ...

Mais c'est là la principale cause pour la valeur LCP sur mobile. En 4 G, j'ai presque 7 secondes. De plus, il semble que ce soit javascript qui gére le positionnement des éléments - ou - qui les modifie.

Il faut chercher de ce côté là.

Cordialement,

Eric

 

[nzokal]

Donc si je veux résoudre mon problème sans trop creuser la tête, il faut changer de thème Wordpress.
Dans les paramètres Litespeed cache j'ai le JS qui est réglé en mode différé , peut-il améliorer si je le met inactif ?

 

[eldk]

Bonjour,

Je ne sais pas ce que tu as changé, en dehors de l'image d'illustration du post qui est en webp, mais c'est déjà mieux - x 1/2 = 3.5 s sur plusieurs essais - toujours pour mobile . On ne voit plus non plus le déplacement des blocs, et le LCP n'est plus attribué au texte sous cette image, mais, à l'image elle même.

C'est un theme DIVI ?

Si c'est le cas, tu peux peut être essayer cela : https://www.elegantthemes.com/blog/wordpress/lazy-loading . En faisant attention entre les éventuels conflits avec ton plugin de cache. Ne pas différer le chargement de cette 1ere image, mais laisser les suivantes être différées.

Trouver la bonne combinaison peut prendre du temps.

Cordialement,

Eric

 

[nzokal]

Bonjour,
Quelques petits changements dans le plugin LS Cache au niveau de l'optimisation des pages
J'ai désactivé les options comme "chargement différé des images" "combiner le CSS" "combiner le JS"
Je vais activer un à un par la suite pour voir l'évolution.
Oui c'est bien le thème Divi que j'utilise. Il vient également avec des options d'optimisations mais j'ai tout désactivé pour ne pas avoir de conflit avec le plugin