Dans la deuxième partie de cette série, j'ai décrit comment débloquer un niveau de performance de base de votre site Joomla avec quelques modifications simples. Aujourd'hui, nous plongeons plus profondément dans les médias statiques : JavaScript, CSS et fichiers image. Ces changements sont plus complexes mais peuvent transformer un junker d'un site lent en un site aux performances décentes. On peut soutenir que tous ces changements n'ont pas de sens pour tous les sites, mais les avantages en termes de performances que vous obtenez sont substantiels.
Une grande partie de votre site se présente sous la forme de fichiers multimédias statiques : CSS, JavaScript, images et éventuellement audio et vidéo également. Nous avons tendance à ne pas trop y penser, les considérant comme secondaires par rapport à notre contenu, mais ils constituent généralement la majorité des données transférées du serveur de notre site vers l'appareil de l'utilisateur lorsqu'il visite une page. De plus, l'analyse de fichiers CSS et JavaScript volumineux ou le décodage d'images volumineuses gèle le fil du navigateur principal, ce qui, en termes simples, signifie que le navigateur ne peut effectuer aucun travail pour rendre la page (il ne peut que télécharger plus de données en arrière-plan). De plus, plus vous avez de fichiers CSS, JavaScript et image, plus il faut de temps pour qu'ils soient tous chargés, ce qui signifie que le navigateur doit arrêter de rendre la page et tout recalculer à chaque fois que l'un de ces fichiers finit de se charger. Cela peut ralentir l'affichage de la page ou provoquer d'autres artefacts de rendu tels que le contenu qui saute sur l'écran (appelé "Layout Shift" dans le jargon du navigateur).
Optimisez vos images
Si vous avez un site riche en images, comme un blog ou un site d'actualités, la plus grande partie du transfert de contenu de votre page concerne les images. Vous avez probablement l'habitude de simplement prendre une image, de la télécharger avec le gestionnaire de médias de Joomla, peut-être de la redimensionner ou de la recadrer un peu - le gestionnaire de médias de Joomla 4 peut désormais le faire ! - et appelez-le un jour. Bon pour vous, mais vos images sont très probablement non optimisées et plus grandes (en kilo-octets, pas nécessairement en dimensions) qu'elles ne devraient l'être.
Peut-être connaissez-vous vaguement ou vivement des outils tels que pngcrush et mozjpeg . Si vous êtes à l'aise avec la ligne de commande, utilisez-les pour optimiser vos images.
Encore plus simple, il existe un outil gratuit appelé ImageOptim pour Windows, macOS et Linux qui peut exécuter plusieurs de ces outils sur vos images et choisir le plus petit fichier. C'est très simple. Faites glisser et déposez votre dossier d'images sur l'outil. Attendez que ce soit fait. Vos images sont remplacées par leurs versions optimisées. Évidemment, cela devrait d'abord être fait sur une copie locale de votre site. En cas de doute, conservez une copie de vos images originales car ImageOptim écrase vos images avec les versions optimisées.
Rendez vos images adaptatives
Vous savez déjà que votre site sera affiché sur des appareils avec différentes tailles d'écran : téléphones Android économiques de moins de 5 pouces, smartphones grand public de 6 pouces, phablets ou petites tablettes de 7 pouces et plus, tablettes de 10 à 11 pouces, 13 à 15 pouces. " ordinateurs portables et moniteurs de bureau massifs de 23" +. Vous avez déjà pris cela en compte en rendant votre site réactif, ce qui signifie que votre contenu s'adapte et que votre conception se déforme en fonction des modes d'interaction les plus appropriés à la taille d'écran de votre site.
Mais qu'en est-il de vos images ?
Lorsque vos appareils cibles vont d'un téléphone à budget large de 380 pixels à un ordinateur de bureau large de 5120 pixels, le même fichier image n'est pas approprié pour toutes les tailles. Si vous optimisez pour le petit écran, l'image sera floue et pixélisée sur le grand écran. Si vous optimisez pour le grand écran, la plupart de vos visiteurs téléchargent un fichier inutilement volumineux pour afficher une image beaucoup plus petite. L'optimisation pour la taille d'appareil la plus courante de votre public est le pire des deux mondes : les petits appareils téléchargent un gros fichier et les grands écrans affichent une photo floue.
Si vous commencez également à prendre en compte les appareils HiDPI avec des densités de pixels qui sont 2x, 3x ou 4x la densité d'écran standard (la norme est de 96 pixels par pouce), vous avez tout un casse-tête à résoudre. Optez-vous pour un fichier raisonnablement petit qui s'affichera mal sur de nombreux appareils ou un fichier volumineux qui s'affichera bien sur tous les appareils mais qui se situera autour de quelques mégaoctets ?
Heureusement, vous n'avez PAS à choisir. Les navigateurs supportent depuis longtemps les images adaptatives. En bref, en utilisant l' PICTURE avec les requêtes média appropriées, vous pouvez dire au navigateur de sélectionner automatiquement le bon fichier image pour l'affichage (résolution et DPI) sur lequel votre site est rendu. Si la taille de l'affichage change, par exemple si l'utilisateur fait pivoter son appareil de portrait à paysage ou redimensionne la fenêtre de son navigateur sur le bureau, le navigateur déterminera intelligemment ce qu'il doit faire. S'il a une image suffisamment grande, il la réduira. Si ce n'est pas le cas et que vous avez indiqué dans votre élément PICTURE qu'un fichier image plus approprié est disponible pour les dimensions requises, il le chargera à la place. Pendant le chargement de l'image la plus grande, la plus petite apparaîtra mise à l'échelle, de sorte que du point de vue de l'utilisateur, il y a un peu de flou dans les images qui disparaît en peu de temps.
Une autre chose magique que vous pouvez faire avec l'élément PICTURE est que le navigateur sélectionne le format de fichier qu'il prend en charge. La plupart des images sur le Web sont au format JPG ou PNG. Ce sont des formats d'image hérités, datant des années 1990 ou même avant. La plupart des navigateurs modernes prennent également en charge WEBP , un format de fichier image beaucoup plus efficace qui se traduit par des fichiers beaucoup plus petits tout en prenant en charge la transparence. De votre point de vue en tant que constructeur de site, c'est comme PNG sous stéroïdes. Malheureusement, vous ne pouvez pas tout convertir en WEBP, car les anciennes versions de navigateur (et toutes les versions de Safari) ne prennent pas du tout en charge WEBP.
À présent, vous vous serrez peut-être la tête de désespoir. Ce qui consistait simplement à télécharger un seul fichier image et à mettre une balise IMG dans votre contenu est maintenant devenu un casse-tête qui vous oblige à créer différentes tailles et types d'images. C'est difficile pour vous, l'intégrateur du site, et carrément impossible pour vos clients.
Heureusement, il existe des extensions Joomla tierces qui peuvent gérer cela pour vous. J'ai utilisé XT Adaptive Images Pro dans le passé. Il y a aussi Econa et peut-être d'autres - vous pouvez plonger profondément dans le répertoire des extensions Joomla où il y a une extension pour chaque besoin et budget.
Une autre option consiste à utiliser des remplacements de mise en page et un assistant qui crée automatiquement des versions réactives de vos images. C'est le code que j'ai contribué au modèle Lightning de Charlie Lodder. Si vous souhaitez créer des modèles personnalisés, vous pouvez facilement adapter ces remplacements de mise en page et la classe d'assistance pour les utiliser dans votre propre modèle.
Illustrations vectorielles
Un autre point à souligner à propos des images est que les illustrations (par opposition aux photographies) commencent généralement leur vie sous forme de fichier vectoriel dans quelque chose comme Adobe Illustrator ou Affinity Designer. Ce que nous voyons généralement, c'est que ceux-ci sont convertis en fichiers PNG transparents avant d'être utilisés sur un site. C'est la façon la moins efficace de s'y prendre.
Les navigateurs prennent depuis longtemps en charge les fichiers graphiques vectoriels évolutifs (SVG), de petits fichiers texte qui décrivent les graphiques vectoriels. Ils ont tendance à être beaucoup plus petits que les formats de fichiers optimisés pour la photographie (JPG, PNG et même WEBP), ils sont beaucoup plus compressibles car ils sont en texte brut et peuvent être mis à l'échelle à n'importe quelle taille de minuscule à énorme sur n'importe quelle résolution d'écran sans perdre la netteté .
Alors que dans Joomla 3, il y avait une absence flagrante de tout support SVG - ou même la possibilité de l'ajouter sans utiliser d'extensions tierces - cela est parfaitement possible dans Joomla 4 tant que vous l'activez manuellement . Allez dans Contenu, Médias et cliquez sur Options. Modifiez les extensions d'image légales (types de fichiers) pour inclure SVG, c'est-à-dire changez-le en :
bmp, gif, jpg, png, svg
Si vous avez activé la restriction des téléchargements (vous devriez !), modifiez également les extensions autorisées pour inclure svg, c'est-à-dire :
bmp,gif,jpg,jpeg,png,webp,ico,mp3,mp4,odg,odp,ods,odt,pdf,png,ppt,txt,xcf,xls,csv,svg
Si vous avez activé Vérifier les types MIME, vous devrez également ajouter image/svg+xml aux types MIME légaux, c'est-à-dire :
image/jpeg,image/gif,image/png,image/bmp,application/msword,application/excel,application/pdf,application/powerpoint,texte/plain,application/x-zip,image/svg+xml
Cliquez sur Enregistrer et fermer. Désormais, Joomla vous permet de télécharger des fichiers SVG et de les utiliser partout où une image est autorisée à être insérée.
Une dernière note de prudence : n'essayez pas d'utiliser des fichiers SVG dans des éléments qui s'attendent à obtenir leur taille à partir du contenu (les fichiers SVG n'ont pas de largeur et de hauteur fixes intrinsèques pour tous les soucis du navigateur, même si une peut être spécifiée dans le file) et n'essayez pas d'utiliser des fichiers SVG comme images d'arrière-plan. Il existe des moyens de faire les deux, mais il y a de fortes chances que vous souffriez inutilement.
Ne plaisante pas avec JavaScript et CSS
Au cours des 15 dernières années, plusieurs techniques ont été utilisées pour accélérer le chargement de JavaScript et CSS. Généralement, ils se résument aux techniques suivantes : combinaison de fichiers, minification de fichiers, GZipping de fichiers et déplacement du chargement JS/CSS vers le bas du document HTML.
Ne faites rien de tout cela. N'utilisez aucun plugin qui ne le fasse pas. Ce sont des idées incroyablement mauvaises dans Joomla 4 - et il n'en a pas besoin !
La combinaison de fichiers provoque de nombreuses situations de poules et d'œufs. Vous devez savoir quels fichiers de commande doivent être combinés dans chaque page de votre site et déboguer le désordre lorsque quelque chose ne fonctionne pas. Il résout également exactement zéro problème ; nous avons parlé de la façon dont les navigateurs téléchargent des éléments pour préparer la page à afficher le mois dernier.
Réduire les fichiers JavaScript et CSS à l'aide de code PHP est complètement contre-productif. Cela y a environ 12 ans, lorsque ces fichiers étaient très simples. JavaScript et CSS modernes ont besoin d'un code non PHP plus spécialisé pour les réduire, par exemple Babel et Closure. La plupart des développeurs minimisent quand même leur code et Joomla prend entièrement en charge les fichiers minifiés depuis les premiers jours de Joomla 3.0.
L'utilisation d'un plugin pour GZip vos fichiers est incroyablement inefficace et entraînera des temps de chargement de page plus longs. Le mois dernier, nous avons expliqué comment vous pouvez faire en sorte que votre serveur Web le fasse plus efficacement et indique au navigateur de mettre en cache les fichiers statiques.
Déplacer les fichiers JavaScript de l'en-tête vers le bas de la page pose problème. S'il y a un script en ligne dans l'en-tête ou le corps du document faisant référence à ce code, le développeur s'attend raisonnablement à ce qu'il soit déjà chargé, votre site apparaîtra cassé. Joomla 4 prend en charge le chargement de script différé et asynchrone. Si le développeur sait que son JavaScript peut le prendre en charge, il l'utilisera et cela aura à peu près le même effet (en fait, un encore meilleur !) que de déplacer JavaScript au bas du document HTML.
Enfin, déplacer CSS vers le bas du document HTML crée un problème plus important qu'il ne résout. Le navigateur rend la page entière sans style, puis lit la feuille de style et doit tout recommencer. Cela entraîne beaucoup de travail supplémentaire et ralentit le rendu de votre site tandis que, dans le même temps, la page clignote et se déplace au fur et à mesure qu'elle est restituée. C'est une expérience utilisateur horrible.
Alors, s'il vous plaît, n'utilisez aucun plugin qui fait ces choses pour soi-disant "optimiser" votre site. Celles-ci étaient pertinentes il y a une décennie, mais plus maintenant.
Utiliser un CDN
Le plus gros goulot d'étranglement des performances de votre site est la livraison de vos fichiers statiques : images, CSS, JavaScript, vidéos, audio. Ceci est exacerbé par deux facteurs intrinsèques à la possession d'un site : la bande passante disponible et la proximité avec l'utilisateur.
La bande passante disponible est la "limite de vitesse" à laquelle le serveur de votre site peut envoyer des octets à un client. Bien sûr, vous pouvez avoir une connexion Internet fibre Gigabit ou une connexion mobile 5G super rapide de votre côté. Si le serveur atteint 20 Mbps, c'est, ou plutôt une fraction de cela, la vitesse à laquelle tout le contenu de ce serveur arrivera sur votre appareil.
La proximité avec l'utilisateur est liée à la limite de vitesse ultime de l'univers : la vitesse de la lumière. Certains d'entre vous rient. Eh bien, c'est vrai ! Toutes les données provenant des serveurs de votre site passent par des connexions en fibre optique, c'est-à-dire une lumière laser guidée à travers des conduits de verre. C'est 99,9% de son voyage. Les 0,1 % restants peuvent être des câbles en cuivre (ADSL/VDSL), des micro-ondes (Internet par satellite, 5G, WiFi) ou des impulsions électriques (Ethernet). La lumière laser ne peut pas voyager plus vite que la vitesse de la lumière - en fait, elle se déplace à environ 0,9c, 90% de la vitesse de la lumière ou juste en deçà de 270 000 kilomètres par seconde / 168 000 miles par seconde. Si votre serveur se trouve à l'autre bout du monde, il doit parcourir environ 20 000 kilomètres, ce qui nous donne environ 75 millisecondes. Le transfert de données prend un aller-retour (envoyer la requête, récupérer le résultat) donc juste comme ça, nous avons 150 msec supplémentaires d'attente avant que quoi que ce soit ne vienne de ce serveur vers l'appareil de l'utilisateur. Plus le serveur est proche de l'utilisateur, plus le transfert de données est rapide.
Acheter plus de bande passante auprès de votre hébergeur peut être possible mais coûteux. Changer l'emplacement du serveur peut s'avérer peu pratique, surtout si vous desservez un emplacement géographique plus grand qu'un seul pays de taille européenne ou qu'un État américain.
La solution à ces deux problèmes consiste à utiliser un CDN (Content Delivery Network). Un CDN possède plusieurs serveurs appelés nœuds dans des centres de données partout dans le monde. Vos fichiers statiques sont mis en cache sur ces nœuds. Lorsqu'un client demande une page de votre site, le CDN transmet la demande à votre serveur, votre serveur exécute Joomla et renvoie le contenu HTML à l'utilisateur via le nœud CDN. Cependant, lorsque le navigateur demande le contenu statique de votre site - le JavaScript, le CSS, les images, etc. nécessaires pour rendre la page - le nœud CDN le met en cache et le délivre depuis le nœud le plus proche de l'utilisateur. Le CDN a également beaucoup de bande passante puisqu'il l'achète en gros pour beaucoup moins cher que votre hôte, ce qui signifie qu'il peut saturer une connexion Gigabit ou 5G rapide même si votre serveur ne le peut pas. L'effet combiné est un site qui se charge beaucoup plus rapidement.
Il existe de nombreux CDN. J'utilise CloudFlare car il s'agit d'un service combiné de CDN, d'optimisation de site et de sécurité de site. Les fonctionnalités d'optimisation qu'il offre peuvent gérer automatiquement la compression de vos ressources statiques si votre serveur ne le prend pas en charge. Selon vos besoins, il existe un niveau gratuit mais aussi des niveaux payants avec de nombreuses autres fonctionnalités.
Il n'est pas nécessaire d'utiliser un CDN. Si vous avez un site qui desservira une vaste zone géographique ou si vous vous attendez à ce qu'il soit martelé par des demandes, alors, oui, c'est quelque chose que vous devez considérer. Payer pour un CDN est généralement beaucoup moins cher et beaucoup moins pénible que de passer à un serveur dédié.
