Comment optimiser votre site internet?

Est-ce que vous connaissez les méthodes d'optimisation moderne? Compressez-vous vos fichiers avec Brotli? Est-ce que vous avez un bon hébergeur web qui vous permet d'optimiser automatiquement votre site internet? Il y a beaucoup de façon d'optimiser un site, je vous présente plusieurs points qui pourraient vous aider à améliorer votre site, ou à créer un tout nouveau site internet optimisé et au goût du jour. Beaucoup de ces points ne demandent pas trop d'effort si votre site est déjà fait avec des technologies récentes et une fois mis en place, ne vous coûteront rien de plus. Même que vous pourriez économiser de la bande passante de votre hébergeur avec toutes ces optimisations! De plus, toutes les astuces de cet article sont déjà implémenté dans ce site!

Hébergeur web

Choisir un bon hébergeur web qui vous permettra un site web performant est la première étape. Il est important de regarder quel hébergeur répond le plus à vos besoins. Certains avec des plans gratuits vous vont ralentir votre trafic pour vous encourager à choisir un plan payant. D'autres offres des fonctionnalités très utiles versus la compétition. C'est le cas de Netlify! Cet hébergeur est très rapide, offre un plan gratuit parfait pour les petites et moyennes entreprises! Et si vous avez besoin beaucoup de visiteurs, leur plan payant reste très attrayant. L'avantage d'un tel hébergeur est la possibilité de faire beaucoup d'optimisation pour votre site, et ce, rapidement. Netlify peut faire la gestion de votre cache, minification de vos fichiers, même l'optimisation de vos images! Le tout compressé en brotli, qui est le format de compression dernier cris de Google, pour réduire encore plus vos temps de chargement de votre site internet! Netlify à plusieurs avantages aussi côté SEO, développement, fonctionnalité, envoie de formulaire et autre. Le tout gratuitement! Donc en plus d'être un hébergeur qui aidera votre entreprise à atteindre plus de clients grâce à un site plus rapide, vous pourrez offrir encore plus de fonctionnalité à vos utilisateurs!

Compression Gzip vs brotli

Est-ce que votre site actuel utilisation une compression pour réduire grandement vos fichiers? Vous pouvez tester votre site sur un site comme celui-ci: https://www.giftofspeed.com/gzip-test/ et vous saurez tout de suite si votre site utilise Gzip, brotli ou aucun des deux. Si je lance la vérification sur ma page d'accueil, je peux voir que celle-ci passe de 250.23kb à 39.2kb grâce à Brotli, ce qui est une compression de 84%! C'est certainement ce qui verra le plus gros impact sur la grosseur de vos fichiers, il est donc important de s'assurer que votre site retourne les fichiers de façon compressés! Quelle est la différence entre Gzip et Brotli? Les deux réduisent beaucoup la grosseur de votre site internet, mais Brotli est environ 15% plus performant. Développé par Google, celui-ci est plus récent et n'est pas encore supporté par tous les navigateurs, mais une grande partie l'accepte sans problème. Gzip est tout de même un bon choix pour les autres navigateurs. En utilisant un hébergeur tel Netlify, vous n'aurez rien de plus à faire, Netlify va lui-même compresser votre site avec Brotli ou Gzip selon ce qui est supporté. C'est une optimisation intéressante puisqu'une telle économie en grosseurs de fichiers vous permettra d'avoir un site encore plus rapide, tout en utilisant moins de bande passante de votre hébergeur. Que des avantages!

Optimisation d'image

L'optimisation d'image est très importante pour rendre votre site internet plus rapide, puisque des images mal optimisées peuvent rapidement rendre votre site lent, et le chargement de vos images se fera ressentir. Je conseille l'utilisation d'un site tel Cloudinary pour gérer vos images, puisqu'il vous permettra de mettre retourner des images optimiser pour le web. Il retournera lui-même le meilleur format d'image, ainsi que la grosseur requise. Une image mobile sera donc plus petite qu'une sur ordinateur, et un site bien fait saura faire la différence et demander à Cloudinary le format requis. Ce qui permettra donc à votre site mobile de charger vos images rapidement puisqu'il ne chargera pas une image très grande, mais demandera une image optimisée pour le mobile. Plus vous avez d'images dans votre page, plus qu'une gestion de vos images sera primordiale, car chaque image s'additionne! Par exemple, l'image utilisée pour cette page faisait originalement 200kb, ce qui était déjà bien pour débuter, mais une fois optimiser elle devient seulement 15kb! Ce qui est plus que 13 fois plus petit! Si vos pages contiennent plusieurs images, surtout de plus gros format encore, le gain se verra rapidement!

La division du code

La division du code (code splitting) à plusieurs avantages et peut rendre votre site internet plus rapide! Cela permet une meilleure compilation de vos fichiers pour permettre de maximiser leurs grosseurs et la quantité d'appels requise pour charger une page de votre site internet. Cette technique permet d'éviter de devoir charger chaque partie de votre site séparément, ce qui peut prendre du temps précieux puisque chaque appel peut rapidement ralentir votre site. À l'inverse, si tout est rassemblé dans un seul fichier, vos visiteurs chargeront un gros fichier, peu importe la page qu'ils visitent, ce qui est encore là un problème lorsque le but est d'avoir un site internet rapide! La division de code vient régler se problème, puisqu'en rassemblant les fichiers dans un seul par groupe, on vient minimiser la quantité de fichiers à fournir à l'utilisateur, tout en évitant d'avoir un gros fichier lent à charger. Si votre page d'accueil à beaucoup de contenu elle pourrait charger 2 fichiers, tandis que votre page de contact un seul par exemple. Plusieurs compilateurs offrent cette option de base, Nuxt par exemple le fait automatiquement lorsque vous générez votre site internet statique! C'est pourquoi la division de code est une solution rapide et peu coûteuse pour optimiser votre site internet!

La cache du navigateur

La cache de votre navigateur vous dit quelque chose? Vous l'utilisez chaque jour! Lorsque vous visitez un site internet, plusieurs fichiers, contenu, images sont mis dans la cache, ce qui signifie que si vous retournez voir la même page dans le futur, il se peut que le contenu se charge directement de cette cache sans devoir être redemandé au serveur! Lorsqu'un client retourne sur votre site, son navigateur regarde si les fichiers en cache sont toujours valides, selon votre site, il se peut que les fichiers soient valident pendant quelques heures, jours, indéfiniment. La cache de vos fichiers est donc un moyen qui peut avoir un grand impact positif pour votre site si bien utilisé! Pour des fichiers qui sont utilisés régulièrement et qui ne changent pas souvent, ça peut être bien de leur donner une date d'expiration plus longue, ce qui permettra aux visiteurs quotidiens de votre site de profiter d'une navigation plus rapide! Si c'est un contenu qui risque de changer rapidement par contre, il faut garder le délai plus court pour que vos clients aient tout de même le contenu à jour! C'est là qu'il faut trouver le juste équilibre, parce que si ont met un temps cours pour tout votre site, la cache perd de sa valeur et ne viendra pas optimiser votre site. Les sites que je développe, comme celui-ci utilisant Nuxt a un avantage, puisque lorsque le site est généré, le compilateur donne des noms générés avec chiffres et lettres au hasard, ce qui me permet de dire à votre navigateur que tous les fichiers provenant de mon site ne changeront jamais. Une fois en cache ils ne seront jamais invalidés, donc toujours d'actualité! Et la beauté de ceci est que lorsque je régénère une nouvelle version de mon site, les noms changeront et les nouveaux fichiers seront chargé la prochaine fois et resteront ensuite de nouveau en cache! Rien à faire de votre côté, et aucune crainte de servir un site daté à vos clients grâce à Nuxt qui génère des noms de fichiers différents pour chaque compilation! Avoir une cache bien gérer aideront vos clients à profiter d'une navigation plus rapide, mais aide aussi votre site puisque le serveur qui envoie les fichiers aux visiteurs sera moins sollicité! Une belle façon d'optimiser votre site internet tout en économisant!

Un site statique

Un site web statique à plusieurs avantages versus les sites générés plus à la demande. Comme votre site est déjà généré, ça fait une étape de moins aux serveurs, qui pourra simplement retourner les fichiers générés lors de la compilation à vos clients! Un site statique sera donc plus optimisé qu'un site qui doit faire des requêtes à une base de données pour monter une page! Avec un serveur tel Netlify en plus, dès qu'une modification est faite dans votre CMS par exemple, le serveur le sait et lance une compilation de votre site internet sans arrêter de servir votre site internet, donc une fois la compilation effectuée, le serveur changera automatiquement pour les nouveaux fichiers sans aucun temps d'arrêt pour vos clients! Les sites que développe sont tous avec cette technologie et je serais heureux de pouvoir vous permettre dans profiter aussi pour votre site internet!

JavaScript moderne

Le JavaScript est le langage qui permet de rendre votre site plus interactif, sans lui vos sites seraient beaucoup moins dynamiques. Le problème avec le JavaScript, est que chaque navigateur à son propre interpréteur de JavaScript, que ce soit sur ordinateur, mobile, Explorer, Chrome, Safari, etc. Donc il se peut que certaines fonctionnalités qui marche sur Chrome, puisse ne pas marcher sur une vieille version d'Internet Explorer par exemple. Pour prévenir d'avoir un site qui pourrait se briser dans un navigateur, les compilateurs vont aller ajouter les fonctionnalités manquantes directement dans votre site internet, donc que votre navigateur fonctionne ou non avec la fonctionnalité désirée, elle sera tout de même sur votre site par précaution. C'est pratique pour avoir un site internet stable sur tous les navigateurs, mais si vous utilisez un navigateur à jour qui contient déjà les fonctionnalités, ça devient du code en double. Lorsque l'ont veux optimiser notre site internet, ce n'est pas très pratique! C'est pourquoi lors de la compilation avec Nuxt, par exemple, il y a moyen de lui demander de générer 2 types de fichiers, un qui continuera de contenir toutes les fonctions nécessaires et un autre considéré moderne, qui ne doublera pas les fonctionnalités du navigateur. Lorsque le navigateur demandera les fichiers de votre site internet, s’il est considéré moderne, il chargera les fichiers sans doublons, ce qui permettra un chargement de vos pages plus rapide pour vos clients avec des navigateurs plus à jour! Le JavaScript moderne permet de fournir à vos visiteurs des fichiers plus petits, ce qui veut dire un temps de chargement améliorer! Si un client visite avec un navigateur qui n'est pas considéré moderne, il se verra servir les fichiers normalement, avec doublons, pour s'assurer que votre site ne rencontre pas d'erreur! Avec Nuxt, c'est tellement facile d'ajouter cette optimisation puisque ça n'est qu'une question d'activer la fonctionnalité et le reste est fait par le navigateur de vos visiteurs. C'est donc une optimisation rapide à mettre en place dans un nouveau site, sans inconvénient!

Minifier vos fichiers

Une autre optimisation possible pour votre site internet est appelée la minification de vos fichiers! Le but étant de minifier le plus possible vos fichiers lors de la compilation. Comment? En enlevant les espaces, les sauts de lignes, les commentaires, certain vont même jusqu'à changer les noms de variable par des lettres, donc au lient d'avoir une variable nommée 'maVariable' elle sera remplacée par 'aa' partout, ce qui rend vos fichiers un peu plus petits en économisant quelques lettres à chaque place que vos variables sont utilisées! Il n'est pas rare de voir un fichier minifier sur une seule ligne, c'est moins lisible pour un humain, mais ça ne fait aucune différence pour votre navigateur! Encore là c'est une optimisation qui est peu coûteuse et permet des gains!

Purge du CSS

Le CSS (Cascading stylesheet) représente le style de votre site internet! Parfois, surtout en utilisant des utilitaires de style par exemple, on se retrouve avec des styles non utilisé. La purge du CSS est une étape simple effectuée lors de la compilation de votre site, qui ira effacer les styles inutilisés de vos fichiers, c'est donc une étape qui se fera automatiquement et vous permettra d'optimiser votre site internet pour le rendre un peu plus rapide, puisque celui-ci n'aura pas à retourner à vos visiteurs des styles inutilisés!

Préchargement d'image

Il arrive souvent qu'un site internet doive afficher une image dans le haut de votre site, exemple une bannière. Pour ce faire, votre page doit se charger au complet avant que votre navigateur voie qu'il a besoin de charger une image. Ce n'est qu'à ce moment qu'il ira chercher l'image. Il y a désormais une nouvelle façon de gérer ce cas, qui est très utile pour les images qui seront affichées à vos visiteurs dès leur arrivée sur votre site. Il est possible de précharger l'image en question en ajoutant un lien vers l'image au tout début de la page. Ceci indiquera à votre navigateur que l'image en question doit être chargé immédiatement, puisqu'elle sera utilisée bientôt. Le reste de votre page se chargera normalement, et aussitôt que la page sera rendue à afficher l'image, comme elle a été préchargée, elle pourra s'afficher sans délai! C'est une optimisation simple qui permet de s'assurer que votre page s'affiche le plus rapidement possible! Avec un site bien développé par la suite, par exemple ce site, le tout se fait automatiquement pour chaque page sans devoir indiquer l'image nécessaire. C'est le genre d'optimisation qui peut faire la différence pour votre site internet actuel ou un tout nouveau à la fine pointe de la technologie!

Pour conclure, chaque point discuté aidera à avoir un site plus optimal, mais c'est en additionnant les optimisations que vous verrez la plus grosse différence sur votre site internet! Si votre site actuel ne tient pas compte de toutes ces façons de faire, vous pourriez perdre des clients potentiels. Il est donc important de faire le plus d'optimisation possible sur votre site internet! Si c'est quelque chose qui vous intéresse, pour un nouveau site, ou bien pour voir s’il est possible d'améliorer votre site existant, n'hésitez pas à me contacter! Il me fera plaisir de vous aider à atteindre vos objectifs numériques!