La vitesse du site est terrible
Je travaille en tant qu'apprenti développeur Web, qui a été laissé en charge de l'équipe Web (tous mes collègues sont partis) et qui se retrouve face à une tâche impossible.
Nous avons un serveur Windows à 10 cœurs, avec suffisamment de mémoire, et hébergeons plusieurs Joomla! sites Web, ainsi que des sites Web personnalisés HTML et PHP. Il n’ya aucun problème avec les sites Web personnalisés, le chargement est instantané. Cependant, tous les sites Web Joomla! (tous sont eCommerce ) sont si lents et peuvent prendre 30 secondes à charger.
J'ai effectué plusieurs tests de vitesse sur les sites Web et croyez-moi, je sais ce que la plupart d'entre vous pensent.
"Réduire la taille de l'image et compresser les CSS et JavaScript"
J'ai déjà fait ça. Le problème réside dans TTFB (Time To First Byte), car cela peut prendre environ 30 secondes .
Le site Web suivant vous montre le TTFB.
Ceci est juste l'un des Joomla! les sites Web que nous hébergeons et que nous pouvons fournir davantage si nécessaire. Vous pouvez également vérifier les vitesses en utilisant Google Chrome DevTools, mais il vous dira simplement la même chose.
Comme je l’ai dit, c’est cela qui est à l’origine du problème et qui serait grandement apprécié.
Merci d'avance.
Ok, commençons par le début.
Tout d'abord, vous devez exécuter le test Lighthouse de Chrome pour détecter tout problème lié aux performances. Dans Chrome, appuyez sur F12, puis accédez à l'onglet Audit.
J'ai effectué un audit sur Desktop sans limitation et les performances sont tout simplement terribles.
Commencez donc par désactiver le plug-in Joomla JCH Optimize afin de voir tous les actifs en cours de chargement.
1. Général:
Vous semblez charger beaucoup trop d’actifs et votre liste Node est supérieure à 4,5 Ko alors qu’elle devrait être inférieure à 1,5 Ko. Commencez à penser à modifier la structure de votre page et à déplacer certains éléments vers d’autres pages si nécessaire afficher uniquement le contenu critique sur la page d'accueil.
En ce qui concerne les nombreux actifs, par exemple, vous chargez 7 polices. Ce n'est tout simplement pas justifié. Si vous souhaitez charger FontAwesome pour les icônes, c'est assez correct, mais vous n'avez pas besoin de 6 autres polices pour styliser votre contenu. C'est une mauvaise conception. Choisissez une police pour votre marque, respectez-la et supprimez le reste.
2 - HTTP/2.0:
Obtenez un certificat SSL gratuit de LetsEncrypt , installez-le sur votre serveur, puis activez HTTP/2.0. Cette mise à jour modifie la façon dont les ressources sont récupérées et réduira ainsi le temps nécessaire pour les charger.
3 - LazyLoad:
Un bon site Web en 2018 affiche le code HTML en premier avec un petit morceau de code CSS critique afin que le chargement initial de la page ne soit pas omniprésent. Une fois que le HTML de base est chargé, vous chargez paresseux vos CSS, JS et images. Qu'est-ce que vous allez en train de charger tous les CSS et JS dans le <head>, ce qui signifie que le navigateur attendra la fin du téléchargement avant de continuer à restituer le reste du code HTML.
Je préfère le faire au niveau des modèles (plus rapide) que de compter sur des plugins ... mais par contre, je suis un développeur d'interface utilisateur et je développe donc mes propres modèles.
Vous voudrez peut-être envisager de créer votre propre modèle.
Quelqu'un avec qui j'ai personnellement travaillé sur le CMS Joomla a quelques bons tutoriels sur la création de votre propre modèle:
https://www.youtube.com/channel/UCSinMbPPdEPx6Hw5QcueITg/featured
4 - SVG'S:
Il y a plusieurs images sur votre site qui peuvent être des SVG au lieu de PNG. Vous chargez des images de 200 x 200 pixels et leur rendu est de 94 x 94. Commencez à utiliser des fichiers SVG qui, dans la plupart des cas, seront de taille plus petite et ne perdront pas en netteté lorsque la page est agrandie ou sur un appareil à rétine.
5 - Images:
Vos images sont tout simplement trop grandes pour ce qu'elles sont. Chaque image de curseur est comprise entre 250 Ko et 500 Ko. De plus, les images ne sont pas chargées paresseux. Pour des images telles que des photos ou tout ce qui ne fonctionne pas de manière optimale en tant que SVG, utilisez WEBP, un format développé par Google. Vous aurez besoin d'un repli pour les navigateurs qui ne le supportent pas.
5 - Mise en cache:
N'utilisez pas PHP pour mettre en cache vos ressources! Faites-le au niveau du serveur (Apache, NGinx, etc.). Consultez quelques tutoriels à ce sujet ou parlez-en à votre fournisseur/serveur d'hébergement amdinistrator.
J'espère que cela vous donne un peu de perspicacité pour vous aider à améliorer votre produit.
Avez-vous déjà effectué ces vérifications de base ?
1 - Activer la mise en cache Joomla
Cela va déjà considérablement augmenter votre temps de chargement de page
Allez dans vos plugins et ouvrez le plugin de Cache de page Généralement, il sera déjà configuré comme ceci:
Enregistrez et fermez-le
2 - Configurez votre cache TTL et comportement
Allez à Système - Configuration globale - Système (-tab)
- Activer la mise en cache sur "ON progressive"
- régler le temps de cache en fonction de ceci (à partir de nos mesures)
- 30 ou moins pour les pages très chargées avec plus de 200 visites par jour
- 60 pour les pages de charge moyenne avec plus de 100 visites par jour
- 120 pour les pages à faible charge avec plus de 50 visites par jour
- 240 pour des pages très chargées avec plus de 20 visites par jour
Nous avons accumulé ces valeurs après environ un an de mesure de plusieurs pages. Si vous avez plus de 200 visites par jour, vous saurez déjà ce que vous faites depuis la mise en cache. Mais une règle de base: si vous mettez à jour régulièrement votre contenu (disons toutes les 15 minutes), votre temps de cache doit bien sûr correspondre à vos besoins (15 minutes ou moins). Si vous pouvez vivre avec une livraison de contenu obsolète plus longue, vous pouvez bien sûr garder un temps de cache plus long.
Inconvénients Mais n'oubliez pas que sur n'importe quelle mise à jour joomla/plugin/extension, ce cache peut générer une erreur de 500. Dans ce cas, vous pouvez simplement déposer le cache dans le menu - Système - Effacer le cache (Supprimer tout). Mais ici, vous devez clairement le surveiller. Cela signifie que vous devez surveiller et vérifier!
3 - Ajouter un minifier et un plugin précaché
Il existe plusieurs plugins là-bas. En outre, cela dépend vraiment de la façon dont vous aimez le plugin. Tous font la même chose:
- minify CSS, JS, HTML
- concaténer plusieurs fichiers CSS en un ou plusieurs
- concaténer plusieurs fichiers JS en un ou plusieurs
- concaténer plusieurs fichiers HTML en un ou plusieurs
Parfois, ils peuvent même vous aider à améliorer la conversion ou la concaténation d'images en images-objets. Mais cela n'améliore pas tellement les performances de votre page. Ici vous faites le niveau de "cerise sur le gâteau"
Cela est généralement dû à un morceau de code mal conçu, à un mauvais plugin, à des erreurs ou à une mauvaise approche du code, et/ou à l'optimisation des requêtes mysql.
Parfois, il peut également s'agir d'une combinaison avec la configuration du serveur.
Vous devez déboguer et effectuer un certain nombre de tests et d'expériences, par exemple. désactiver les plugins, changer les modèles, etc.
Dans certains cas, des plugins d'optimisation tels que jch peuvent ne pas fonctionner correctement et entraîner un site Web plus lent.
Assurez-vous également d'utiliser les dernières versions de Joomla et de leurs extensions et signalez tout problème à leurs développeurs.