Comment optimiser le temps de chargement des pages et améliorer votre référencement ?

Nous vivons dans un monde incroyablement impatient. Fournir rapidement un contenu de qualité était une réalisation enviable il y a quelques années. Aujourd'hui, c'est une exigence rudimentaire pour toute entreprise.

Plus vous faites attendre les gens pour accéder à votre site Web, plus la probabilité qu'ils rebondissent est grande. Un site Web lent est un problème sérieux qui nécessite une attention immédiate.

Pourquoi?

Supposons que vous ayez un taux de conversion de 3 %. Vous obtenez trois prospects pour 100 clics. Maintenant, que se passe-t-il si les trois rebondissent parce que votre page de destination se charge pendant les années des dinosaures ? Imaginez l'impact sur votre résultat net.

Dans cet article, nous vous montrerons comment éviter ce scénario. Il y a 5 étapes pour optimiser le temps de chargement de votre page.

Première étape : trouvez la vitesse de chargement de votre page actuelle.

Google PageSpeed ​​Insights et GTMetrix sont des outils utiles pour calculer la vitesse des pages. Les deux énumèrent les facteurs qui entravent la vitesse. Cependant, GTMetrix vous indique combien de secondes il faut pour que votre page se charge.

Branchez l'URL de votre domaine dans GTMetrix et laissez l'outil faire sa magie.

En quelques secondes, il remplira les chiffres et vous attribuera une note.

Il cartographiera également le temps de chargement de chaque élément de la page. Par exemple, selon l'image ci-dessus, il a fallu 5,5 secondes pour que le FCP, ou First Colorful Paint, se charge. Le temps de chargement total de la page est de 7,3 secondes paresseuses !

L’outil établit également une liste de suggestions pour augmenter la vitesse de chargement de votre page…

… et quelques autres conseils :

La prochaine section explique comment obtenir un score de vitesse plus rapide sur GTMetrix.

Deuxième étape : Optimisez votre site Web pour augmenter la vitesse de chargement des pages.

Conseils pour l'optimisation des images SEO

Comment réduire la taille de l'image ?

Chaque site Web est un fichier qui est chargé à partir des serveurs sur demande. Vous voulez que cette taille de fichier soit minimale pour favoriser un chargement rapide.

Les images sont généralement de grande taille ! Ils mettent des éons à se charger.

Mais ils ajoutent une valeur considérable s'ils sont utilisés à bon escient. Par exemple, les images de GTMetrix m'ont aidé à mieux exposer mon propos tout en vous donnant une référence.

Nous ne devons pas éliminer les images, mais nous pouvons optimiser leur utilisation. Ce sont 4 méthodes pour réduire la taille de l'image.

• Compression d'images
• Recadrage des images
• Redimensionner les images

Compression d'images

Réduisez la taille des images que vous utilisez. Le processus de réduction de la taille du fichier est appelé compression d'image. Les images sont une pile de calques ; chaque couche ajoute une saveur. La compression réduit la taille de la page en supprimant les calques qui rendent l'image plus nette.

Cela a un impact sur la qualité de l'image, mais cela compense largement en vous faisant gagner des points SEO.

Commencez par enregistrer vos images au format JPG car elles occupent moins d'espace disque. Certains blogs recommandent JPEG2000 ou WEBP, mais mon thème avait des problèmes de rendu avec ce format. Souvent, JPG fonctionne bien.

À partir de là, il existe deux façons d'obtenir plus de compression.

1. Compresser des images en ligne

Dirigez-vous vers compressjpeg et téléchargez votre image JPG. L'outil compresse votre image et indique à quel point elle a été compressée. Téléchargez l'image compressée et utilisez-la pour votre page Web.

2. Utiliser des plugins pour compresser les images

Je ne suis pas un grand fan de l'utilisation de plugins. Bien sûr, ils facilitent le travail si vous ne savez pas coder. Mais ils entravent le code existant de votre site Web. Cependant, c'est une option à considérer.

Il existe des tonnes de plugins qui peuvent vous aider à compresser des images ; vous avez l'embarras du choix. Quoi qu'il en soit, vérifiez la coche "Compatible avec votre version de WordPress" avant d'utiliser un plugin.

Choisissez entre la compression avec perte/sans perte

La compression peut être avec ou sans perte. Il tient compte du degré de compression de vos images.

J'utilise une compression sans perte pour les images contenant beaucoup de texte. Le texte de l'image avec perte a tendance à être trop flou pour être lu. J'utilise la compression sans perte pour tout le reste.

Expérimentez avec celui qui vous convient le mieux.

Recadrer les images

Cela semble être une méthode évidente pour réduire la taille de l'image - vous réduisez littéralement la taille de l'image - mais beaucoup ont tendance à l'ignorer.

Prenez note des dimensions d'image qui fonctionnent pour votre blog. Les tailles de l'image principale et de l'image en vedette doivent être cohérentes. Cependant, les visuels de support peuvent être recadrés pour afficher ce qui est nécessaire.

Par exemple, aucune des captures d'écran de cet article n'a de visuels redondants. Aucune barre d'adresse ou pied de page. Chaque pixel ajoute au temps de chargement de la page. Supprimez ceux qui ne sont pas nécessaires.

Redimensionner les images sur MS Paint

Cette méthode qui semble évidente se cache à la vue de tous.

1. Ouvrez votre image dans MS Paint. Vous verrez l'option de redimensionnement.
2. Définissez votre pourcentage de redimensionnement, et vous avez maintenant une version beaucoup plus petite en dimensions et en taille. Il enregistre des charges sur la taille du fichier !

Images de chargement paresseux

Toutes les données de votre site Web sont stockées dans des centres de données et récupérées en cas de besoin ; les images ne sont pas différentes. La technique de chargement paresseux retarde le processus de récupération jusqu'au moment où le visiteur fait défiler le visuel.

Ce n'est qu'alors que le système engrange les ressources nécessaires pour servir ladite image. Cette technique réduit la charge initiale sur le système en mettant les éléments en file d'attente pour qu'ils ne soient chargés qu'en cas de besoin.

Cela permet non seulement d'économiser sur le temps de chargement initial, mais également de conserver la bande passante.

Essayez-le sur cette page : faites défiler vers le bas et voyez comment une image se charge lorsque vous l'atteignez, pas avant.

Comment implémenter le Lazy Load sur votre site web ?

Le plugin a3 Lazy Load peut vous aider à implémenter rapidement le chargement paresseux.

Choisissez la police appropriée.

La police relève souvent du design; il est rarement considéré comme un facteur de performance.

Mais cela contribue à la taille de la page. Le rapport de GTMetrix discuté précédemment montre que la police occupait le plus de taille après les images.

Pour une vitesse de chargement rapide, vous devez choisir des polices qui se chargent rapidement.

J'utilise Open Sans pour mon site Web car je n'ai pas besoin d'être fantaisiste pour ma catégorie d'entreprise. Si vous possédez une entreprise créative, vous voudrez peut-être sacrifier un peu de vitesse de page pour l'aspect beauté. De plus, si vous voulez une police élégante contribuant à l'identité de votre marque, allez-y. Marque >> Vitesse de page.

Tassez le code

JavaScript (JS) et les feuilles de style en cascade (CSS) sont des morceaux de code qui prennent en charge chaque page Web que vous voyez. Les deux ont un impact sur la vitesse de chargement des pages de deux manières : ils augmentent la taille de la page et envoient un ensemble de requêtes au serveur qui prend du temps à être traitées.

Mais ils sont nécessaires pour ajouter du style et du punch à votre site Web. Par exemple, remarquez ma boîte d'abonnement ci-dessous - elle hoche la tête lorsque vous faites défiler jusqu'à elle. Si vous avez manqué l'effet, rechargez cette page et réessayez.

L'effet attire l'attention mais, s'il est surutilisé, devient une distraction.

Il y a un compromis entre le style et la vitesse de la page. N'éliminez pas le style pour la vitesse de la page. Cependant, l'optimisation du code augmentera la vitesse de chargement de votre page.

Et voici comment j'ai procédé :

Minifier JS/CSS

La minification élimine les morceaux de code inutiles, réduisant ainsi la taille du fichier. Cela permet aux navigateurs de télécharger et d'exécuter du code plus rapidement, économisant ainsi de la bande passante.

Tirer parti de la mise en cache

Un cache est l'unité de stockage qui conserve des copies de votre site Web, évitant ainsi d'avoir à le charger à chaque fois qu'il est appelé. Avec la mise en cache, après le premier chargement, votre site Web se chargera plus rapidement chaque fois qu'il sera de nouveau appelé.

J'utilise le plugin LiteSpeed ​​Cache pour minifier le code et le cache.

Troisième étape : Envisagez de changer de fournisseur d'hébergement Web.

Une voiture de sport aérodynamique fonctionnerait-elle au kérosène ? Non.

De même, un site Web bien optimisé aura une vitesse de chargement de page lente si le serveur ne répond qu'à la prochaine période glaciaire.

J'ai hésité à faire le changement principalement à cause de l'incertitude. Mais j'ai fait quelques recherches et j'ai choisi Hostinger, et je n'ai aucun regret.

De nombreux autres hébergeurs Web font le travail pour vous. Décidez ce qui fonctionne pour vous en fonction de votre budget et de votre emplacement.

Voici un guide complet pour changer votre WebHost.

Étape 4 : Utiliser un réseau de distribution de contenu (CDN.)

La distance géographique a un impact considérable sur la vitesse de la page. Plus un visiteur est éloigné de l'endroit où votre site Web est hébergé, plus le temps de chargement de la page est long.

CDN est une collection de serveurs mondiaux situés dans plusieurs centres de données à travers le monde. Il permet à un visiteur de se connecter à un serveur géographiquement plus proche au lieu du serveur domestique. Pour ce faire, il exploite des serveurs aux points d'échange entre différents réseaux.

La distance réduite favorise une diffusion plus rapide de votre page Web.

J'utilise le CDN Cloudflare, et il a largement rempli son rôle.

Cinquième étape (facultative) : Utiliser les pages mobiles accélérées (AMP) pour augmenter la vitesse de chargement des pages mobiles

Rappelez-vous que nous avons parlé de minifier le code. HTML est une forme de code plus légère que CSS/JS. Il ne permet pas le style, mais HTML est le code de base dont les serveurs ont besoin pour charger votre site Web.

Les pages AMP sont la forme HTML de votre page Web. Ce sont des pages de deuxième version qui sont principalement utilisées pour les appareils mobiles. Ils sont dépouillés de code au strict minimum, ainsi les pages se chargent en une fraction de seconde.

Passer à AMP signifie éliminer le style de votre page. Cependant, ils sont bénéfiques pour les pages d'actualités et les blogs. Je les ai utilisés brièvement mais je suis revenu sur ma décision car les trois premières étapes ont suffi même pour la vitesse de ma page mobile.

J'ai écrit un guide détaillé pour décider si vous voulez implémenter AMP ou non.

Résultats

Les étapes ci-dessus ont fait des merveilles pour la vitesse de chargement de ma page. Pour en revenir à GTMetrix, voici où en est mon site Web aujourd'hui.

Il se charge en 1,2 secondes. Environ 6 fois plus.

Mais la preuve est dans le pudding. Essayez-le et faites-moi savoir dans les commentaires comment ça se passe.