Jump to content

Trop de monde sur le quai de chargement au chargement CSS


Recommended Posts

Bonjour,

Je savais depuis longtemps que j'avais un problème de chargement, perceptible sur smartphone. On m'a toujours dit ... "mais non, mais non, tout est normal sur ton site ...."

Il ne fait aucun doute qu'à la vue du de la copie d'écran ci-dessous, j'ai effectivement un soucis de chargement de ressources inutiles qui me pénalise lourdement. Et dire que depuis 6 ans j'avais le même fichier global.css dans le répertoire .../css/auto !!!

Quelqu'un saurait il m'aider à alléger mon global.css sur une version 1.6.1.24 ? Je ne suis pas un expert mais il parait que je me défends convenablement 🙂

Par avance, merci

 

 

Capture d’écran 2022-12-23 020053.jpg

Edited by billydom
changement de copie ecran (see edit history)
Link to comment
Share on other sites

Après quelques heures passées à éplucher le sujet, j'ai l'impression, (c'est même une réalité) presque 100% des CSS modules ont été mis bout à bout dans le global.css. Forcément, les css sont chargés deux fois même les CSS inutilisés.

N'est ce pas là qu'il faut chercher la réponse ?

Autre question stupide ...quel est "l'empilage" / ordre de chargement des CSS ?

Edited by billydom
hiden ? (see edit history)
Link to comment
Share on other sites

Il y a 6 heures, billydom a dit :

Voir messagerie,

Merci pour l'arrêt sur le quai 🙂

Bon, sinon dans votre cas ce qui vous pénalise n'est pas réellement le CSS inutile qui est présent sur tous les sites.

Actuellement, vous ne semblez pas avoir activé les éléments de bases pour améliorer les performances, les soucis de votre TTBF viennent certainement des codes des modules intégrés dans votre site qui n'utilise pas convenablement les fonctions de cache de PrestaShop ou peut-être que le cache est aussi mal configuré sur votre boutique.

Assurément que l'optimisation de certains éléments améliorerait les performances.

Un audit serait intéressant à faire.

Il y a aussi le fait que vous utilisiez une version de PrestaShop qui n'est pas compatible avec les dernières versions de PHP, donc ne profitant pas des améliorations des performances de ces nouvelles versions, donc une mise à jour vers une version PrestaShop 1.6 compatible avec les dernières versions de PHP et l'adaptation des modules pourrait améliorer aussi les choses et vous permettre d'éviter la bascule vers PrestaShop 1.7 et donc vous éviter à refaire tout le design.

Votre hébergement aussi doit avoir un gros impact sur les performances dans votre cas, vous pourriez certainement avoir mieux pour le même prix et peut-être même faire des économies.

 

Link to comment
Share on other sites

2 hours ago, Mediacom87 said:

Bon, sinon dans votre cas ce qui vous pénalise n'est pas réellement le CSS inutile qui est présent sur tous les sites.

Actuellement, vous ne semblez pas avoir activé les éléments de bases pour améliorer les performances, les soucis de votre TTBF .....

Votre hébergement aussi doit avoir un gros impact sur les performances dans votre cas, vous pourriez certainement avoir mieux pour le même prix et peut-être même faire des économies.

 

Effectivement si vous avez fait un test de performance ce matin, aucun cache n'est activé et la compilation est forcée à chaque appel afin d'y voir plus clair dans certaines modifications. 

Le sujet reste identique en activant les caches.

Dans le fond je n'ai pas trop à me plaindre des performances ; malheureusement notre ami Google fait la loi ...

Je pense que vous avez bien cerné mon problème ... éviter la migration vers 1.7 pour éviter de refaire le design et pourtant j'ai besoin de me sortir de cette impasse 1.6.

Vu vos galons de grand master et votre activité, ca vous dit d'en causer de vive voix ? Le numéro est sur le site ...
 

 

 

Capture d’écran 2022-12-27 104923.jpg

Link to comment
Share on other sites

Sur PageSpeed et GtMetrix, ils notent qu'il y a à peu près 2Mo d'images à charger ... c'est énorme. Et un peu plus de 1/2Mo de fonts ...

image.png.279ef07dae3132aa20c49bb26792c465.png

C'est sympa les trucs full width mais les images sont alors vite trop lourdes (surtout pour mobile car on charge des images de plus de 200Kb alors qu'elles ne s'affichent que sur 400-500 pixels, et Google juge d'abord sur les perfs en mobile). Le clic droit n'étant pas autorisé, difficile de voir la structure de la page. Mais déjà la première image a une largeur max et sur mon grand écran de 27", elle s'affiche à gauche avec une bande blanche à droite. Bon, ceci n'a pas d'impact au niveau des perfs, c'est juste une remarque. 
Mais donc, il y a beaucoup d'images (parfois lourdes) qui doivent se charger avant la fin du chargement de la page. La première chose à faire est donc de penser optimisation images : est-ce vraiment nécessaire d'en afficher autant, si grandes ? 

Si la réponse est oui, alors envisager l'étape suivante : format webp et lazzyloading. Il y a des modules pour cela. Qui transforment les images jpg en webp plus légères. Et qui ne chargent les images que quand le visiteur arrive dessus. En effet pas besoin de charger les images qui sont sous la ligne de flottaison (le bas de la fenêtre). Ou les images d'un slide qui ne sont pas encore affichées. C'est le lazyloading.

Troisième chose qui, à mon sens, est importante : mettre du texte avant la ligne de flottaison. Le texte, c'est léger. Google peut le lire et il lui donne plus de poids (intérêt) qu'à des images qu'il ne peut lire. Mieux vaut (c'est mon avis perso) une page d'accueil plus légère et mettre le paquet sur d'autres pages.

Quant aux polices, il faudrait supprimer celles qui ne servent pas.

Ensuite, bien sûr, il y a l'hébergement. Faut oublier un OVH ou un 1&1 ... Perso j'utilse O2Switch, pas plus cher mais bien meilleur.

Voilà donc déjà les 3 premiers points sur lesquels agir.

 

Edited by kerlin (see edit history)
Link to comment
Share on other sites

18 hours ago, kerlin said:

Sur PageSpeed et GtMetrix, ils notent qu'il y a à peu près 2Mo d'images à charger ... c'est énorme. Et un peu plus de 1/2Mo de fonts ...

 

Voilà donc déjà les 3 premiers points sur lesquels agir.

18 hours ago, Mediacom87 said:

Je confirme, c'est pour cela qu'il est dans mon top 3 des hébergeurs mutualisés pour PrestaShop

Merci pour votre contribution.

Je n'oserai pas remettre en cause ce qui a été ecrit et avec mes modestes compétences c'est le constat que je fait depuis 4 mois depuis que je dois me débrouiller tout seul parce tout semblait normal sur le site .... bref !

Effectivement ... l'optimisation des images ... qui étaient déjà en format webp  et pour certaines sont ressorties plus grandes que le format jpg. Le module webp a donc été supprimé en attendant le nettoyer le reste. Full size ... Nous vendons du rêve et non pas du vestimentaire ou de l'alimentaire. Les visuels doivent donc qui dont envie et font rêver. Peut être est ce une erreur .... !
Le lazyload n'est pas accepté par tous mes modèles sans une intervention sur le codage. C'est notamment le cas des images en version slide.

Sans même évoquer l'incohérence de certains chargement, j'ai également constaté que sur la version mobile des visuels sont chargées deux fois (c'est ce qui ressort d'ailleurs de la copie d'écran ci-dessus) et les fonts, je suis entrain de faire le point sur la suppression de l'une d'entre elles ... Ubuntu par exemple pour la remplacer par la native "fontawesome" par exemple.

Tout cela est grandement identifié mais le grand thème est que j'ai d'autres choses à faire plutot que de traiter chaque sujet en ayant pris soin de commencer par apprendre comment cela fonctionne.  Et là, je viens de me coltiner 20.000 lignes de CSS pour comprendre pourquoi il y avait des sélecteurs en double et des ressources chargées inutilement. Du jour au lendemain, la taille du global.css avait été multiplié par deux il y a 5 ans !

Migrer vers un autre hébergement ... pourquoi pas mais rien que de penser à l'énergie et au temps - et les emmerdes qui vont avec - j'en ai déjà frissons.

Trois questions me brulent les lèvres :

  1. Quelle est la mise en forme qui a le dernier mot sur la mise en forme finale ... global.css ou modulexxx.css ?
  2. Les fonts, vaut il mieux les mettre dans le global.css ou les regrouper dans un un seul fichiers séparé ?
  3. Ayant d'autres priorité au sein de l'entreprise, je n'ai pas / plus le temps de m'occuper de tout cela ... si vous avez de la disponibilité, l'envie de vous pencher sur l'affaire, en y incluant l’upgrade des 4 modules java ... faites moi signe - rémunéré bien sur ! Sinon vers qui me tourner sans que cela me coute le prix d'une migration

Voilà, en toute modestie ... et tout mon désespoir !

Link to comment
Share on other sites

Je crois surtout que vous mettez des priorités là où elles n'ont pas lieu d'être.

Le poids des CSS est infime sur l'ensemble d'un site surtout que cette partie vient en cache navigateur et donc n'impacte pas réellement la visite du site, s'il est préférable que cela soit propre il y a rarement d'urgence sur ce domaine.

Votre demande de mise à jour des librairies externes avec des risques de sécurité, là ce n'est pas simplement mettre à jour 4 fichiers, mais bien refaire l'intégralité du template et de PrestaShop, donc, si vous trouvez quelqu'un pour faire cela, n'hésitez pas à partager les efforts pour l'ensemble de la communauté.

Votre site a surtout besoin de suivi, et d'optimisation pour certains points, cela peut se faire ponctuellement ou être pris en charge sous forme de contrat de maintenance pour vous concentrer sur votre activité plutôt que sur la technique de votre site.

Link to comment
Share on other sites

Je partage tout à fait l'avis de Mediacom. Voyez le poids de votre css et le poids des images ... sans jeu de mot, y a pas photo !

Vendre du rêve oui. Mais si Google vous pénalise parce que votre site est mal optimisé, à qui allez-vous le vendre ? Il faut choisir un juste milieu.

D'ailleurs il n'y a qu'à voir ce graphique de Pagespeed pour s'en convaincre ...

image.png.50d953304ca4ca72b5cfbf75779cec64.png

Link to comment
Share on other sites

Tout dépense que quel page est fait le test.

Car sur un page catégorie, oui, il y a beaucoup d'images.

Sur une page produit, il y en a moins. Il n'y a pas de lien, donc difficile de vous aider.

Sur mon ancienne version en 1.6, j'avais ajouté des modules pour 'plaire' à google, mais y aura toujours des choses. J'avais pourtant testé les images webp, adaptatives…, mais qui rajoute du code plus, car un module par fonction.

Quand je suis passé en 1.7, je n'ai toujours pas plu à google.

Par contre, quand j'ai optimisé certaines choses simples, mais qui prend du temps, je suis passé à 3.1 secondes, à 2.4 secondes.

J'ai enfin réussi à valider les signaux essentiels

Link to comment
Share on other sites

vu les guillemets je me demande comment prendre votre message 😉

On vous a répondu pour le css, que ce n'était pas la piste à suivre. Et d'ailleurs, ni dans pagespeed, ni dans Gtmetrix ils ne parlent du css en première urgence.

Mediacom vous a dit ce qu'il pensait pour la mise à jour des librairies ...

Link to comment
Share on other sites

On 12/28/2022 at 1:57 PM, kerlin said:

..........D'ailleurs il n'y a qu'à voir ce graphique de Pagespeed pour s'en convaincre ...

image.png.50d953304ca4ca72b5cfbf75779cec64.png

 

 

Ce que vous n'aviez pas vu dans votre Analyse .... c'est que certains visuels étaient chargés jusqu'à 3x !

 

 

 

Link to comment
Share on other sites

L'aide est en cours. Nous nous préparons à publier notre CssPro CSS Performance Manager. Il fonctionne sur les boutiques clientes internes, il permet de supprimer le blocage du rendu CSS en ajoutant 'preload'.

https://drive.google.com/file/d/13Xh9OxRacwgtQmbpqsxNu-saR-GY6sk9/view?usp=drivesdk

Nous venons également de publier JavaPro, qui supprime le blocage du rendu pour les fichiers .js enregistrés sur PrestaShop.

https://drive.google.com/file/d/1_O7ITVtX9AUN1idLPo6MXD--t9ofnLZr/view?usp=drivesdk

Ces deux travaux visaient à prendre en charge les boutiques clientes internes qui ont beaucoup de fichiers .css et .js. et vendre 500k+ usd par mois ou plus....

 

 

 

Link to comment
Share on other sites

On 1/1/2023 at 9:24 PM, kerlin said:

Que ce soit 3 images chargées 1x ou 1 image chargée 3 fois, le résultat est le même : trop lourd. donc : pourquoi ce triple chargement ?

C'était une affaire image2x ... notamment pour les ecran retina - l'affaire est résolue et le poids n'est plus que de 2.2 Mo pour les 3.4 au parravant

 

1 hour ago, PrestaHeroes.com said:

L'aide est en cours. Nous nous préparons à publier notre CssPro CSS Performance Manager. Il fonctionne sur les boutiques clientes internes, il permet de supprimer le blocage du rendu CSS en ajoutant 'preload'.

 

👍 Ca c'est une super bonne news ... enfin l'arrivée tant attendue d'un module vs rocket ✌️👋

A quand la sortie officielle ?

Link to comment
Share on other sites

1 minute ago, billydom said:

It was an image2x case ... especially for retina screens - the case is solved and the weight is only 2.2 MB for the 3.4 previously

 

👍 That's great news... finally the long-awaited arrival of a module vs rocket ✌️ 👋

When is the official release?

Nous avons csspro et javapro en cours d'exécution dans nos boutiques clientes. csspro devrait être prêt à être publié dans une semaine, il fonctionne tel quel mais nous devons nous préparer pour les addons.


Javapro est indispensable, nous pouvons également mettre à jour les clients javapro lors de la sortie de csspro.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...