Comment améliorer ma position sur Google: optimisation du chargement de page

Puisque vous avez utilisé internet depuis des années, vous n'aurez aucune difficulté à comprendre pourquoi il est essentiel d'avoir un site web qui s'affiche rapidement.

Mais saviez-vous qu'il s'agit également d'un élément essentiel de votre stratégie SEO ?

Une page rapide pour un bon SEO

"Qu'est ce que le SEO ?"
SEO signifie "Search Engine Optimization" (Optimisation pour Moteurs de Recherche). Dit simplement, le SEO est l'art d'optimiser son site pour convaincre les moteurs de recherche de sa valeur.

"Et comment les moteurs de recherche évaluent-ils la qualité de mon site ?"

Il y a une immense liste de critères à prendre en compte lorsque l'on souhaite optimiser son site web. L'un d'entre eux est la vitesse de chargement du site.

Mettez-vous une seconde à la place de Google: votre but est de fournir à vos visiteurs la page la plus adaptée à leur recherche. Pour y parvenir, vous allez chercher dans votre base de données celle qui répond le mieux à sa demande tout en fournissant l'expérience de visite la plus agréable. Pour assurer que cette expérience soit unique, l'un des critères principaux va-t-être de suggérer une page qui se charge rapidement.

En vous assurant que votre page se charge au plus vite vous allez obtenir ces trois résultats:

1. Augmentation de votre résultats sur les moteurs de recherche sur le long terme
2. Amélioration de l'expérience-utilisateur
3. Diminution du taux de rebond

Comment créer une page rapide

Première chose: utilisez plusieurs outils d'analyse de rapidité de chargement.

Voici une liste de quelques sites qui vous offrirons cette option gratuitement:

• http://gtmetrix.com/
• https://developers.google.com/speed/pagespeed/insights/
• http://tools.pingdom.com/fpt/
• http://www.webpagetest.org/

La raison pour laquelle je vous invite à utiliser ces outils est que chacun d'entre eux vous offrira un score et un diagnostique différent en fonction des éléments qu'ils prennent en compte. Chacun vous suggèrera également plusieurs pistes à explorer pour améliorer le chargement de vos pages.

Passez donc vos pages au travers de ces tests et enregistrez vos résultats pour pouvoir les comparer plus tard.
Il est temps maintenant de se mettre au travail !

Optimisation des images

L'élément le plus commun  qui ralentit le chargement d'une page est la chargement des images.

Il y a trois éléments à toujours prendre en compte lorsque vous affichez des images sur un site:

1. Avez-vous clairement indiqué leur taille ?
2. Les images sont-elles à la bonne taille ?
3. Avez-vous optimisé ces images ?

Avant tout, assurez-vous que TOUTES les images de votre site ont une indication "width" et "height" clairement définies. Sans cela, la navigateur de votre visiteur ne va pas pouvoir charger la structure de la page ce qui va considérablement ralentir son chargement.

Ensuite, vous devez absolument charger des images à la bonne taille. Par exemple, si vous affichez une image aux dimensions "150 x 300px", celle-ci ne doit pas faire 5000px de large ! Ne demandez jamais au navigateur de redimensionner une photo ! Quand bien même celle-ci apparaît comme étant 150px de large, le navigateur va devoir télécharger l'image complète ! Assurez-vous de redimensionner vos images AVANT de les charger sur votre page.

Enfin, souvenez-vous d'optimiser vos images. Il existe des outils gratuits sur le net permettant de réduire le poids d'une image sans en modifier sa taille ou sa qualité. En optimisant vos images vous allez réduire leur temps de chargement et conséquemment le temps de chargement global de votre page. Voici deux outils gratuits que je vous conseille: www.kraken.io et www.smushit.com.

Optimisation du code

Sans trop rentrer dans les détails, je dois impérativement mentionner qu'il est essentiel d'optimiser votre code. Parlez avec votre webmaster ou votre programmeur pour établir la meilleure stratégie pour y parvenir. Une bonne habitude est de "casser" votre code en une multitude de sections et d'appeler ces sections uniquement lorsque celles-ci sont nécessaires. Par exemple, créez un fichier CSS (fichier de style) séparé ainsi que différents fichiers Javascript pour vos différents éléments, etc...

Une fois cela fait, assurez-vous que chaque page n'appelle que les éléments dont elle a besoin pour fonctionner (ne chargez pas tous vos scripts "par précaution" s'ils ne sont pas utiles à la page !).
Optimiser son code signifie également éviter de charger de trop nombreux éléments extérieurs (scripts de commentaires, widgets, éléments de partage, boutons "like" ou "+1", etc...). Concentrez-vous sur ce dont vous avez besoin et supprimez le reste.

Pensez également à "minifier" vos fichiers (CSS et Javascript) de manière à ce qu'ils soient plus facile à télécharger pour le navigateur.

Enfin, le plus important à la fois pour votre propre bénéfice et celui de votre site: assurez-vous d'avoir un code clair et organisé.

Optimisation du server

Connaissez-vous la différence principale entre votre site web et, disons, amazon ? Savez-vous pourquoi leur site est rapide dans n'importe quel pays du monde alors que le votre ne l'est pas ?

Tout simplement parce que les sites web les plus larges ont de multiples servers localisés autour du monde. Le trafic local est automatiquement redirigé vers le server le plus proche pour assurer une rapidité optimale.

Vous n'avez certainement pas les moyens de vous acheter des servers tout autour du globe, mais vous pouvez obtenir un résultat similaire ! La solution s'appelle un CDN (Content Delivery Network ou Réseau de Livraison de Contenu).

Un CDN est un système qui va héberger une partie de votre contenu (en général les images) sur un réseau de servers qui va permettre au visiteur de télécharger les images à partir du server le plus proche de lui. Je vous conseille de lancer une petite recherche sur Google pour découvrir quelques CDN gratuits.

L'autre avantage du CDN est de soulager votre serve d'une partie de son trafic: si les images sont téléchargées à partir d'un autre server, celles-ci ne sont plus un fardeau pour le vôtre. Cette bande passante supplémentaire que vous venez de libérer vous permet désormais de servir vos visiteurs plus efficacement.

Pour optimiser votre server, pensez à contacter votre hébergeur pour lui demander quelles sont les solutions qu'il propose: passer sur un server plus rapide, avoir un server dédié ou bien améliorer les réglages.

Il vous reste encore nombre de paramètres plus technique que vous pouvez modifier pour améliorer votre vitesse de chargement: optimisation du cache server, activation de la compression gzip, éviter les pages de redirection, etc...

Suivre son évolution

Une fois tous ces changements opérés, retournez aux outils de mesure que je vous ai indiqué plus tôt et essayez à nouveau.

Voyez donc vos progrès ainsi que les suggestions d'amélioration que vous recevez. Lisez attentivement les diagnostiques et continuez à améliorer votre site jusqu'à ce que celui-ci obtienne d'excellents résultats.

Mon expérience personelle

La raison pour laquelle j'écris cet article est simple: il y a quelques semaines je visitais mon propre blog, insatisfait de sa rapidité.

Je suis donc passé à travers toutes les étapes que je viens de mentionner et, en une semaine, j'ai doublé mes scores par deux ! Sans même mentionner l'aspect SEO d'une telle amélioration, du point de vue d'un visiteur, c'est un progrès conséquent !

Je vous recommande donc de faire pareil: obtenez de meilleurs résultats et rendez vos visiteurs heureux, d'une pierre deux coups.

A votre tour

Que pensez-vous d'un petit test ?

Rendez-vous sur "Google Page Speed", testez la rapidité de votre site et laissez-moi un commentaire. Revenez dans quelques jours avec votre nouveau score et nous pourrons discuter de vos progrès !

Julien Rio.