04 04
Comment optimiser les performances de votre site ?

Chez Mutation, les performances d’un site web sont au cœur de nos préoccupations. Il s’agit là d’un élément essentiel pour un bon référencement SEO. C’est d’autant plus important aujourd’hui avec la grande proportion des utilisateurs sur mobile dont la connexion est moins rapide.

Les statistiques démontrent que plus de la moitié des visites sont abandonnées si le temps de chargement dépasse 3 secondes. Pourtant, plus de 70% des pages que l’on retrouve sur le web n’atteignent pas la cible.

Pour s’assurer de bonnes performances, il y a principalement deux facteurs qui rentrent en compte, le TTFB (Time to first byte) et le temps de chargement total.

Le premier point réfère au délai avant que le serveur envoie le premier octet au navigateur. Autrement dit, le temps que le code et les requêtes à la base de données prennent pour être exécutés et pour construire la page HTML.

Le deuxième point réfère à la quantité de temps que le navigateur met pour charger la page en entier (javascript, css, images, etc.). Celui-ci est affecté par le nombre de ressources, la compression, la configuration serveur (caching, gzip), etc.

Nous avons donc pris en exemple la conception d’un site PHP et décortiqué les étapes d’optimisation en quatre parties :

  • La configuration du serveur
  • L’optimisation du code « back-end »
  • L’optimisation du code « front-end »
  • Comment peut-on tester les performances

Serveur

On doit tout d’abord s’assurer d’avoir un serveur suffisamment performant pour supporter le trafic anticipé ainsi que la charge que notre site va générer. Ce dernier point varie en fonction de l’architecture mise en place.

C’est pourquoi nous recommandons à tous nos clients l’utilisation de serveurs dans le nuage (cloud) qui offrent l’avantage de pouvoir « scaler » facilement en quelques clics.

Voici ensuite des aspects qu’il faut prendre en considération :

  • Gzip, qui permet de compresser la requête HTML, peut être configuré au niveau Apache/Nginx ou même dans le .htaccess du site web, par exemple.
  • Expires headers, qui permet de spécifier combien de temps le navigateur va garder en cache certaines ressources. Par exemple, on pourrait spécifier un an pour le CSS et un mois pour les polices.
  • FastCGI caching, un module Nginx qui sert de cache statique, donc lorsque le client fera une requête à la page, Nginx va retourner le HTML sans exécuter le code. Et c’est possible de « buster » la cache via l’application, par exemple lors d’une mise à jour du contenu via un CMS.
  • Mod_pagespeed, un module de Google qui offre quelques gains de performance.
  • Activer le protocole HTTP/2 qui améliore la performance.
  • PHP 7+. PHP a grandement amélioré ses performances avec la version 7 et il y a encore des améliorations avec la version 7.1. Il est donc recommandé d’utiliser la dernière version. S’assurer également que l’extension OPcache est activée.
  • HHVM est une machine virtuelle qui exécute le PHP en compilation JIT pour une meilleure performance. Par exemple, il peut y avoir quelques incompatibilités mineures avec certains aspects de PHP.
  • MySQLTuner, un outil pour bien configurer MySQL / MariaDB. Comme alternative, vous pouvez également utiliser PostgreSQL, MongoDB ou même du flat file.
  • Nous recommandons également l’utilisation d’un CDN pour les assets ou même pour le HTML !

Voici un exemple de fichier .htaccess avec différentes optimisations : GitHub.

Back-end

Après un serveur bien optimisé, le code de l’application est très important car il peut s’avérer dans certains cas être un frein majeur à de bonnes performances. C’est d’ailleurs un aspect très souvent négligé par certains développeurs qui vont simplement utiliser un outil préfabriqué.

  • Caching : plutôt que de faire des requêtes SQL à chaque load de page (ce qui est coûteux) ou effectuer de grosses opérations, il est préférable de garder en cache les résultats. Pour se faire, on peut utiliser APC, Memcached, Redis ou autre.
  • Éviter les redirections non nécessaires dans le code.
  • Minimiser le HTML.
  • Eager loading, ce qui permet de minimiser les requêtes SQL en pré-chargeant des éléments comme les images ou champs matrix dans un seule requête.
  • Optimisation des images avec le plugin Imager qui permet d’utiliser jpegoptim ou optipng par exemple.
  • Google Amp qui est un framework qui offrira des optimisations niveau serveur et front-end pour le mobile. Par exemple, le HTML est gardé en cache derrière un CDN, les images sont « lazy-load », etc.

Front-end

Voici différentes optimisations à faire au niveau client pour un « load time » plus rapide :

  • Combiner et minimiser le javascript / css. Laravel mix, un « wrapper » par-dessus Webpack, permet de facilement combiner, minimiser et faire de multiples autres opérations pour les « assets ».
  • Lazy loading des images en javascript en chargeant les images une fois qu’elles sont visibles dans le « viewport ». Voici une librairie : vanilla-lazyload.
  • Images responsives (avec srcset et picture).
  • Utiliser des polices d’icônes ou CSS sprites pour avoir moins de requêtes.
  • Web font loader, minimiser nombre de polices (et charset).
  • Utiliser les animations CSS ou requestAnimationFrame en javascript pour que le navigateur optimise les animations.
  • Éviter les librairies javascript si non nécessaires (comme jQuery) et charger certaines parties d’une librairie (ex : babel-plugin-lodash)
  • Charger le javascript de manière ASYNC.

Tests

Il y a de multiples sites web qui offrent les outils nécessaires pour tester la performance d’un site web. Ils permettent de tester le « load time » et donnent plusieurs conseils pour optimiser des aspects spécifiques du site :

On peut également utiliser Xdebug avec son « profiler » pour voir les bottlenecks dans son application.

Lire plus d'articles

Voir tout