• Accueil
  • Blog
  • SEO et performances : boostez votre site web

SEO et performances : boostez votre site web

mardi 14 juin 2016

Comme vous le savez probablement, le positionnement d’un site web dans les moteurs de recherche est une composante primordiale dans le succès de celui-ci. Des statistiques montrent que la première page de Google enregistre un taux de clic de plus de 90%, et les 3 premiers résultats plus de 60%. Ces chiffres montrent clairement qu’un site mal positionné ne sera pas visible par les internautes et par conséquent, peu visité.

Il est vrai que ce positionnement va dépendre de nombreux facteurs sur lesquels nous, en tant que développeurs, n’auront pas forcément d’influence : le contenu des pages qui sera rédigé par votre client par exemple, ou encore les campagnes marketing associées à ce site.

Cependant, nous pouvons dans une certaine mesure le faciliter voire l’améliorer, principalement en agissant sur les leviers suivants :

  • Le SEO « on-page » (de l’anglais « Search Engine Optimization »)
  • Les performances globales du site

Le SEO « on-page »

Le SEO « on-page » consiste à optimiser chaque page de votre site individuellement, en travaillant à la fois sur son contenu, mais aussi sur son code source HTML. Voici une liste non-exhaustive d’optimisations à réaliser sur chacune de vos pages afin de booster leur positionnement.

Contenu de la page

La première étape à effectuer est de vous assurer que vous (ou votre client, le cas échéant) avez déterminé un mot-clé ou expression ciblé pour la page en question. Ce mot-clé sera présent dans les titres principaux et secondaires de la page, mais également dans le contenu où il pourra être répété plusieurs fois (voir les sections suivantes).

Bien évidemment, le contenu proposé doit être de haute qualité, unique, et à forte valeur ajoutée. C’est d’ailleurs l’élément le plus important à prendre en compte. Pour la longueur du contenu de la page, nous vous conseillons de rédiger un texte d’au moins 500 mots.

Balises meta

Les balises meta ont longtemps été considérées comme étant le principal facteur pour le positionnement d’un site web, tandis qu’actuellement, ce n’est plus vraiment le cas. Bien que n’ayant plus d’influence directe sur le positionnement, il reste toutefois nécessaire de les renseigner.

  • Title : la balise title est la plus importante de toutes les balises meta. Elle doit être unique, et comporter le mot-clé de la page, et de préférence, au plus près du début de la balise.

Pour qu’elle soit affichée en entier dans les pages de résultats des moteurs de recherche, nous vous conseillons de ne pas dépasser 60 caractères.

  • Description : cette balise permet de décrire le contenu de la page, et va apparaître sous la balise title dans les pages de résultats. Même si elles ne seraient plus prises en compte par les algorithmes de positionnement, les internautes eux, auront plus tendance à cliquer sur un résultat si sa description correspond bien à leurs attentes.

Pour la même raison pour la balise title, nous vous conseillons de ne pas dépasser 160 caractères.

  • Keywords : beaucoup de webmasters ont usé, voire abusé de ces balises pendant longtemps. Actuellement, elles n’ont plus aucun impact sur le positionnement selon Google. Nous vous conseillons de ne pas l’utiliser et de la laisser vide.

Pour vous aider, voici un site vous permettant de pré-visualiser vos balises meta de manière à voir comment votre page apparaîtrait dans les moteurs de recherche : http://www.seomofo.com/snippet-optimizer.html

Structure de la page

Pour bien signifier aux moteurs de recherche la structure de votre page, il est important d’utiliser à bon escient les balises de titres <hn>. Grâce à ceux-ci, vous pourrez segmenter le contenu et donner plus ou moins de poids à certaines informations de votre page.

Tout d’abord, veillez à insérer vos mots-clés dans ces titres. En effet, les moteurs de recherche scannent ces titres pour trouver ce qui est important dans votre page. De même que pour la balise title, n’hésitez pas à l’inclure en début de titre. 

Ensuite, pensez à garder un ordre hiérarchique cohérent pour vos titres :

h1 > h2 > h3 … au lieu de h1 > h3 > h2

Enfin, pour donner un maximum de poids à votre titre principal, nous vous conseillons de n'utiliser qu'une seule balise <h1> par page.

URLs

Pensez à bien vérifier l’ensemble de vos URLs avant la génération du fichier sitemap.xml, et la livraison en production du site internet. Voici quelques éléments à prendre en compte :

  • S’assurer que toutes les URLs sont statiques et bien formées (sans paramètre additionnel)

ex : http://siteweb.com/categorie/sous-categorie/mot-cle plutôt que http://siteweb.com/48/233/mot-cle?s=abc&t=def

  • Privilégier les URLs courtes

Nous vous conseillons de ne pas dépasser les 90 caractères.

  • S’assurer que le mot-clé de la page est présent dans l’URL
  • S’assurer que le contenu associé à une URL est unique. Si vous avez 2 URLs ayant un contenu similaire, vous risquez le « duplicate-content ». Pour remédier à cela, n’hésitez pas à utiliser la balise meta rel=canonical pour indiquer aux moteurs de recherche la page principale.
  • Privilégier les structures d’URLs riches en y intégrant votre arborescence :

ex : http://siteweb.com/categorie/sous-categorie

De cette manière, en compartimentant vos URLS de page, les moteurs de recherche auront une représentation plus précise de l’architecture de votre site web

  • Vérifier que tous les liens de vos pages pointent vers une URL existante

Autres

Pour terminer cette section, voici quelques recommandations pouvant avoir un impact positif sur votre positionnement.

  • L’utilisation des attributs « alt » est recommandée sur vos balises images, surtout s’ils contiennent le mot-clé principal de votre page.
  • La mise en avant de votre mot-clé et des expressions importantes de votre page par l’intermédiaire des balises <i>/<em> (italique) et <b>/<strong> (gras) auraient également un léger impact sur le positionnement. Comme souvent dans le SEO, il s’agit de faciliter le travail des moteurs de recherche en identifiant les notions que vous considérez comme importantes dans votre page.
  • Vérifiez le code W3C de votre page. Bien que n’ayant pas d’impact direct sur le positionnement de votre site, vous serez certains que toutes vos balises seront bien fermées par exemple et que le code HTML de la page sera correctement scanné.
  • L’adaptation de votre site sur les supports mobiles (smartphones et tablettes). En effet, Google privilégie de plus en plus les sites « mobile-friendly ». Pour plus d’informations sur le sujet, n’hésitez pas à aller consulter notre article Comment être mobile friendly.

Outils

Voici quelques outils en ligne pour obtenir un diagnostic SEO de vos pages web :

 


L'optimisation des performances

Depuis maintenant quelque temps, les moteurs de recherche, Google en tête, favorisent les sites web bien optimisés et performants, c’est-à-dire les sites légers en terme de poids des pages, et qui s’affichent rapidement.

Dans cette seconde partie, nous allons étudier différentes techniques d’optimisations des performances.

Tout d’abord voici les principaux indicateurs de la « bonne santé » de votre site :

  • Le poids total de la page
  • Le nombre de requêtes HTTP effectuées
  • Le temps de chargement

Poids total de la page

Cet indicateur est peut-être le plus important et le premier à étudier. En effet, plus vos pages web seront lourdes, et plus l’internaute mettra de temps à les télécharger. Vous risquez potentiellement de perdre votre client plus facilement.

Vous vous en doutez, ce n’est pas le code HTML de la page qui pèse le plus, mais ce sont toutes les ressources annexes, téléchargées par le navigateur de l’internaute à savoir : images, éventuellement vidéos, feuilles de style (CSS) et fichiers scripts (JS).

Votre tâche va donc consister à compresser tous ces fichiers de manière à ce qu’ils prennent moins de place sur le serveur (mais sans perte de qualité) et ainsi être téléchargés plus rapidement.

Pour les images, vous pouvez dans un premier temps les recadrer de manière à ce qu’elles ne dépassent pas la largeur maximale de vos pages. Inutile d’afficher des images de 3000 pixels de large, si votre page n’en mesure que 1000. Ensuite, vous pouvez également les compresser en qualité, via des logiciels comme Photoshop, sans trop altérer l’image initiale (ex : 65% de qualité). Enfin, pour des images non transparentes, nous vous conseillons d’utiliser le format JPG ayant un ratio qualité / poids très intéressant.

Pour les feuilles de style et scripts, il peut être intéressant de les compresser également. Certains task runners comme Gulp ou encore Webpack permettent de compresser très facilement ces ressources, d’une seule commande. Vous pouvez aussi le faire à la main grâce à des outils en ligne :

Nombre de requêtes HTTP effectuées

L’autre indicateur qui est primordial à surveiller pour des bonnes performances est le nombre de requêtes HTTP effectuées à chaque chargement de pages. En effet, les serveurs sur lesquels sont hébergés les sites web ne peuvent pas traiter toutes les requêtes d’une page simultanément, et de la même manière, les navigateurs ne peuvent pas télécharger toutes les ressources associées en même temps.

Concaténation de fichiers

Pour pallier à ce problème, nous vous conseillons de réduire au maximum le nombre de requêtes HTTP, donc de ressources à télécharger sur chacune de vos pages. Pour cela, il vous faut « rassembler » ces ressources en les concaténant, c’est-à-dire les rassembler en un seul fichier, les uns à la suite des autres. De cette manière, le navigateur aura simplement 1 feuille de style et 1 fichier JavaScript à télécharger par page.

Pour les images, vous pouvez utiliser la technique des « sprites », consistant à grouper toutes vos images en une seule. Pour plus d’infos sur le sujet : http://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html

Utilisation du cache

Une autre technique pour diminuer le nombre de requêtes est la mise en cache de ressources. Après un premier chargement d’un site web, idéalement l’internaute ne devrait pas avoir à re-télécharger d’autres fichiers en naviguant sur les autres pages. Pour cela, nous pouvons mettre en cache ces ressources, grâce à l’utilisation du fichier .htaccess. Grâce à ce fichier, on peut ainsi indiquer au navigateur qu’il n’est pas nécessaire de re-télécharger les ressources trop souvent. 

Voici un exemple de fichier .htaccess mettant en cache les différents formats d'image, ainsi que les feuilles de style et scripts.

<IfModule mod_expires.c>
    # Enable expirations
    ExpiresActive On
    # Default directive
    ExpiresDefault "access plus 1 month"
    # My favicon
    ExpiresByType image/x-icon "access plus 1 year"
    # Images
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType image/jpg "access plus 1 month"
    ExpiresByType image/jpeg "access plus 1 month"
    # CSS
    ExpiresByType text/css "access plus 1 month"
    # Javascript
    ExpiresByType application/javascript "access plus 1 year"
</IfModule>


Temps de chargement

Même si cet indicateur est relatif à la vitesse des connexions Internet des internautes et découle des 2 précédents, il est tout de même un bon indicateur « étalon » pour suivre l’évolution des performances de son site.

Pour vous aider dans l’optimisation des performances de votre site web, voici une sélection d’outils indiquant à chaque fois les points que vous pourrez améliorer :

 

Si vous avez aimé cet article, n’hésitez pas à télécharger gratuitement notre guide du développeur, en cliquant ci-dessous.

 

Télécharger le guide du développeur - SEO et performances

voir tous les articles