performance

Optimiser les performances de votre site web

En 2013, déjà 65% des entreprises françaises disposaient d’un site Internet (selon une étude de l’agence web 1m30).
Avoir un site web est devenu primordial pour communiquer et capter de nouveaux clients.
Lors de son élaboration, le côté esthétique, la qualité des contenus et l’expérience utilisateurs sont des éléments essentiels pour véhiculer une bonne image.
Néanmoins, il est tout aussi important d’analyser les performances web, qui généralement doivent être pris en compte avant la mise en ligne d’un site.

 

Qu’est ce que la performance web ?

La performance web peut se définir comme la vitesse d’affichage d’un site web et la perception qu’en a l’internaute. Une bonne optimisation permet de réduire le taux de rebond (pourcentage d’internautes entrés sur une page web et qui en ressortent juste après sans consulter d’autres pages) et d’être favorisée dans les classements de Google.

Sur Internet, l’internaute est assez exigeant. Il souhaite avoir accès rapide à l’information sans attendre trop longtemps. Il est constaté que 40% des visiteurs abandonnent un site s’il met plus de 3 secondes à charger. Ce chiffre montre une réelle attente des utilisateurs. Il est donc nécessaire d’optimiser les performances pour éviter la volatilité des visiteurs. Divers indicateurs doivent alors être surveillés : le poids de la page, le nombe de requêtes et le temps de chargement.

 

Taille totale de la page

Les sites actuels comportent de nombreuses images. Que ce soit sous forme de slider (images qui défilent) ou de pictogrammes, il est essentiel de faire attention au poids qu’elles représentent. Si les images sont trop lourdes, elles vont mettre beaucoup de temps à charger et l’utilisateur n’aura pas accès instantanément au visuel.

Pour bien optimiser le chargement des images il faut :

  • choisir le bon format : soit au format jpg qui est utilisé essentiellement pour les images de haute qualité et les photos ou le format png qui gère le niveau de transparence (idéal pour un logo par exemple).
  • Réduire la taille : Lorsque que vous prenez vous même une photo où que vous la téléchargez sur une banque d’images (Fotolia, Shutterstock) il est souvent amené que votre image fasse plusieurs Mo. Si vous avez plusieurs images sur votre page, il est nécessaire de compresser sa dimension pour respecter une taille qui ne dépasse pas les 100Ko.
  • Ajuster la résolution : Plus la résolution de l’image, exprimée en dpi (dots per inches) ou ppp (points par pouce) est élevée plus le poids sera important. Une résolution à 72 dpi est suffisante pour le web.

A noter : Pour l’utilisation d’images responsive (spécifique pour des plus petits écrans), l’attribut scrset permet de spécifier des images selon des tailles différentes. L’avantage est que le navigateur va afficher l’image choisie et en téléchargera qu’une seule.

Voici un exemple :

ex-scrset

 

Après avoir fait attention au poids des images, il est nécessaire de compresser les fichiers css et JavaScript pour améliorer le temps de chargement.
Il existe divers outils pour compresser ces fichiers :

Pour le CSS :

Pour le JavaScript :

Pour le css + le Javascript :

Yui Compressor : http://refresh-sf.com/

Cette compression va permettre une réduction de 20 à 30% sur la taille du fichier.

 

Réduire le nombre de requêtes HTTP

Une requête http est une demande effectuée par un navigateur web au serveur pour le téléchargement d’une page web.
Plus le nombre de requêtes est important plus le temps de chargement sera long. Pour minimiser le nombre de requêtes, plusieurs solutions :

  • La concaténation des fichiers JavaScript et css : Il suffit que vous ayez 5 fichiers JavaScript et 4 fichiers css pour que, lors de chaque connexion le site effectue au minimum 9 requêtes. Si vous rassemblez le JavaScript et le css cela ne fera plus que 2 requêtes (une css et une JavaScript).
  • Utiliser les sprites : Les sprites vont permettre de rassembler plusieurs images (généralement le logo et des pictos avec des rollovers) pour n’en faire qu’une : l’avantage est que le navigateur n’aura q’un seul fichier image à télécharger.

Les fichiers images sprites pourront alors être appelés depuis la feuille de style (css) aves la propriété background-position.

ex-sprites

 

Voici ci dessus un exemple de sprites ; Amazon regroupe les diverses images utilisées en header. Elles sont fixes et seront changer que très rarement.

Quelques outils pour générer des sprites :

http://spritegen.website-performance.org/

http://www.spritecow.com/

La diminution du nombre de requêtes http aura un impact positif très important sur le temps de chargement d’une page et donc de son affichage. Nous estimons que moins de 50 requêtes est correct pour un site web.
Voici un exemple d’un nombre de requêtes pour le site webaccess :

ex-requetes

 

 

D’autres indicateurs de performance

Le fichier .htaccess

Ce type de fichier est un fichier de configuration pour Apache, utilisé pour le serveur.
Placé habituellement à la racine du site, il est utilisé pour configurer des droits d’accès, gérer la réécriture d’URL et la compression ou encore ajouter des temps d’expirations.
Le temps d’expiration, appelé aussi le « expire header », permet d’indiquer une durée sur un fichier pour qu’il reste en cache et que le navigateur n’est pas besoin de faire des requêtes pour vérifier sa validité. Cela va donc diminuer le nombre de requêtes.

Voici un exemple :

ex-expiration

Sur cet exemple les images vont être en cache pendant un mois et les fichiers css/JavaScript pendant une semaine.

Le temps de chargement

Le temps de chargement peut se définir comme le temps nécessaire pour charger l’ensemble des pages web.
Google estime qu'un temps de chargement ne doit pas aller au delà des 1,5 secondes.
Pour avoir un temps de chargement acceptable il faut prendre en compte plusieurs critères :

  • l’emplacement du serveur
  • La puissance du serveur
  • Serveur mutualisé (partagé par plusieurs utilisateurs) ou dédié (serveur mis à disposition pour un seul client)

Ces critères vont avoir un impact direct avec le temps de chargement de votre site.

La mise en cache

Lorsque vous utilisez un cms (WordPress par exemple) vous utilisez souvent des plugins pour rendre le site plus dynamique.
Seulement le navigateur doit charger tous les éléments à chaque fois qu’un utilisateur se connecte et cela prend beaucoup de temps. C’est pourquoi qu’il est nécessaire d’utiliser des plugins de cache qui va permettre de charger une seule fois les éléments de la page. Un fichier statique sera appelé avant de lancer WordPress.

Voici des plugins gratuit de mise en cache :

 

 

Optimisation des performances : un impact pour le SEO ?

Lors de l’élaboration d’un site Internet, le client se préoccupe généralement de deux aspects : le design (site épuré, dans l’air du temps) et le SEO (référencement).
Si un site a un beau design mais très peu visible, c’est-à-dire qu’il ne remonte pas dans les premières pages de Google cela n’a pas forcement d’intérêt.
Des outils tels que Googlebot ou Google Anlytics vont permettre d’indexer votre site Internet et de mesurer son degré de visibilité.
Google est très regardant sur la vitesse d’un site Internet. L’entreprise avait même annoncé en 2010, qu’il y aurait des pénalités en cas d’affichage trop long.
Pour avoir un bon référencement, il est important d’enrichir le contenu de ses pages mais il faut aussi prendre en compte les performances web pour remonter correctement sur les moteurs de recherche.

 

 

Quelques outils pour tester sa performance

GTMetrix : Outil en ligne, qui prend en compte les critères de performance Yslow et PageSpeed. Plus votre site atteint la note maximale (A) plus votre site a de bonnes performances. L’outil affiche également le temps de chargement, le poids de la page et le nombre de requêtes.

ySlow : Outil opensource adapté selon les règles de Yahoo. Comme GTMetrix, les performances sont représentées sous forme de notes allant de A à F en prenant en compte les fichiers css, JavaScript, le poids des images, les cookies etc.

PageSpeed : Outil qui analyse les pages selon les règles de Google. Il permet de voir, suivant des notes sur 100 les performances à la fois sur ordinateur et sur mobile. Un point vert vous informe qu’il n’y pas de problème, un point d’exclamation jaune montre qu’il y a un petit problème mais que ce n’est pas trop impactant et un point d’exclamation rouge montre, par contre, que c’est un problème qui impact les performances de la page.