28 façons de surcharger votre site

Annoncé début 2020, le Core Web Vitals est un ensemble de mesures que Google développe et prévoit d’intégrer dans son algorithme de recherche global. en mai 2021. Étant donné que nous sommes presque en 2021, quiconque souhaite prendre de l’avance dans l’optimisation de son site pour cette nouvelle mise à jour de l’algorithme peut se mettre au travail dès maintenant. Heureusement, Google n’a pas hésité à divulguer publiquement la nature et le fonctionnement de ces nouvelles mesures.

Grâce à ces informations, il est possible d’établir une liste de points à vérifier et à optimiser sur votre site afin de vous préparer à l’inévitable déploiement de ces nouveaux facteurs de classement. Voici 28 éléments pour cette liste de contrôle.

A. Optimisation de l’image

Les images sont l’un des plus grands facteurs d’influence dans les indicateurs Web de base. Tous les indicateurs mesurent le temps nécessaire à un rendu initial, et le chargement des images est la principale source de retard avant le chargement complet d’une page. Ainsi, l’optimisation des images tend à être l’outil le plus puissant pour améliorer les vitales web de base.

1. Réduire les dimensions des images d’arrière-plan

Les images d’arrière-plan sont rarement totalement nécessaires à la conception d’un site et peuvent être une source importante de retard lors du premier chargement d’une page.

Si vous utilisez une image d’arrière-plan, réduisez la taille de cette image et optimisez-la pour qu’elle se charge aussi instantanément que possible.

2. Minimisez ou remplacez les images de fond par des motifs

Si vous n’êtes pas lié à une image d’arrière-plan spécifique, remplacez l’image par des couleurs plates, un dégradé ou même un simple motif en carreaux. Encore une fois, l’objectif est de minimiser le nombre de ressources à charger avant que le chargement initial du site Web ne soit terminé. Comme les images d’arrière-plan n’ont pas un impact énorme (et sont encore moins nécessaires sur les mobiles), réduisez-les ou supprimez-les autant que possible.

3. Supprimez les images au-dessus du pli sur les mobiles

En parlant de mobile, l’expérience de navigation mobile est souvent plus lente que la navigation de bureau en raison de la qualité des signaux cellulaires et sans fil. Les appareils mobiles sont particulièrement sensibles aux retards lors de la première saisie et du passage au contenu.

Pour éviter cela, efforcez-vous de faire en sorte que la plus grande partie possible de votre contenu au-dessus du pli soit basée sur du texte et d’autres éléments simples. Les grandes images et les diaporamas au-dessus du pli sont particulièrement pénalisants pour votre score, alors supprimez-les ou déplacez-les autant que possible.

4. Mettez en œuvre le chargement paresseux

Le chargement paresseux est une technique courante pour accélérer le chargement initial d’une page donnée. Avec les nouvelles mesures de Google à l’horizon, il n’est pas surprenant que la prise en charge de cette technique devienne rapidement une fonctionnalité par défaut. WordPress, par exemple, a ajouté le chargement paresseux par défaut dans la version 5.5 plus tôt cette année. Utilisez le chargement paresseux pour tout contenu, en particulier les images, qui n’a pas besoin d’être initialement chargé au-dessus du pli.

5. Utilisez des images WebP

Autre initiative de Google, WebP est un nouveau format d’image développé en 2010. Il s’agit d’un format d’image plus petit doté de meilleurs algorithmes de compression que les formats d’image traditionnels tels que PNG.

Bien qu’il ne se soit pas vraiment répandu jusqu’à récemment, il devient de plus en plus précieux, car les utilisateurs et les moteurs de recherche sont de plus en plus préoccupés par la vitesse et les temps de chargement. La prise en charge est généralisée, même si l’utilisation ne l’est pas, de sorte que vous pouvez plus ou moins utiliser les images WebP comme fichiers d’image principaux.

6. Optimiser la taille des fichiers image

L’utilisation d’un outil permettant de réduire la taille des fichiers d’image devrait faire partie intégrante de l’optimisation des images pour le Web.

Si vous ne le faites pas déjà, assurez-vous de mettre en place un moyen de traiter les images dans le cadre de votre flux de travail de blogage à venir. Vous devez également vous assurer que vous avez défini la hauteur et la largeur des images afin d’éviter tout décalage de la mise en page.

B. Optimisation des CSS

Les feuilles de style en cascade (CSS) sont devenues une partie de plus en plus importante de la conception de nombreux sites, à tel point que leur blocage rend le Web presque méconnaissable. Comme une grande partie d’un site dépend de CSS pour tout, des couleurs au positionnement, il est plus important que jamais de s’assurer que votre code est optimisé.

7. Inlinez les CSS critiques

Vous n’avez pas besoin de mettre en ligne chaque partie de votre CSS, bien que cela fonctionne aussi bien. En particulier, vous devez mettre en ligne les feuilles de style en cascade essentielles à la conception et à la mise en page globales de votre thème.

Cela permet de minimiser le nombre de fichiers individuels qu’un navigateur doit appeler depuis votre serveur juste pour charger la mise en page initiale et peindre le contenu initial de votre site.

8. Réduire les CSS

CSS est par défaut un langage très minimaliste et peut parfaitement fonctionner sans espaces, indentations, commentaires et autres textes qui le rendent plus convivial et plus facile à développer. Avant de télécharger un nouveau code sur votre site, passez-le dans un outil pour le réduire et supprimer tous les éléments superflus qui ont un effet microscopique, mais tangible, sur le chargement des pages.

9. Consolidez les fichiers CSS et le code

Il peut être tentant de stocker les CSS dans divers fichiers et de les disperser dans votre code, en les plaçant là où ils semblent devoir être plutôt que là où il est logique de les mettre. N’oubliez pas que ce qui est le plus facile pour un développeur n’est pas nécessairement le plus rapide pour un utilisateur. Consolidez votre CSS, qu’il soit en ligne ou dans des fichiers séparés, et n’exécutez des éléments spécifiques que si nécessaire.

10. Optimisez la diffusion des CSS

Le CSS est souvent un élément du code du site qui se charge tardivement. La conception traditionnelle d’un site charge le cadre du site, puis le contenu, puis le CSS pour mettre tout cela en forme. En particulier lorsque le CSS est stocké dans un fichier externe, cela retarde considérablement le chargement. Le préchargement du code CSS est une stratégie recommandée par Google pour obliger le navigateur à charger le code CSS et à le préparer au moment voulu.

C. Optimisation du JavaScript

JavaScript est l’une des plus grandes sources de gonflement du code et de retard dans le chargement des sites Web. L’optimisation du JavaScript de votre site peut contribuer à l’accélérer considérablement, même si cela ne semble pas avoir beaucoup d’effet compte tenu de ce que vous lui faites.

11. Réduire les scripts JS

Comme CSS, JavaScript n’a pas besoin d’espaces et de coupures superflus pour fonctionner. Il n’a pas non plus besoin de noms de variables verbeux, qui sont utiles pour le développement mais peuvent augmenter la taille des scripts de manière significative.

Passez vos scripts dans un programme de réduction avant de les ajouter à votre site.

12. Consolider les scripts et minimiser leur utilisation

La plupart des objectifs pour lesquels les concepteurs de sites Web utilisent JavaScript sont disponibles sous forme de fonctionnalités dans HTML5 et CSS3 depuis des années maintenant. En particulier dans les sites Web plus anciens, une refonte ou une révision des scripts peut permettre de trouver des moyens alternatifs et plus rapides de faire les mêmes choses. Passez en revue et optimisez, minimisez, consolidez et supprimez autant de JavaScript que possible de votre site.

13. Différez ou asynchronisez les scripts chaque fois que cela est possible.

Les scripts sont des barrages routiers dans le rendu d’un site web. Lorsqu’un navigateur doit rendre un script JS, il doit traiter ce script avant de pouvoir continuer à charger la page. Comme de nombreux développeurs placent les scripts dans leurs en-têtes, cela retarde considérablement le chargement de la page. L’utilisation de Defer permet au navigateur de continuer à charger la page avant d’exécuter le script, tandis qu’Async permet de les charger simultanément. L’utilisation de ces deux fonctionnalités vous permet de compenser le retard inhérent à l’utilisation de scripts et d’accélérer le chargement initial de vos pages.

14. Supprimer jQuery Migrate

Une récente mise à jour de jQuery a conduit à ce que de nombreux anciens plugins et scripts ne fonctionnent plus. Pour gagner du temps et permettre aux webmasters de mettre à jour leurs sites, le module Migrate a été introduit. Il s’agit essentiellement d’un module de traduction qui permet aux anciens jQuery de fonctionner sur les sites qui utilisent une version plus récente de jQuery.

Effectuez un audit de votre site pour voir si quelque chose que vous utilisez – en particulier les anciens plugins et applications – utilise jQuery Migrate. Si c’est le cas, envisagez de mettre à jour ou de remplacer ces plugins. Votre objectif est de supprimer complètement l’utilisation du module Migrate, car il est plutôt encombrant et peut ralentir considérablement les sites Web.

15. Utilisez Google Hosted JS autant que possible

Google propose toute une série de bibliothèques standard hébergées sur ses serveurs, que vous pouvez utiliser sur votre site Web. Plutôt que de dépendre d’un tiers pour ces bibliothèques ou de les héberger vous-même, utilisez les versions de Google pour obtenir les meilleurs temps de chargement possibles.

D. Optimisation des vidéos

Les vidéos sont de plus en plus populaires sur les sites Web moyens, qu’il s’agisse d’éléments centraux du contenu, de publicités vidéo ou de tout autre élément intermédiaire. Ce sont également des fichiers extrêmement volumineux, même avec le chargement partiel et la mise en mémoire tampon des vidéos modernes. Optimisez votre utilisation de la vidéo autant que possible.

16. Utilisez des espaces réservés aux images pour les vignettes vidéo

Il y a beaucoup d’utilisateurs qui naviguent sur le Web sans avoir envie de regarder des vidéos. Il est donc tout à fait inutile de forcer les vidéos à se charger en arrière-plan pour eux. Une bonne solution consiste à utiliser un espace réservé à l’image là où la vidéo devrait normalement se charger.

L’image se charge plus rapidement et ressemble au lecteur vidéo avec une vignette chargée. Lorsqu’un utilisateur clique dessus pour lancer la vidéo, le chargement de la vidéo commence, mais il n’est pas nécessaire de charger le fichier vidéo ou le lecteur avant ce moment.

17. Réduisez les vidéos au-dessus du pli

Comme pour les images, les fichiers vidéo sont extrêmement lourds, donc les charger au-dessus du pli est un retard garanti sur votre première peinture de contenu. Poussez-les en dessous du pli ; la plupart des gens veulent lire un titre et une introduction avant d’arriver à la vidéo de toute façon.

E. Optimisation des polices et des icônes

L’utilisation des polices et des icônes peut être beaucoup plus lourde sur les temps de chargement d’un site que vous ne le pensez. Les optimiser peut sembler être un travail de détail minuscule, mais lorsque vous verrez l’impact que cela peut avoir, vous vous demanderez pourquoi vous n’avez jamais fait ces optimisations mineures, mais qui ont un impact, avant.

18. Précharger les polices

Comme pour les scripts, lorsque votre site Web fait appel à une police qu’il doit charger, le chargement de cette police est prioritaire et empêche le reste du code de s’afficher.

L’utilisation d’une commande de préchargement pour charger la police plus tôt que nécessaire permet d’accélérer le chargement des pages et d’éviter l’effet de « flash de texte non stylisé » qui se produit pendant un bref instant entre le chargement du texte et l’apparition du style de la police.

19. N’utilisez que les polices dont vous avez besoin

De nombreuses polices et familles de polices Web chargent l’intégralité de leurs jeux de caractères et de leurs feuilles de style lorsqu’elles sont appelées, même si votre page n’utilise pas 90 % de ce contenu. Il est souvent possible de limiter la quantité chargée, mais vous devrez peut-être payer un accès premium aux polices. Cela peut s’avérer très utile si vous utilisez des quantités limitées d’une police donnée ou une police qui comprend un jeu de caractères particulièrement important.

20. Utilisez le SVG autant que possible

Les SVG sont des graphiques vectoriels évolutifs et constituent un moyen de créer des éléments extrêmement petits d’une page qui peuvent néanmoins évoluer indéfiniment et être manipulés individuellement, bien plus que les polices et les icônes traditionnelles. Si possible, remplacez vos icônes habituelles par des SVG.

F. Optimisation du serveur

Peu importe le nombre d’optimisations que vous apportez au code de votre site Web, à vos images ou à d’autres éléments de votre site, rien de tout cela ne compte si votre serveur est lent. La prolifération des sociétés d’hébergement Web, le développement continu de technologies de plus en plus rapides et puissantes, tout cela signifie que l’hébergement Web montre son âge très rapidement. Tous les deux ou trois ans, il peut être intéressant de changer ou de mettre à niveau l’hébergement vers une infrastructure plus rapide.

21. Mise à niveau vers un serveur plus rapide

Vous n’avez pas nécessairement besoin de passer d’un hébergement mutualisé à un hébergement dédié, bien que cela puisse aider à résoudre certains des problèmes de vitesse inhérents à l’hébergement mutualisé. Le simple fait de passer d’un pack plus lent à un pack plus rapide peut être une bonne utilisation de votre budget.

22. Utilisez un CDN

Les réseaux modernes de diffusion de contenu peuvent traiter la plupart des éléments de votre site plus rapidement que votre hébergeur typique dans presque toutes les circonstances. Au minimum, envisagez d’utiliser un CDN pour vos images, vidéos et autres éléments multimédias. Vous pouvez également envisager de décharger les fichiers de script autonomes.

23. Précharger les requêtes DNS

Le préchargement des requêtes DNS permet de minimiser le délai entre la demande d’une ressource par le visiteur et l’affichage de cette ressource.

Cela va de pair avec l’utilisation d’un CDN pour stocker les ressources en chargeant et en résolvant le domaine du CDN avant qu’il ne soit appelé pour la première fois, ce qui accélère encore les temps de chargement des pages.

24. Précharger votre cache

Souvent, un plugin ou un script de cache utilisé sur un site Web se déclenche lorsque le premier visiteur arrive pour voir la page. Ce premier visiteur a une expérience plus lente, mais ses charges mettent la page en cache pour les futurs visiteurs jusqu’à ce que le cache expire. Malheureusement, la première visite est souvent celle d’un robot Google qui parcourt votre page à partir de votre plan de site XML ou d’un lien interne, ce qui signifie que Google est le premier à découvrir la version lente de votre site. Vous pouvez contourner ce problème en préchargeant le cache sur votre site Web afin que la prochaine visite de Google soit une page Web garantie à chargement rapide.

25. Envisager un cache côté serveur

Un logiciel tel que Varnish Cache agit comme un cache côté serveur pour accélérer la génération et la diffusion d’une version en cache de votre page, la rendant aussi rapide que possible avec le moins d’appels au serveur possible.

G. Optimisation supplémentaire

Tout ce qui n’entrait pas dans une autre catégorie a été ajouté ici. Ces optimisations supplémentaires ne s’appliquent peut-être pas à la conception de votre site, mais si c’est le cas, le fait d’en prendre soin peut être un avantage considérable.

26. Réduire au minimum les scripts tiers

Les webmasters de 2021 devront trouver un équilibre entre les optimisations de la vitesse du site et les outils d’engagement des utilisateurs.

De nombreux plugins, tels que les boutons de partage social, les systèmes de commentaires tiers et les éléments multimédias, doivent tous exécuter des scripts tiers pour fonctionner, mais ces scripts ralentissent le site. Réduisez-les autant que possible et essayez de trouver les versions les plus rapides de chacun d’entre eux.

27. Évitez le remplissage avant le chargement

Une technique courante pour les sites dont le temps de chargement est lent consiste à ajouter une roue, une icône de chargement, une animation ou une autre forme de contenu qui se charge et s’affiche pour indiquer à l’utilisateur que le site est en train de se charger. Bien que cela puisse aider à minimiser les rebonds, c’est un coup dur pour les chargements initiaux mesurés par les indicateurs web de base. Supprimez ces éléments et travaillez à accélérer votre site de telle sorte que vous n’en ayez plus besoin.

28. Envisager une refonte du site

Au bout du compte, il arrive que vous deviez apporter tellement de changements à tant d’éléments fondamentaux de votre site qu’il est plus facile de mettre à la poubelle votre conception actuelle et d’en concevoir une nouvelle en tenant compte de la vitesse. Envisagez cette possibilité et analysez les avantages que vous tirerez de l’optimisation des éléments vitaux du site. Personne ne sait encore quelle sera l’influence de ces paramètres sur l’algorithme global, mais il ne peut certainement pas y avoir de mal à les optimiser.

James Parsons est le fondateur de Content Powered, une société de gestion de blogs et de marketing de contenu. Il a travaillé comme spécialiste du marketing de contenu de haut niveau pendant plus de dix ans et écrit pour Forbes, Entrepreneur, Inc et Business Insider.