Quoi optimiser en priorité pour plus de vitesse

Les outils qui existent pour tester la performance des sites Web offrent divers critères pour prioriser et trier les optimisations à prévoir. C’est très pratique et cela permet d’aiguiller les efforts à entreprendre avec des statistiques très précises (Page Speed Insights fournit, par exemple, quel est le gain de temps à espérer pour chaque optimisation).

Notre expérience nous permet cependant de vous lister un certain nombre d’optimisations à prévoir en priorité pour des résultats efficaces.

Les images, la source de perte de vitesse principale

Une belle image, c’est lourd. Et comme, de nos jours, tout le monde veut un beau site, très axé sur l’apparence, les problèmes de vitesse sont de plus en plus fréquents et difficiles à adresser. De plus, les développeurs et designers ne se soucient pas toujours de cette question, leur rôle étant trop souvent centré sur le côté esthétique et la réalisation d’une vision, d’une expérience très éloignée de la réalité d’usage. Malheureusement (ou heureusement), un beau site qui est lent n’a pas plus de valeur qu’un site peu plaisant à l’œil mais très fonctionnel !

C’est pourquoi il est toujours important de compresser les images au maximum. Si vous utilisez WordPress, des extensions telles que ShortPixel peuvent le faire automatiquement. Les autres CMS en disposent aussi. Retenez qu’une image ne devrait (idéalement) pas peser plus que 100 KB.

Il convient aussi de redimensionner ses images à la bonne taille (celle à laquelle vous l’affichez) sans utiliser du CSS ou du JavaScript. Des techniques avancées, telles que l’attribut srcset, peuvent aider.

Commencez donc votre travail d’optimisation au niveau des images. Et prenez le réflexe de les optimiser lorsque vous créez du contenu. Cela fera une grosse différence.

Temps de réponse du serveur

Un autre problème commun concerne le temps de réponse du serveur. Il s’agit du laps de temps qu’un serveur met à répondre à une requête. Plus il est long, plus le temps de chargement d’une page va en pâtir. Il s’agit d’une question très importante, car cette étape est à la base du séquençage du processus de chargement global d’une page. Le temps que le serveur met à répondre est la première perte de secondes à laquelle on fait face. Si vos pages sont bien optimisées, mais que votre serveur est lent, vous ne pourrez pas faire grand chose.

Les outils que nous avons mentionné au sein d’un autre article de notre blogue adressent cette question. Si vous constatez grâce à ceux-ci que le temps de réponse de votre serveur laisse à désirer, tentez d’analyser les statistiques de performance issues de votre hébergeur (si possible). Google Analytics peut aussi vous donner des indications. Vous pouvez, par ailleurs, faire des tests de charge. 

Si vous remarquez que votre serveur est souvent à la peine (processeur et mémoire vive), il pourrait être bénéfique de passer à une machine plus puissante qui répondra mieux à vos besoins (ou/et à un serveur plus proche de vos usagers). Tout dépend de la configuration dont vous bénéficiez et des besoins requis pour faire face aux requêtes quotidiennes (plus de trafic requiert plus de puissance en général).

Autres optimisations principales

Il existe bien d’autres optimisations que tous les outils vous listeront comme prioritaires et qui sont souvent “faciles” à mettre en place. Les premières concernent la configuration du serveur : la compression GZIP d’un maximum de ressources, la mise en cache du navigateur (encore pour un maximum de ressources), le passage au HTTP2, l’utilisation du protocole HTTPS, etc.

Les secondes s’appliquent au niveau des ressources chargées. Outre les images, dont nous avons déjà parlé, il est recommandé de minifier les fichiers HTML, JavaScript et autres scripts comme les feuilles de style CSS, surtout si vous en chargez beaucoup.
De nombreuses autres recommandations concernent les ressources chargées : il convient de ne pas en appeler en utilisant plusieurs URLs ou en pointant vers des redirections, entre autres.

AMP, une solution pour mobile

La technologie AMP (pour “Accelerated Mobile Pages”) a été créée par Google pour justement permettre des sites Web bien plus rapides sur mobile. Elle consiste en du HTML et des librairies (JavaScript) simplifiés pour des pages plus légères. Ces dernières sont généralement mises en cache sur les serveurs de Google, ce qui permet d’obtenir de très bonnes performances (moins de 3 secondes).

Il peut donc s’agir d’une solution pour les plateformes fortement portées sur le contenu, pour lesquelles la vitesse est cruciale et le trafic mobile est clé. Mais l’AMP peut s’avérer lourd en termes de développement et n’offre pas nécessairement une expérience utilisateur optimale ou cohérente. Pensez-y donc à deux fois avant de vous lancer.

Notez que pour les sites WordPress, il existe des extensions très puissantes pour facilement mettre en place une version AMP.