La semaine dernière nous parlions de l'importance de l'hébergeur pour un site internet. Aujourd'hui, intéressons nous à l'autre partie : la performance d’un site web. Elle est essentielle, tant pour l’expérience utilisateur que pour le SEO. Un site lent peut entraîner un taux de rebond élevé mais aussi et surtout un mauvais classement sur Google. Découvrez les principaux facteurs qui ralentissent votre site, les solutions à adopter et également quelques outils pour vous aider à identifier vos problèmes.

Les images non optimisées

Les images trop lourdes ou mal dimensionnées augmentent considérablement les temps de chargement. Si vous ajouter sur votre site internet une image en 2000px * 2000px pour finalement ne l'afficher qu'en 500px * 500px c'est un chargement qui est inutile. Il est préférable de charger votre image aux bonnes dimensions dès le départ.

Au delà des dimensions, le poids des images est très important, il est donc nécessaire de compresser une image avant de la mettre en ligne. Cela vous économisera quelques Ko qui seront très appreciés pour les faibles connexions (3G, 4G...) mais aussi par les moteurs de recherches tel que Google, Bing ou même Yahoo.

Ordre de chargement des fichiers

Certains scripts, comme les fichiers JavaScript, peuvent ralentir votre site. En effet, lors du chargement d'une page web (sauf indication contraire), le navigateur va charger les éléments dans l'ordre d'écriture dans le DOM. Si un de vos éléments, tel qu'un fichier JavaScript met 3 secondes à charger, cela va décaler le chargement final de la page de 3 secondes. Vous comprendrez donc naturellement que si l'on multiplie les fichiers le temps de chargement s'accentue. Pour éviter cela vous pouvez jouer sur l'ordre de chargements des fichiers afin d'ajouter de la priorisation. On peut donc sur les appels de fichiers Javascript ajouter l'argument async pour notifier au navigateur qu'il peut le faire de manière asynchrone et donc ne pas empêcher le chargement de la suite. Mais il y a également l'argument defer qui permet de décaler le chargement d'un script à la fin du chargement de la page.

Attention, l'utilisation de ces attributs doit se faire de manière réfléchie afin que les fonctionnalités de votre site ne soit pas impactées.

Serveur inadapté

Un serveur lent ou mal configuré peut être un réel goulot d'étranglement. Il est nécessaire de penser à optimiser sa configuration ou bien de configurer un CDN tel que Cloudflare pour une distribution rapide du contenu. Si jamais le sujet du serveur web vous intéresse je vous invite bien évidemment à découvrir notre article de la semaine dernière qui traité justement du choix d'un bon hébergements web.

Librairies et frameworks inutiles

Les frameworks CSS ou les librairies JavaScript comme jQuery sont très répandus sur le web car elles facilitent réellement le développement. Cependant, il est important de rappeler que ces librairies alourdissent souvent inutilement les pages. C'est assez logique puisqu'elles importent de nombreux outils et fichiers que l'on utilise pas toujours. Il est donc souvent préférable de privilégiez des alternatives légères ou même lorsqu'on le peut une intégration personnalisée & sur-mesure.

Appels externes multiples

Les dépendances externes tel que les polices, les scripts..., augmentent les délais lorsque vous tentez de les appeler à l'extérieur de votre site. En téléchargeant des ressources sur votre serveur et en les internalisant dans votre application web, vous disposez d'une meilleure autonomie et de davantage d'optimisation possibles. Vous avez en effet la possibilité de choisir l'ordre d'appel des fichiers, de leur mise en place mais vous éviter surtout de créer un SPOF (Single Point Of Failure). Ce dernier point est important, si vous avez une ressource hébergée en externe qui est importante pour votre site, un carousel d'images par exemple, et que vous appelez la librairie en distant, si ce dernier ne répond plus vous perdez votre carousel. Cela peut être très impactant sur la page d'accueil d'un site e-commerce par exemple. Il est donc important d'identifier ces appels externes et de les internaliser dès que c'est possible.

Comment savoir d'où viennent les ralentissements de mon site ?

Si vous souhaitez identifier la source des ralentissements de votre site il existe de multiples outils pour cela. Certains sont très connus et très accessibles tandis que d'autres nécessitent des interventions direcmeent au niveau de votre hébergement web.

Les solutions accessibles (Pagespeed, YellowLab Tools...)

Ces solutions, les plus simples à utiliser, vous permettront d'identifier rapidement les premiers éléments à optimiser de votre site internet. Grâce à ces outils vous pourrez donc remonter les éléments les plus problématique votre site internet.

Google Page Speed Insights

Le plus connu de tous reste tout de même celui fourni par Google : Google Page Speed Insights. Cet outil vous permet de faire un audit rapide de votre site internet. En quelques secondes vous allez identifier les éléments qui peuvent impacter votre référencement naturel, les performances, l'accessibilité mais aussi les bonnes pratiques du web. Avec une note fournie sur 100, cela vous permet de voir les évolutions et les correctifs à apporter à votre site.

Yellow Lab Tools

Le second outil que nous pouvons vous recommander est YellowLab Tools. Cet outil est naturellement un peu moins connu que celui de Google mais il vous permettra de remonter des éléments un peu plus technique. Avec un audit rapide vous pourrez remonter les problèmatiques de protocoles HTTP, de caches ou encore des problèmatiques au niveau de vos polices ou de CSS.

Il en existe bien évidemment d'autres (PingDom, GTMetrix...) qui sont plus au moins complet mais on se rend compte au bout de 3/4 outils qu'ils remontent à peu près les mêmes données.

Les outils plus techniques (Blackfire, profiler SQL...)

Si malgré de nombreux audits sur les solutinos grands public tel que Google Page Speed, Lighthouse ou encore Pingdom vos problèmatiques ne sont toujours pas résolus, il est probable que vos problématiques proviennent du back-end de votre solution. Pour analyser cela il faut donc utiliser des solutions plus techniques à installer sur le serveur directement.

Profiler SQL

Si vos problèmes proviennent du back-end de votre site internet, il y a de grandes chances que le SQL en soit la cause. C'est souvent un goulot d'étranglement pour un site internet. Pour analyser cela il existe des Profiler SQL à installer sur votre projet. Si vous utilisez un CMS tel que Prestashop ou Wordpress vous pouvez utiliser des solutions déjà existantes. En une installation vous avez accès à un grand nombre d'information afin de vous aider dans l'identification de vos ralentissements et mêmes les correctifs. Sur Prestashop, un profiler SQL nous a permi d'identifier un grand nombre d'index à ajouter sur des modules mais nous avons également remarqué que le menu, géré via un module, générait un grand nombre de requêtes SQL. C'est donc un point à optimiser assez facilement soit avec une mise en cache, soit avec un menu à passer en statique.

BlackFire

BlackFire est un outil d'analyse et de monitoring d'application. Installé directement sur votre serveur il va analyser chaque requête entrante pour identifier les points problématiques. Grâce à lui vous pourrez notamment remonter les requêtes SQL lentes (slow queries) mais aussi mettre en évidence de grands volumes d'appels à certaines ressources.

En appliquant ces conseils, vous pouvez identifier & améliorer significativement la performance de votre site et offrir une meilleure expérience à vos visiteurs. Si cela vous semble trop technique ou que vous avez des questions, n'hésitez pas à nous contacter pour que l'on vous propose un accompagnement.