Dans cet article je vous explique comment j'améliore l'expérience utilisateur sur les sites que je développe en Symfony. J'explique plusieurs moyens de l'améliorer à différents niveaux.
Ces conseils fonctionnent également pour un site écrit en PHP pure, ou en n'importe quelle autre technologie du web. Cependant, je n'expliquerais que la partie liée à Symfony.
Un site rapide est primordial, car les visiteurs n'hésitent pas à le quitter s'il prend trop longtemps à charger. Et s'ils restent, ils peuvent rapidement devenir frustrés.
Il faut donc prendre soin d'envoyer le minimum de données au chargement de la page, et cela passe par les moyens suivant :
J'utilise le site iloveimg pour redimensionner les images des sites à la taille d'affichage, puis les compresses. Cela permet généralement d'économiser entre 30 et 70 pourcents du poids de l'image. Les vidéos elles aussi doivent être compressées au maximum, car c'est l'élément le plus lourd que l'on peut trouver sur un site.
Certains sites contiennent beaucoup de CSS ou Javascript inutilisée. Que ce soit une dépendance utilisé plus tôt mais abandonnée pour une autre, une police qui à changé, ou du style qui a été écrasé par une autre définition dans le css, il utilise une partie de la connexion pour se télécharger, et ralentis ainsi votre site.
Le lazy-loading est le principe de ne pas charger les éléments en dessous du viewport au chargement initial. Il peut être intéressant l'ajouter un attribut
loading="lazy"
à une balise img par exemple, pour en diférrer le chargement.
Parfois, comme pour une vidéo Youtube, il est nécessaire d'écrire un peu de Javascript qui va créer l'iframe au chargement de la page :
window.addEventListener("DOMContentLoaded", () => {
const src = "https://example.com/";
let frame = document.createElement("iframe");
frame.setAttribute("src", src);
document.body.appendChild(frame);
})
De cette manière, votre page chargera plus rapidement, et la vidéo sera chargée plus tard, quand le reste de la page sera entièrement chargé.
Le cache du serveur permet une plus grande rapidité d'accès aux données. Il est important d'utiliser des règles adaptées. Selon le serveur utilisé (Apache, Nginx...), les règles sont différentes, mais peuvent facilement être trouvé sur internet. Il est important de spécifier les règles pour chaque type de ressources, car certaines ressources sont amenés à changer plus souvent que d'autres (voir le tableau exemple en dessous).
Personellement, je suis adepte d'une longue durée de vie du cache, quitte à devoir le vider manuellement après mise en ligne de modifications. Cela permet de meilleurs performances, et un meilleur controle lorsque l'on souhaite le vider.
| Type de fichier | Durée de vie du cache | Explications |
|---|---|---|
| CSS / Javascript | 1 jours - 1 semaine | Les fichiers CSS et Javascript sont amené à changer régulièrement, au fur et a mesure que vous mettez à jour votre site. Ces fichiers ne changerons jamais ou rarement de noms, et il est donc nécessaire de définir une durée de vie pas trop élevée |
| images | 6 mois - 1 an | Les images elles ne sont que très rarement amenés à changer. De plus, dans le cas ou vous remplacez une image de votre site, le nom changera, ce qui créera une nouvelle entrée dans le cache de votre serveur, supprimant la nécessité de le vider. |
| HTML | 3mois - 6 mois - 1 an | Le HTML est la ressource principale de votre site. Il est important de le mettre en cache, avec une durée importante, car c'est à partir de lui que les autres ressources sont appelés. |
Que ce soit une requête Ajax, un chargement de page avec Turbo Drive ou autres, un loader peut réduire la sensation d'attente, et ainsi rendre la navigation plus fluide.
En plus d'améliorer l'expérience, un loader est facile à installer, il suffit d'afficher / cacher un gif !
L'UX Design est un domaine large, je ne vais pas vous expliquer sont fonctionnement aujourd'hui (je ne suis pas UX Designer). Cependant, il est important de faire le maximum pour que l'utilisation du site soit la plus intuitive possible. Par exemple, faites attention à la taille des textes (pas trop petit), à l'emplacement des boutons, et aux couleurs utilisées (pas trop de couleurs, mais avec un contrast suffisament élevé)
Il est également important de ne pas surcharger une page. En effet, il est plus difficile de se reperer sur une page chargée, et un design minimaliste est généralement plus apprécié
Sachez qu'il en existe d'autres, comme Tailwind ou Foundation, mais ne les ayant pas testé moi même, je ne vous en venterais pas les avantages.
Le "responsive" est la capacité d'un site à s'adapter aux différents appareils présents sur le marché. Si vous souhaitez que vos visiteurs passent un bon moment, il est important que votre site s'adapte aux appareils qu'ils utilisent.
Aujourd'hui, environ 60 pourcent du traffic internet est sur appareil mobile. C'est donc plus de la moitié de vos visiteurs potentiels qui passerons par là. Il est donc conseillé de privilégier un développement "mobile first" (appareils mobiles en premier).
Pour vous aider dans la conception de votre site mobile first ou l'intégration d'une version mobile sur votre site, vous avez la possibilité d'utiliser des librairies comme Bootstrap, qui, grâce à son système de grille, permet une adaptation à moindre frais vers la version mobile
Les popups, comme je suis certain que vous l'avez déja constaté, sont généralement mauvaise pour l'expérience utilisateur. Que ce soit pour demander un avis avant même que l'on ai eu l'occasion de voir le site, de demander un abonnement à une newsletter ou autre, elles sont généralement un frein à l'intéraction utilisateur, et peuvent même les faire fuire (personellement, je prend mes jambes à mon coups lorsque j'arrive sur ce genre de site)
Les animations sur un site internet peuvent être la cerise sur le gateau. Cependant, il ne faut pas en abuser. Ce qui fait la beauté des animations c'est leur relative discretion. Abuser d'animation risque de ralentir votre site, et ca, ca ne plait pas aux utilisateurs !
Toute fois, quelques animations discrètes peuvent apporter le petit quelque chose qui manquait à votre site, alors testez, et n'hésitez pas à les supprimer si vous trouvez que ca fait trop.
Pour animer votre site, vous pouvez par exemple utiliser Animate.css, une librairie css qui les facilite, ou encore Gsap. Attention encore une fois, il faut peser le pour et le contre : si votre site n'est déjà pas très rapide, est-ce vraiment pertinent d'ajouter encore une dépendance de plus ?
Animate.css GsapUn moyen pratique et efficace d'améliorer l'expérience utilisateur d'un site Symfony est d'utiliser
Turbo. Développé par Hotwire, la librairie permet notamment de donner au site un feeling de Single Page Application (SPA) : Turbo Drive écoute les clics sur les balises
<a>, les annule, et charge en arrière-plan la page demandée via fetch. Une fois la page chargée, il remplace alors le corps de la page actuelle (balise
body) par celui qu'il vient de récupérer.
Turbo Drive n'est que l'un des composants de Turbo. Je n'en parlerais pas, mais Turbo permet également de décomposer les pages en "Frames" avec Turbo Frames, de streamer du contenu avec Turbo Stream
Le site ressemble à un site conçu en React par exemple, car Turbo Drive permet de n'avoir qu'un unique chargement de page complet.
L'avantage principal de Turbo Drive, c'est son utilisation : il existe un bundle Symfony, Symfony UX Turbo. Ce bundle permet tout simplement d'utiliser Turbo Drive en une seule commande :
composer require symfony/ux-turbo
Voilà, c'est fait. Allez sur votre site, maintenant la navigation est plus rapide, et ne génère plus de chargement complet de la page !
Turbo Drive propose également un système de cache, activé par défaut. Il permet une navigation quasi instantanée si vous avez déjà visité une page. Il est également accessible dans votre code via l'objet
Turbo.cache, pour une utilisation plus avancée.
Cependant, si votre site utilise du Javascript, vous remarquerez rapidement qu'après un chargement de page, plus rien ne fonctionne.
Pas de panique, la solution est très simple : il suffit d'entourer votre code Javascript dans un event listener :
window.addEventListener("turbo:load", () => { /* votre code Javascript */ })
Grace à cet évènement, votre code sera relancé à chaque chargement de page, comme si elle chargeait normalement.
Turbo est une excellente librairie Javascript que je recommande largement. Elle propose des améliorations litéralement gratuites, et, via les autres librairie d'excellentes fonctionnalité en terme d'expérience et de rapidité.
Je l'ai découvert récemment, et l'utilise désormais pour mes nouveaux projets !
Pour ce qui est de l'optimisation de la vitesse du site, je vous invite à tester la vitesse de vos sites sur GT Metrix ou PageSpeed Insights, les deux utilisant la même technologie : Google Lighthouse. Vous pouvez également installer l'extension Lighthouse pour Chrome, qui permet de tester les sites localement.
Si vous souhaitez en savoir plus sur comment rendre votre site plus agréable d'utilisation, je vous invite à consulter les ressources suivantes :
Documentation PageSpeed Insight Les problèmes des popups