Les Mise à jour de l’expérience de la page arrive, et si vous lisez ceci, vous vous efforcez probablement soit de résoudre les problèmes que vous avez ignorés, soit de rechercher des moyens d’améliorer le travail que vous avez effectué.
La plupart des membres de l’industrie sont conscients que cela commencera assez léger, devenant plus influent au fil du temps.
John Mueller de Google l’a comparé à la cuisine. Ils commencent avec juste une pincée de sel et s’adapteront lentement pour bien faire les choses.
Je vois cette mise à jour un peu comme la Mise à jour HTTPS. Le jour où il a été lancé, il n’a pas semblé avoir un impact écrasant. Mais combien de sites HTTP voyez-vous classés aujourd’hui ?
Maintenant, vous pourriez argumenter à juste titre, qu’il peut s’agir d’une corrélation et non d’une causalité. Après tout, passer au HTTPS est facile et tous les nouveaux sites le font à peu près, et il se peut que les sites HTTP n’aient pas été pénalisés parmi les premières places.
Néanmoins, si vous avez un site non sécurisé, vous êtes maintenant confronté à une mer de sites avec un avantage sur vous. C’est peut-être un petit avantage, mais tout le monde l’a.
Publicité
Continuer la lecture ci-dessous
Je ne sais pas pour vous mais si je fais une course, je veux de belles chaussures.
Ils ne me donneront peut-être qu’un coup de pouce de 5 secondes sur 5K, mais ces 5 secondes – dans notre contexte ici – pourraient faire la différence entre une position cliquée et une position non cliquée.
Alors, considérez ce qui suit comme quelques astuces rapides et faciles.
Core Web Vitals Hack 1 : Cloud Flare
Celui-ci n’est pas exclusif à WordPress.
Mon propre site ne reçoit pas l’amour qu’il mérite en ce qui concerne les mises à jour. « Le cordonnier n’a pas de chaussures », disent-ils. En tant que tel, il s’en sort assez mal sur le Éléments essentiels du Web de face.
Beaucoup ne le savent peut-être pas, mais Cloud Flare offre un service gratuit qui inclut beaucoup d’améliorations de vitesse.
Pour vous donner une idée, avant de me lancer dans la voie de Band-Aid des hacks Core Web Vital et Page Experience pour mon site, notre vitesse était de :
<img src="https://cdn.searchenginejournal.com/wp-content/uploads/2021/06/bsi-pagespeed-pre-move-sm-60bbfc03e247c.jpg" alt="PageSpeed Insights sur le site Web de Beanstalk." />
Après avoir lancé le forfait gratuit de Cloud Flare et activé le optimisation de la vitesse composants, on frappe :
<img src="https://cdn.searchenginejournal.com/wp-content/uploads/2021/06/bsi-pagespeed-after-move-sm-60bbfbfda1ec0.jpg" alt="PageSpeed Insights sur le site Web de Beanstalk avec la version gratuite de Cloud Flare." />
D’énormes différences là-bas, comme vous pouvez le voir. Et le tout à partir d’environ 20 minutes de travail, y compris la configuration du compte.
Publicité
Continuer la lecture ci-dessous
Après la mise à niveau vers Pro (20 $/mois) et la modification de tous les paramètres sauf un (voir ci-dessous), nous avons obtenu :
<img src="https://cdn.searchenginejournal.com/wp-content/uploads/2021/06/bsi-pagespeed-after-move-upgrade-sm-60bbfc00b294c.jpg" alt="PageSpeed Insights sur le site Web de Beanstalk avec la version pro de Cloud Flare." />
Hum… 11 points pour 20 $. Pas mal.
Les paramètres que j’ai activés étaient :
- Optimisation de l’image polonaise.
- Mirage.
Et parce que mon site est en WordPress, nous avons la possibilité de :
<img src="https://cdn.searchenginejournal.com/wp-content/uploads/2021/06/bsi-pagespeed-after-move-upgrade-enable-sm-60bbfbff48638.jpg" alt="Activez l'optimisation automatique de la plate-forme sur Cloud Flare." />
J’ai donc installé le plugin et appliqué les paramètres recommandés.
Le résultat?
<img src="https://cdn.searchenginejournal.com/wp-content/uploads/2021/06/bsi-pagespeed-after-move-wp-sm-60bbfc024e9dc.jpg" alt="Optimisation automatique de Cloud Flare." />
Vous remarquerez quelque chose de drôle ici. Le FCP et l’indice de vitesse se sont tous deux améliorés, mais le LCP a été décimé.
C’est après plusieurs vérifications, et certaines ont abouti à 62 – mais quand même.
J’ai donc testé quelques-uns des paramètres, aucun d’entre eux n’a amélioré les choses, et j’ai donc désactivé le plugin WordPress et nous étions de retour dans les années 70.
La leçon?
Tout ne fonctionne pas.
Testez toujours.
Fait intéressant, la vitesse réelle du plugin s’est améliorée. Ce n’est pas le sujet ici mais il fallait le noter.
Ensuite…
Core Web Vitals Hack 2: Colibri
Non, je ne parle pas du 2013 Algorithme Google, mais plutôt le Plugin WordPress.
Évidemment, cette section ne concerne que ceux qui utilisent WordPress.
J’ai testé un tas de plugins de vitesse et de mise en cache différents, et chacun semble mieux fonctionner que d’autres dans divers scénarios. Mais le plus cohérent, si vous avez un bon fournisseur d’hébergement, semble être Hummingbird – d’après mon expérience.
J’ajoute l’aspect fournisseur d’hébergement, car d’autres plugins peuvent mieux fonctionner sur des hôtes moins bons, mais dans ce cas, ma principale recommandation serait… d’avoir un meilleur hôte.
Publicité
Continuer la lecture ci-dessous
Pourquoi Colibri ?
Ce que j’aime chez Hummingbird, c’est qu’il ne s’agit pas simplement d’un simple plugin de mise en cache (après tout, nous avons une mise en cache à partir de notre hébergement décent (ou Cloud Flare), n’est-ce pas ?)
Hummingbird a une mise en cache ; Je ne l’utilise tout simplement pas.
J’aime aussi pouvoir connecter Hummingbird à Cloud Flare, pour modifier certains paramètres à distance.
Leur optimisation automatisée, dans les cas où je l’ai essayé, était plutôt mauvaise.
C’est probablement décent si vous ne savez pas ce que vous regardez, mais si vous êtes prêt à passer du temps sur les paramètres, vous ferez mieux manuellement avec une interface comme :
<img src="https://cdn.searchenginejournal.com/wp-content/uploads/2021/06/hummingbird-60bbfc0725d2c.jpg" alt="Plugin WordPress Colibri." />
Vous devrez peut-être jouer un peu pour déterminer les éléments à déplacer en ligne et ceux qui interrompront les fonctions de votre site s’ils ne sont pas traités correctement (je vous regarde jQuery).
Publicité
Continuer la lecture ci-dessous
Il convient de noter qu’aux fins de cet article, j’ai désactivé toutes les fonctions d’accélération et de mise en cache de Cloud Flare lors de la rédaction de cette section. Ainsi, le point de départ est 34 au moment d’écrire ces lignes.
J’ai poussé tous mes CSS et JS dans le pied de page et je l’ai compressé. Ce n’est pas possible pour tout le monde, et de nombreux sites tombent en panne lorsque vous poussez jQuery vers le bas car de nombreux curseurs, etc. nécessitent qu’il se charge avant de le faire.
Il est recommandé de tester plusieurs pages, y compris le produit, le contact, les pages d’accueil et à peu près au moins une page de chaque mise en page/modèle que vous utilisez.
Je dois noter que j’ai testé la combinaison des fichiers, chose avec laquelle je n’ai jamais eu de succès, et les résultats ont été pires.
Au final, nous avons obtenu le score de 34 à :
<img src="https://cdn.searchenginejournal.com/wp-content/uploads/2021/06/hummingbird-score-sm-60bc0070a7fc1.jpg" alt="Score de PageSpeed Insights à l'aide de Hummingbird." />
Amélioration solide.
Publicité
Continuer la lecture ci-dessous
Ma règle de base ici est de l’amener à environ 60 au strict minimum. Cela permet à une erreur ou à une dégradation de se produire sans la faire tomber en dessous des 50 seuils pour devenir « médiocre ».
Et pour couronner le tout…
Core Web Vitals Hack 3: Nettoyage des actifs
Le plugin WordPress Nettoyage des actifs est un autre fournisseur de solutions rapides.
La fonction de base du plugin est de permettre aux propriétaires de sites d’empêcher le chargement des scripts sur des pages ou des ensembles de pages spécifiques. La proposition vient de :
<img src="https://cdn.searchenginejournal.com/wp-content/uploads/2021/06/reduce-javascript-60bbfc089a4e2.jpg" alt="Réduisez JavaScript." />
Les plugins de partage social en sont un excellent exemple. Nous les utilisons sur notre blog, mais ils se chargent sur tout le site.
Publicité
Continuer la lecture ci-dessous
Vous remarquerez qu’il indique qu’ils n’ont pas d’impact direct sur le score de performance. Mettons cela à l’épreuve.
Après avoir désactivé le plugin Hummingbird, nous arrivons avec un score de 35.
Une fois installé et configuré, vous vous retrouverez sur une page qui ressemble à :
<img src="https://cdn.searchenginejournal.com/wp-content/uploads/2021/06/asset-cleanup-60bbfbf8d9516.jpg" alt="Interface Colibri." />
Maintenant, voici où vous pourriez passer du temps et où leur mode de test est pratique.
Certains scripts vous permettront simplement de savoir si vous en avez besoin ou non (un formulaire de contact sur un regroupement de pages, par exemple) mais d’autres que vous ne voudrez peut-être pas tester (avez-vous vraiment besoin de votre plugin slider sur chaque page ?).
Publicité
Continuer la lecture ci-dessous
Si vous êtes en mode de développement ou en mode test, vous souhaiterez peut-être simplement les désactiver tous, puis les activer un par un, en testant les fonctionnalités en cours de route. C’est la voie que j’ai empruntée.
Après environ 20 ou 30 minutes (ce que vous devez faire dans chaque section, bien qu’une fois que vous en avez fait une, elles soient plus rapides), la vitesse était :
<img src="https://cdn.searchenginejournal.com/wp-content/uploads/2021/06/asset-cleanup-after-60bbfbfa75f4b.jpg" alt="Nettoyage des actifs." />
Avec les zones incriminées atteignant:
<img src="https://cdn.searchenginejournal.com/wp-content/uploads/2021/06/asset-cleanup-after-2-60bbfbfc31c85.jpg" alt="Scénarios incriminés." />
Encore une fois, de solides progrès.
Publicité
Continuer la lecture ci-dessous
Mais que se passe-t-il si vous commencez…
Combiner ces 3 astuces
La combinaison ne semble pas bien fonctionner, d’après mon expérience.
Les scores et les timings du monde réel ont empiré lorsque les deux étaient combinés. C’était inattendu, car Cloud Flare et Asset Cleanup auraient dû bien fonctionner ensemble.
Mais…
<img src="https://cdn.searchenginejournal.com/wp-content/uploads/2021/06/combine-methods-60bbfc059500a.jpg" alt="Combinez les optimisations." />
Les résultats peuvent varier, cependant, et si vous testez chacun, je suggérerais de tester diverses combinaisons, et même d’autres plugins si vous avez le temps et l’envie.
Publicité
Continuer la lecture ci-dessous
Dans notre cas, nous allons nous installer sur Cloud Flare.
Et pour les curieux, vous avez peut-être remarqué que les lectures ci-dessus sont pour mobile. Avec Cloud Flare, notre bureau arrive à :
<img src="https://cdn.searchenginejournal.com/wp-content/uploads/2021/06/desktop-60bc04bd16e13.jpg" alt="Vitesse de page de bureau et CWV." />
Et maintenant pour désactiver les choses…
Mais bien sûr, ce n’est pas la fin des tests.
Donc, pour l’instant, j’ai désactivé toutes les optimisations et je les garderai jusqu’en septembre, après le déploiement.
Publicité
Continuer la lecture ci-dessous
Fondamentalement, je veux voir à quel point nous recevons un coup de pied dans les fesses (le cas échéant), puis voir à quelle vitesse nous récupérons.
Je ne vous recommande pas de faire la même chose.
Une fois que nous aurons réglé cela, je réexaminerai et mettrai à jour cette pièce.
Davantage de ressources:
Crédits image
Toutes les captures d’écran prises par l’auteur, juin 2021
— to www.searchenginejournal.com
Jeu de briques
Snake
Pacman
Bubble