- Combien de temps les visiteurs restent-ils sur votre site ?
- Combien d'entre eux se transforment en clients payants ?
- Le montant que vous payez en CPC (coût par clic) pour la recherche payante.
- Votre position dans les résultats de recherche organique.
Malheureusement, la plupart des sites web sont peu performants en matière de vitesse de chargement des pages, ce qui a un impact négatif direct sur leurs revenus.
En tant que spécialistes du marketing numérique, les possibilités sont quasi infinies, et le temps manque toujours pour tout faire. Par conséquent, certaines tâches sont reléguées au second plan.
L'optimisation de la vitesse de chargement des pages est souvent reléguée au second plan. Cela se comprend aisément : la plupart des gens ne saisissent pas l'importance de ce détail souvent négligé et ne voient donc pas l'intérêt d'investir du temps et de l'argent pour gagner quelques secondes.
Ce qui peut sembler un laps de temps insignifiant pour certains spécialistes du marketing, y compris ceux qui se concentrent uniquement sur l'optimisation pour les moteurs de recherche, s'est révélé monumental d'après les données des géants du secteur jusqu'à nos propres données analytiques.
Je suppose que vous êtes comme moi et que vous souhaitez optimiser vos résultats, et bien sûr, vos revenus, n'est-ce pas ? Alors, commençons sans plus attendre à rendre votre site web plus rapide que l'éclair ! (Imaginez un peu, non ?)
1. Abandonnez l'hébergement web bas de gamme
On essaie tous de faire des économies ces temps-ci, car les abonnements à Raven, SEMrush, Moz et tous les autres outils qu'on utilise quotidiennement finissent par coûter cher. C'est presque comme avoir un enfant de plus.
Pour économiser de l'argent, beaucoup optent pour des logements partagés bon marché. hébergement qui entasse autant de sites web que possible sur un serveur, un peu comme une bande de clowns qui s'entassent dans une seule voiture. Tant pis pour les performances !
Certes, votre site web sera disponible la plupart du temps, comme chez la plupart des hébergeurs, mais il se chargera tellement lentement que vos visiteurs repartiront frustrés sans jamais se convertir en clients.
« Mais c'est à peine perceptible ! » insistent ces chasseurs de bonnes affaires.
Voilà le truc : vous le remarquerez peut-être à peine parce que c'est votre bébé et que vous l'aimez.
Mais tous les autres veulent simplement entrer et sortir de votre site web le plus rapidement possible.
Les visiteurs souhaitent rester sur votre site juste le temps nécessaire pour accomplir leur objectif : trouver une réponse, acheter un produit ou atteindre un autre but précis. Si vous les ralentissez, même légèrement, ils risquent d'être mécontents de leur expérience et de quitter le site sans effectuer d'achat.
Pensez-y comme ça:
La plupart des gens aiment leurs propres enfants inconditionnellement. Mais si l'enfant du voisin hurle, jette des objets et gâche leur soirée au restaurant ? Ils le détestent. C'est la même chose avec votre site web.
Quelle différence cela fait-il réellement ?
Selon une étude réalisée par AmazonUne différence de seulement 100 ms — une unité de temps imperceptible pour l'être humain — a suffi à réduire leurs ventes de 1 %. Walmart ont trouvé des résultats similaires.
Si ce laps de temps infime a un impact direct aussi important sur les ventes, quel impact pensez-vous qu'une seconde supplémentaire, voire plus, aura ?
Mais cela ne s'arrête pas là, car la vitesse de chargement de votre site web a également un impact sur votre classement dans les résultats de recherche organiques et sur le coût des campagnes publicitaires au clic.
Autrement dit, si votre site web se charge lentement, attendez-vous à ce que vos concurrents qui ont investi dans ce domaine crucial vous devancent largement.
En résumé : évitez les hébergements web à bas prix. S’ils les vendent comme un produit de base (en se basant principalement sur le prix), ils traiteront leurs clients de la même manière.
De nombreux hébergeurs web sont optimisés pour la vitesse, notamment pour les sites WordPress, et certains d'entre eux proposent des tarifs similaires aux options économiques.
Alors renseignez-vous, faites des tests et investissez dans un hébergeur web qui vous offrira les performances nécessaires pour satisfaire à la fois vos visiteurs et Google.
2. Réduire les appels HTTP
Chaque fichier nécessaire à l'affichage et au fonctionnement d'une page web, comme le HTML, le CSS, le JavaScript, les images et les polices, requiert une requête HTTP distincte. Plus le nombre de requêtes est élevé, plus le chargement de la page sera lent.
Si vous êtes comme la plupart des gens à qui je parle, vous pensez probablement : « Oh, je n'ai pas à m'en soucier, Jeremy. Je sais ce que je fais et je n'ajoute pas un tas de choses inutiles et superflues à mon site web ! »
C'est peut-être partiellement vrai. Vous n'ajoutez peut-être pas une tonne de code inutile et superflu à votre site web, mais sur plus de 90 % des sites que je visite, ce code est quand même présent.
Ce poids excessif n'est pas dû à un coup de chance. Il est dû au fait que la majorité des concepteurs web, quel que soit leur niveau de compétence ou leur expérience, ne font pas de la vitesse de chargement une priorité. Le pire, c'est que la plupart ne savent même pas comment faire.
C'est là que le problème commence :
La plupart des thèmes chargent un ou plusieurs fichiers CSS et plusieurs fichiers JavaScript. Certains, comme jQuery ou FontAwesome, sont généralement chargés à distance depuis un autre serveur, ce qui augmente considérablement le temps de chargement d'une page.
Le problème s'aggrave encore si l'on tient compte des fichiers CSS et JavaScript supplémentaires ajoutés par les plugins. Il est facile de se retrouver avec une demi-douzaine, voire plus, de requêtes HTTP rien que pour ces fichiers CSS et JavaScript.
Si l'on tient compte de toutes les images d'une page, qui nécessitent chacune une requête HTTP distincte, la situation devient rapidement ingérable.
- Fusionner les fichiers JavaScript en un seul fichier.
- Fusionner les fichiers CSS en un seul fichier.
- Réduisez ou supprimez les plugins qui chargent leurs propres fichiers JavaScript et/ou CSS. Dans certains cas, comme avec Gravity Forms, vous pouvez désactiver leur chargement.
- Utilisez des sprites pour les images fréquemment utilisées.
- Utilisez autant que possible une police de caractères comme FontAwesome ou Ionic Icons plutôt que des fichiers image, car alors un seul fichier devra être chargé.
3. Inclure la barre oblique finale
Omettre la barre oblique finale des liens pointant vers votre site web, qu'ils proviennent de sources externes (efforts de création de liens) ou de votre propre site web, a un impact négatif sur la vitesse.
Voici comment:
Lorsque vous accédez à une URL sans barre oblique finale, le serveur web recherche un fichier portant ce nom. S'il ne trouve aucun fichier correspondant, il considère l'URL comme un répertoire et recherche le fichier par défaut dans ce répertoire.
Autrement dit, en omettant la barre oblique finale, vous forcez le serveur à effectuer une redirection 301 inutile. Même si cela peut vous sembler instantané, cela prend en réalité un peu plus de temps, et comme nous l'avons déjà constaté, chaque minute compte.
https://example.com (this is bad)
or
https://example.com/services (this is also bad)
vs.
https://example.com/ (this is good)
or
https://example.com/services/ (this is also good)
4. Activer la compression
L'activation de la compression GZIP peut réduire considérablement le temps de téléchargement de vos fichiers HTML, CSS et JavaScript, car ils sont téléchargés sous forme de fichiers compressés beaucoup plus petits, qui sont ensuite décompressés une fois arrivés dans le navigateur.
N’ayez crainte, vos visiteurs n’auront rien à faire de plus car tous les navigateurs modernes prennent déjà en charge GZIP et le traitent automatiquement pour toutes les requêtes HTTP.
5. Activer la mise en cache du navigateur
Lorsque la mise en cache du navigateur est activée, les éléments d'une page Web sont stockés dans le navigateur de vos visiteurs. Ainsi, lors de leur prochaine visite sur votre site ou sur une autre page, leur navigateur peut charger la page sans avoir à envoyer une autre requête HTTP au serveur pour aucun des éléments mis en cache.
Une fois la première page chargée et ses éléments stockés dans le cache de l'utilisateur, seuls les nouveaux éléments des pages suivantes doivent être téléchargés. Cela permet de réduire considérablement le nombre de fichiers à télécharger lors d'une session de navigation classique.
6. Réduisez les ressources
La minification de vos fichiers CSS et JavaScript supprime les espaces blancs et les commentaires inutiles afin de réduire la taille du fichier et, par conséquent, le temps nécessaire à leur téléchargement.
Heureusement, il n'est pas nécessaire d'effectuer ce processus manuellement car plusieurs outils en ligne permettent de convertir un fichier en une version plus petite et minifiée de lui-même.
Il existe également plusieurs plugins disponibles pour WordPress qui remplaceront les liens dans l'en-tête de votre site web vers vos fichiers CSS et JavaScript habituels par une version minifiée de ceux-ci sans modifier vos fichiers originaux, notamment des plugins de mise en cache populaires tels que :
- W3 Total Cache
- WP Super Cache
- WP Rocket
Il faudra peut-être un peu d'efforts pour obtenir les bons paramètres, car la minification peut souvent endommager le CSS et le JavaScript. Une fois que vous avez tout minifié, assurez-vous de tester minutieusement votre site web.
7. Prioriser le contenu au-dessus de la ligne de flottaison
Votre site web peut sembler se charger plus rapidement aux yeux du visiteur s'il est codé de manière à privilégier le contenu visible au-dessus de la ligne de flottaison — autrement dit, le contenu qui s'affiche avant que le visiteur ne fasse défiler la page.
Cela signifie s'assurer que tous les éléments qui apparaissent au-dessus de la ligne de flottaison soient également placés le plus près possible du début du code HTML afin que le navigateur puisse les télécharger et les afficher en premier.
Il est également essentiel d'inclure directement dans le code CSS et JavaScript ceux nécessaires au rendu de cette zone, plutôt que de les placer dans un fichier CSS externe.
8. Optimiser les fichiers multimédias
Comme les appareils mobiles dotés d'appareils photo de haute qualité sont courants et que les systèmes de gestion de contenu modernes tels que WordPress facilitent le téléchargement d'images, beaucoup de gens prennent simplement une photo et la téléchargent sans se rendre compte que, souvent, l'image est au moins quatre fois plus volumineuse que nécessaire.
Cela ralentit considérablement votre site web, surtout pour les utilisateurs mobiles.
L'optimisation des fichiers multimédias de votre site web peut considérablement améliorer la vitesse de chargement de vos pages, et comme elle est relativement facile à réaliser, c'est un bon investissement de votre temps.
Optimisation des images
- Choisissez le format idéal. Le format JPG est parfait pour les images photographiques, tandis que les formats GIF ou PNG sont plus adaptés aux images comportant de grandes zones de couleur unie. Les fichiers PNG 8 bits sont destinés aux images sans canal alpha (fond transparent), et les fichiers 24 bits aux images avec canal alpha.
- Assurez-vous que les images sont correctement dimensionnées. Si une image s'affiche sur votre site web avec une largeur de 800 pixels, il est inutile d'utiliser une image de 1600 pixels de large.
- Comprimez le fichier image. Outre le fait d'être le logiciel de retouche d'images de référence, Adobe Photoshop offre d'excellentes fonctionnalités de compression et son prix de départ est de 9.99 $/mois. Vous pouvez également utiliser des extensions WordPress gratuites, telles que… Optimiseur d'images WWW, Imsanityet TinyJPG, qui compressent automatiquement les images téléchargées.
Optimisation vidéo
- Choisissez le format idéal. Le MP4 est le meilleur choix dans la plupart des cas car il produit des fichiers de taille réduite.
- Servez la taille optimale (dimensions) en fonction de la taille de l'écran des visiteurs.
- Supprimez la piste audio si la vidéo est utilisée en arrière-plan comme élément de design.
- Compressez le fichier vidéo. J'utilise principalement Adobe Premiere, mais Camtasia est également un excellent choix.
- Réduire la durée de la vidéo.
- Envisagez de télécharger les vidéos sur YouTube ou Vimeo plutôt que de les héberger localement et d'utiliser leur code d'intégration iframe.
Mais ne vous arrêtez pas là, car cela ne fait qu'effleurer le sujet.
Pour optimiser véritablement les médias sur votre site web, vous devez proposer des images de taille appropriée en fonction de la taille de l'écran plutôt que de simplement les redimensionner.
Il existe deux manières de gérer cela, selon l'implémentation d'une image.
- Les images intégrées au code HTML de votre site web peuvent être servies à l'aide de l'attribut src, ce qui permet au navigateur de sélectionner, de télécharger et d'afficher l'image appropriée en fonction de la taille de l'écran de l'appareil utilisé par le visiteur.
- Les images placées via CSS – généralement comme images de fond – peuvent être servies à l'aide de requêtes média pour sélectionner l'image appropriée en fonction de la taille de l'écran de l'appareil utilisé par le visiteur.
9. Utiliser la mise en cache et les CDN
La mise en cache permet à votre serveur web de stocker une copie statique de vos pages web afin qu'elles soient plus rapidement transmises au navigateur du visiteur. Un CDN, quant à lui, permet de distribuer ces copies sur des serveurs répartis dans le monde entier, de sorte que le navigateur du visiteur puisse les télécharger depuis le serveur le plus proche de sa localisation. Cela améliore considérablement la vitesse de chargement des pages.
___
by Jeremy Knauff
la source: SEJ
