Guide SEO: Les bonnes pratiques pour accélérer son site

guide seo pour accelerer son site

Cet article fait partie d’une série d’articles qui va suivre sur l’optimisation des performances des pages web. Commençons par expliquer les bonnes pratiques SEO qui seront ensuite développer plus en détails dans la suite de cette série de guides SEO spécial performance.

Avant d’aller plus loin sur les techniques qui permettent d’accélérer le temps de chargement des pages web, faisons un petit rappel  sur l’utilité d’avoir une page rapide:

Plus un site est crawlé rapidement, plus Google verra de pages. De plus une bonne fréquence de crawl favorise une bonne activité des pages.
(Page active = page qui reçoit au moins une visite)

 

Minimiser les requêtes

minimiser les requetes

Exemple du nombre et du type d’éléments d’une page web

Un navigateur met plus de temps à charger 10 éléments de 10 Ko qu’1 seul élément de 100 Ko.

C’est simplement dû au temps demandé par l’envoi d’une requête du navigateur au serveur combiné au temps de réponse par le serveur.

Que ce soit des images, des JS, des CSS, pour accélérer le temps de chargement d’une page, il est essentiel d’avoir le moins possible de requêtes à envoyer.

Il est donc nécessaire de :

  • Combiner CSS et JS.
  • Si un fichier CSS est petit, il est préférable de mettre le style directement sur la par html plutôt que de faire une requête en plus pour charger un tout petit fichier.
  • Combiner les images de votre template graphique, celles qui reviennent sur toutes les pages, par le biais des sprites CSS (technique qui permet de fusionner plusieurs images en une seule et d’appeler des bouts de cette image via les CSS).
  • Eviter les redirections serveur, car c’est autant de requêtes supplémentaires.
  • Supprimer les fonctions javascripts qui ne sont pas utiles, qui n’apportent rien à l’expérience utilisateur

 

Paralléliser les requêtes

 

Nombre de connections par domaine

Nombre de connections par domaine – source: Browserscope.org

Diminuer le nombre de requêtes, c’est bien mais il y a une limite, que ce soit pour des questions de maintenance, techniques ou autres.

Les navigateurs ont tous une limite de connections simultanées pour un même domaine. Par exemple, le navigateur Chrome 32 n’accepte que 6 connections en même temps depuis www.creapulse.fr, ca signifie que pour charger les autres éléments il doit attendre qu’au moins un élément ai été téléchargé pour libérer une place.

On constate qu’il existe également un nombre maximum de connections au global, que ce soit d’un ou plusieurs domaines, ce qui renforce l’intérêt de diminuer le nombre de requêtes, dans tous les cas.

Paralléliser les requêtes ça signifie que pour permettre au navigateur de télécharger plus d’éléments en même temps, on va répartir le téléchargement des éléments sur plusieurs domaines ou sous-domaines afin de passer outre cette limite de connections maximum par domaine.

Mais on reste toujours limité par le nombre de connections maximales au global, qui diffère d’un navigateur à un autre d’ailleurs; il est de 35 sur IE 9.

Du coup, cette astuce est intéressante lorsqu’on a vraiment beaucoup d’éléments sur la page, beaucoup d’images par exemple. Il est pas non plus utile en général de dépasser 2 (sous-)domaines.

Il faut aussi rajouter à cela que plusieurs domaines, ça signifie plusieurs requêtes DNS supplémentaires, raison de plus de pas en abuser.

DNS: Pour « Domain Name Server », lorsqu’un navigateur demande une connection à un serveur, il doit traduire le nom du domaine en adresse IP.

 

Compression des éléments

compression gzip - exemple sur lesechos.fr

compression gzip – exemple sur lesechos.fr

On diminue, on parallélise, et on comprime. Le poids des éléments joue évidemment sur la vitesse à laquelle on les télécharge.

Pour gagner du poids sur ces éléments, plusieurs choses:

Pour les images:

Il faut veiller à choisir le bon format, jpg pour les photos (avec beaucoup de couleurs), gif pour les schémas simples ( peu de couleurs), png à éviter si possible et si pas besoin de transparence. L’idée est de trouver un bon compromis entre qualité visuelle et poids.

Pour les CSS et les JS

Il faut éviter d’utiliser des CSS ou des JS qui ne sont pas utilisés sur la page, d’enlever les commentaires, les espaces, etc…

Pour les vidéos

Il existe un petit outil gratuit et open source, très simple d’utilisation qui s’appelle handbrake pour compresser facilement les vidéos. Je l’ai découvert grâce à Wecomm qui a fait un très bon tutoriel sur handbrake

Comprimer avec Gzip ou deflate

Vos pages html, fichiers CSS et JS peuvent être comprimés côté serveur avant d’être envoyés au navigateur, cela permettra de faire gagner du temps sur le chargement de la page.

Cette opération de compression demande des ressources coté serveur ce qui implique quelques précautions:

  • Il ne faudrait pas gagner d’un côté pour perdre de l’autre. A tester donc, avant de foncer tête baissé, surtout si votre serveur est peu véloce. (En même temps, lorsque l’élément compressé est en cache…)
  • A ne pas utiliser sur des éléments déjà compressés, les jpg ou les pdfs sont déja compréssés par exemple.
  • La compression devient vraiment efficace sur des « gros » éléments (au dessus de 1ko). Si vous avez pleins de mini vignettes par exemple, il faut les exclure de la compression.

 

 

Mettre en cache

personnaliser les entetes d'expirations

Visualisation des entetes d’expirations pour le cache

La mise en cache consiste à mettre dans une mémoire temporaire une partie des éléments qui sont fréquemment demandés par un navigateur ou autres.

L’avantage principal est d’éviter de redemander sans arrêt une même ressource afin d’économiser de la bande passante, des ressources serveur et au final de gagner en vitesse de chargement.

Il y a plusieurs caches dont le cache du navigateur, des caches côté serveur et même des caches générés par votre CMS.

on peux par exemple personnaliser les entêtes d’expirations par type de contenu afin de contrôler combien de temps chaque élément doit rester dans la cache du navigateur de vos visiteurs.

On verra plus de détails pour la mise en place des caches dans le prochain guide qui traitera des optimisations côté serveur.

 

Répartir vos médias via un CDN

Fonctionnement du CDN cloudflare

Fonctionnement du CDN cloudflare

Il y a une limite à laquelle on ne peux pas grand chose c’est la distance géographique qui sépare vos visiteurs du lieu de votre hébergeur.

Car même si votre site est bien optimisé, plus un visiteur est loin de votre site, plus le chemin est long pour que les données lui parviennent.

Un CDN permet justement de rapprocher géographiquement votre site de vos visiteurs. Il existe plusieurs CDN comme Akamai ou encore Amazon Cloudflare, qui dupliquent les pages de votre site (ou certains éléments) sur plusieurs serveurs répartis aux 4 coins du monde, dans le but d’être distribuées par le plus proche du visiteur.

Il y a également d’autres avantages à l’utilisation d’un CDN comme la répartition des charges ou garantir une meilleure sécurité de vos données.

Ce sont des solutions pour la plupart payantes encore que cloudflare propose une solution  de départ gratuite et plutôt efficace.

Ceci dit, ces solutions trouvent surtout leur intérêt pour des sites internationaux et/ou des sites à fort trafic.

 

Retarder le chargement du javascript

L’objectif ici est de faire en sorte que le contenu soit affiché le plus rapidement possible. C’est un point essentiel pour l’expérience utilisateur et notamment sur mobile car le contenu au dessus de la ligne de flottaison doit s’afficher rapidement au risque qu’il quitte le site mobile.

Les sites sont de plus en plus bourrés de fonctionnalités javascripts plus ou moins utiles. Et ces scripts peuvent venir bloquer le chargement de la page, ce qui est un problème pour l’utilisateur mais aussi directement pour le SEO car Google prend en compte le javascript (pour en savoir plus, voir l’article sur Google et le crawl javascript).

De plus, dans son nouvel index mobile-first Google prendra en compte la vitesse de chargement sur mobile et avec la prise en compte du chargement des javascripts. Le javascript est souvent une cause importante de la lenteur d’un site sur mobile et il y a quelques solutions:

  • Mettre en asynchrone (attribut async) les scripts qui ne sont pas immédiatement utiles à l’affichage du site au dessus de ligne de flotaison
  • Différer (attribut defer) l’exécution à la fin du chargement du document.

Tester la vitesse de votre site

Si il y a une seule bonne pratique à retenir pour booster vos performances c’est de tester, tester, tester… sur ordinateur et sur mobile. Car ce qui est valable pour l’un ne le sera pas forcément pour vous. Avant de faire des modifications sur votre site, et c’est vrai aussi de manière générale, utiliser un serveur de test afin de valider vos modifs et faites les une par une.

 

Outils d’analyse et de conseils

Yslow

Sous la forme d’une extension navigateur, « Yahoo slow » analyse votre page et donne des conseils d’optimisations d’après les règles de bonnes pratiques de Yahoo.

Pagespeed

Pagespeed, comme yslow, analyse votre page puis vous donne une liste de conseils basés sur des bonnes pratiques. Il existe sous forme d’extensions et d’outil en ligne . Il calcule également un score sur lequel vous pouvez vous baser pour juger vos améliorations.

 

Outils pour tester la vitesse de chargement

Il y en énormément mais après en avoir testé quelques uns, j’ai sélectionné ces deux là:

Pingdom tools

simple à utiliser, fiable, pingdom tools permet de choisir le lieu du test et donne non seulement le temps de chargement de la page analysée mais aussi le score de votre page, les grands axes d’améliorations, un historique, et pleins de bonnes choses

GTmetrix

GTmetrix est assez similaire avec une interface un peu moins sexy mais possède le gros avantage de pouvoir comparer de deux jusqu’à quatre pages entre elles. Vous pouvez faire un avant opti / après opti par exemple.

Vous retrouverez aussi d’autres outils pour optimiser la vitesse des pages dans les outils pour monitorer vos performances.

 

Avec le prochain article, on va rentrer dans le vif du sujet avec des techniques avancées d’optimisations côté serveur. En attendant vous pouvez laisser un commentaire.

Guide SEO: optimiser les performances côté serveur >

    A propos de Serge Esteves

    Consultant SEO / Webmarketing : Techniques avancées en référencement combinées aux leviers du marketing entrant (UX, CRO, analytics, content marketing, ereputation, ..).
    0 réponses

    Laisser un commentaire

    Rejoindre la discussion?
    N’hésitez pas à contribuer !

    Laisser un commentaire

    Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *