Comment optimiser les performances de mon site ?

Chez Mutation Digitale, les performances d’un site web est au cœur de nos préoccupations. En plus d’être un élément essentiel pour un bon SEO, c’est d’autant plus important aujourd’hui avec la grande proportion des utilisateurs qui sont sur mobile avec une connexion plus basse. 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 sont au-dessus de 1MB.

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 à la quantité de temps avant que le serveur envoi la première byte au navigateur. Autrement dit, le temps que le code et les requêtes à la base de données prend pour être exécuté et 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.) et 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’optimisations en quatre parties :

  • La configuration du serveur
  • L’optimisation du code « backend »
  • L’optimisation du code « frontend »
  • Comment est-ce que l’on peut tester les performances.

Serveur

Évidement, 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 mis 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 considération :

  • Gzip, qui permet de compresser la requête HTML. Ça 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. https://www.digitalocean.com/community/tutorials/how-to-setup-fastcgi-caching-with-nginx-on-your-vps
  • Mod_pagespeed, un module de Google qui offre quelques gains de performance. https://developers.google.com/speed/pagespeed/module/
  • Activer le protocole HTTP/2 qui améliore la performance. https://http2.github.io/
  • PHP 7+. PHP a grandement amélioré ces performances avec la version 7 et il y a encore des améliorations avec la version 7.1. C’est donc recommandé d’utiliser la dernière version. S’assurer également que l’extension OPcache est activé.
  • 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. http://hhvm.com/
  • MySQLTuner, un outil pour bien configurer MySQL / MariaDB. Comme alternative, vous pouvez également utiliser PostgreSQL, MongoDB ou même du flat file. https://github.com/major/MySQLTuner-perl
  • 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:
https://github.com/h5bp/server-configs-apache/blob/master/dist/.htaccess

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 un frein majeur à de bonnes performances. C’est d’ailleurs un aspect très souvent négliger par certains développeurs qui vont simplement utiliser un outil préfabriqué.

Front-end

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

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.