En seulement quelques changements, vous pouvez considérablement augmenter la performance de votre site web. Les quatre astuces suivantes s’attachent à examiner quels sont exactement ces changements, comment faudrait-il idéalement les réaliser et quels aspects doivent être particulièrement pris en compte.
Imaginez que vous êtes en train de surfer sur le web et que vous voulez réserver vos prochaines vacances en ligne. Le site web affiche les informations lentement, trop lentement, morceau par morceau. Vous attendez, faites défiler et puis quittez finalement la page après dix secondes, légèrement agacé, à la recherche d’une autre agence de voyage en ligne.
Selon l’étude de Akamai, un temps de chargement lent d’un site web peut nuire au comportement du visiteur et dissuader des clients potentiels. Au total, 57% des internautes attendent trois secondes ou moins avant de quitter le site. En outre, toujours selon cette étude, deux tiers des 18-24 ans n’attendent pas moins qu’un temps de chargement de moins de deux secondes.
Mais pourquoi le temps de chargement moyen des sites web d’aujourd’hui est toujours de huit secondes environ ? (uxmag, 2014)
La réponse est : un article de Webperformancetoday (2014) montre que les sites web d’aujourd’hui sont plus grands et plus lents qu’il y a un an. Une étude sur les tendances de httparchive confirme également ce fait, en s’appuyant sur l’augmentation de la taille moyenne des sites web d’octobre 2014 à octobre 2015.
Illustration 1 : taille moyenne d’une page web entre octobre 2014 et octobre 2015
La performance est définie comme la puissance de traitement d’un ordinateur. Elle est généralement mesurée en MIPS, c’est-à-dire millions d’instructions par seconde, ce qui est considérée comme "une mesure de la performance du traitement de l’unité centrale" d’un ordinateur. On peut également parler de vitesse du site web, ce qui représente le temps de chargement d’un site web.
La vitesse du site est un élément important dans le puzzle de l’algorithme de classement de Google. Parce que Google mène ses évaluations en se basant sur l’expérience utilisateur et parce que la vitesse de chargement d’un site web en fait partie.
Walmart.com a par exenple pu obtenir une augmentation de plus de 2% de son taux de conversion et une augmentation de 1% de ses ventes pour chaque seconde raflée sur le temps de chargement, toujours selon une étude de uxmag (2014).
Dans l’autre sens, chaque seconde qui retarde le temps de chargement a les effets négatifs suivant :
Le temps de chargement d’un site web peut être amélioré en réduisant et optimisant le nombre de données qui sont affichées. L’illustration suivante montre le contenu d’un site web moyen et la taille moyenne des éléments qui le composent.
Illustration 2 : bytes moyens du contenu d’un site web (source : httparchive, 2015)
Afin de minimiser les fichiers CSS et JavaScript, vous pouvez retirer les espaces blancs inutiles. Selon une étude menée par Yahoo, vous pouvez ainsi réduire la taille de votre site web d'environ 21%.
Comment faire :
Extrait d’un code CSS avec des espaces blancs :
Extrait d’un code CSS sans espaces blancs :
Des outils de minimisation peuvent être utilisés pour réduire les fichiers CSS et JavaScript, comme YUI Compressor ou cssmin.js. Closure Compiler ou YUI Compressor sont également tous les deux adaptés pour réduire le JavaScript JSMin.
Une page web s’affiche uniquement une fois que tous les fichiers JavaScript et CSS ont été chargés. Si les fichiers JavaScript sont placés au début du code dans un serveur qui charge lentement, il y a de bonnes probabilités qu’une page blanche soit affichée aux utilisateurs, et ce durant tout le temps de chargement.
Ainsi, pour assurer la meilleure expérience utilisateur, les fichiers JavaScript devraient être chargés à la fin. De cette façon, le contenu du site web sera affiché en un court laps de temps, et ce malgré un serveur qui met du temps à charger.
Des fonctions supplémentaires, comme des boutons d’appel à l’action et qui sont chargées à la fin au moyen du JavaScript, peuvent en effet être affichées plus tard.
Le CSS devrait être idéalement installé dans les en-tête et le JavaScript dans le bas de page du code source. Ainsi, le code source pourrait ressembler l'illustration 3.
Exemple du code source avec le fichier CSS dans l’en-tête et le fichier JavaScipt dans le bas de page :
Le CSS et le JavaScript constituent une grande partie du code source. Si ce dernier doit être à chaque fois lu par le moteur de recherche pour charger totalement, ça peut prendre beaucoup de temps.
Une bonne façon de diminuer la taille du code source est d’externaliser les fichiers CSS et JavaScript. Idéalement, les fichiers CSS et JavaScript pourraient être fusionnés en un seul document.
De plus, si le navigateur a mis en cache le fichier externe (ce qui signifie qu’il ne doit être chargé qu’une seule fois), un temps de chargement précieux peut être économisé.
Afin que la mise en cache fonctionne correctement, les en-tête Expires ou Cache-Controle doivent être intégrés. Cela voudrait inclure la date à laquelle le fichier doit être mis en cache et servir ainsi au navigateur pour la validation des données. Google recommande d’utiliser l’en-tête Expires et d’en définir la date d’expiration à une semaine au moins, et jusqu’à un an.
Comment faire :
Exemple d’un JavaScript externalisé :
Coupez les fichiers JavaScript à partir du code HTML et collez-les dans un éditeur de texte externe (comme Wordpad ou texte simple) au sein d’un nouveau document. Enregistrez ce document en tant que "main.js" au sein du dossier dans lequel sont stockés tous les autres documents HTML. Supprimez ensuite toutes les commandes suivantes dans le code HTML :
et
Intègrez à la place la commande suivante :
Le frontend d’un site web et ses composants tels que les images, feuilles de styles, scripts, flash, etc, mobilisent plus de 80% du temps de chargement total. La réduction du nombre de requêtes HTTP peut améliorer la vitesse du site web.
Les requêtes HTTP sont des chemins de communication du navigateur jusqu’au serveur. Une requête peut être un document, une image ou une vidéo affiché par le navigateur sur le site web.
Cela peut être fait grâce à un design simplifié, par exemple en supprimant les fichiers images simples du code source.
Si vous êtes satisfait de votre design et ne souhaitez rien y changer, il vous reste une dernière option : la création de sprites CSS.
Plusieurs images de fond d’écran peuvent être combinées en une seule image grâce aux sprites CSS. La position de chaque section d’image peut être précisément définie dans les réglages CSS. Cela permet de faire savoir au navigateur ou et sur quelle sous-page le sprite CSS doit être affiché.
Comment faire ?
Combinez toutes les images de fond d’écran en un seul sprite CSS. L’image d’ensemble qui en résulte pourrait ressembler à ci-dessus (Xing).
Illustration 3 : un exemple de sprite CSS par Xing
Afin que le navigateur puisse lire la position exacte de chaque morceau d’image et les affiche correctement sur la page, tous les alignements horizontaux et verticaux doivent être précisés dans les réglages CSS.
Le code CSS peut ressembler à cela :
Voici l’apparence du code CSS avec les informations relatives à la position horizontale et verticale :
Les images font partie des éléments qui constituent la plus grande partie d’un site web. Dans la figure 1, on peut voir que les fichiers images comptent 1054kB, soit 62% de la taille moyenne de la page, qui est de 1710kB.
Les fichiers images peuvent être optimisés pour la page web que tu administres en utilisant Photoshop et en les sauvegardant au format page web. Les images seront donc réduites et chargeront plus rapidement.
Si une page possède beaucoup d’images dans le cadre de son contenu, leur temps de chargement peut aussi être réduit grâce à l’utilisation d’un CDN (Content Delivery Network). En d’autres termes, les images sont sous-traitées à l’extérieur du serveur et donc mises à disposition plus rapidement.
De plus, dans l’optimisation de la taille des images, il est important de sélectionner un format de fichier correct.
Une étude de httparchive nous donne des informations sur la taille moyenne de chaque format de fichier :
Illustration 4 : source : httparchive
Selon ce graphique de HTTP Archive, le format HTML possède la plus petite taille de fichier, avec une moyenne de 6kB. Les GIF, avec leur 8kB, procurent aussi une petite taille de fichier qui peut être utilisée pour une optimisation des images.
Cependant, une quantité minime peut aussi dans certains cas signifier une faible qualité. Ainsi, le mieux reste d’utiliser le format JPEG pour une haute résolution d’images (source : uxmag, 2014).
Des outils, tels que jpegtran, jpegoptim (pour les fichiers JPEG) ou OptiPNG, PNGOUT (pour les fichiers PNG) peuvent être d’une grande aide dans l’optimisation de la taille des images.
À noter que le format du fichier dépend généralement de l’image même.
Ainsi, les points suivants s’appliquent :
Comment faire :
Pour que le navigateur n’ait pas à calculer les dimensions de l’image, vous devriez toujours spécifier dans le code la taille selon laquelle l’image doit être ultérieurement affichée.
La taille originale devrait être la même que celle spécifiée dans le code, afin que le navigateur n’ait pas d’abord à télécharger l’image sous sa taille originale, puis à la réduire.
Aujourd’hui, les utilisateurs veulent qu’une page web soit totalement chargée en moins d'une seconde. Si ce n’est pas le cas, leur satisfaction peut en pâtir. Pour les sites de e-commerce, cela peut aussi avoir un effet négatif sur le taux de conversion et résulter en une perte de revenus.
Afin d’optimiser le temps de chargement d’un site web, l’optimisation du code a une importance particulière car ce dernier contient toutes les informations requises par le navigateur pour afficher la page correctement. Seulement quelques étapes d’optimisation peuvent aider à une réduction considérable du temps de chargement.
La vitesse du site web peut être régulièrement contrôlée et surveillée à l’aide de certains outils, tels que Google Analytics, Google Page Speed ou des outils spéciaux d’analyse SEO comme Ryte.
Rien ne vaut la pratique ! Fais analyser ton site web avec Ryte FREE !
C’est parti !Écrit le 23.01.2017 par Irina Hey.
Irina est conférencière et experte dans le domaine de l'acquisition de clients, de la génération de prospects et du data driven marketing. Jusqu'en avril 2018, elle était Product Owner Acquisitions chez Ryte et coordonnait toutes les activités stratégiques liées au marketing.
Suivi, analyse et optimisation de vos actifs numériques grâce à notre technologie unique
S’inscrire gratuitement