Alléger des pages trop lentes à charger

webmestre amateur · 8 Mars 2017

Bonjour à tous,

Le problème a certainement du être déjà posé mais je n'ai pas trouvé de réponse à mon cas.

Ayant fait un audit de mon site, certaines pages s'avèrent trop longues en temps de chargement parce qu'elles contiennent trop de mots : celles-là contiennent 1500 mots en moyenne et le nombre de mots sur ces mêmes pages a tendance à toujours augmenter.
Le site est un site vitrine d'une Tpe qui commercialise des produits et des services.

Ces pages trop longues correspondent à des produits pour une catégorie donnée (par exemple rosiers grimpants pour une jardinerie ou scies électroportatives pour un magasin de bricolage). Les pages s'allongent de plus en plus au fur et à mesure que l'on rentre des articles.

J'avais bien pensé à scinder les pages produit en plusieurs sous-pages produits. Mais d'une part, je ne vois pas trop comment faire et d'autre part, cela risque de soulever d'autres problèmes comme des balises title, méta description ou mots clés identiques.

J'utilise wordpress.
Comment procéder ?

Merci d'avance de vos réponses.

nico-digital · 8 Mars 2017

Bonjour,

Je trouve étonnant que le contenu texte puisse ralentir significativement le chargement de la page web. Etes vous sur que vos images sont bien optimisés? Si vous n'êtes pas sur vous pouvez diminuer grandement le poids de vos image sur le site compressor.io, vous avez aussi la possibilité d'utiliser un plugin wordpress qui va compresser vos images (par exemple EWWW image optimiser) mais il en existe plein.

De même il est possible que le temps de chargement vienne d'un autre problème, utilisez vous un plugin de cache? Utilisez vous un plugin de compression gzip? Quel type d'hébergement utilisez vous?

Nicolas

webmestre amateur · 8 Mars 2017

J'ai oublié de dire qu'avec chaque produit présenté, j'insère une photo (au format 300 x 225). Il y a par exemple sur ces pages 20 à 30 photos ou plus. Ce sont des photos cliquables.
D'après l'audit, le temps de chargement pour ces pages longues est > à 600 ms et pour l'instant, inférieur à 1000 ms. Mais je risque d'arriver sur les 1000 et + ms au fur et à mesure que les pages vont se garnir.

Je n'utilise pas de plugin pour compresser les images. J'adapte toujours la taille des photos avant de les mettre en ligne.

Pas de plugin de cache, ni de compression gzip.
Hébergement chez ovh. L'hébergement ne me semble pas en cause puisque le temps de chargement concerne les pages bien ou très documentées.

Merci de ta réponse.

nico-digital · 8 Mars 2017

Il faut absolument que tu optimise le poids des images, le format est une chose, le poids en est une autre.
Surtout si tu as 20-30 images, imagines si elles font toutes en moyenne 100 ko, tu te retrouve avec des pages a 2 ou 3 Mo qui seront très longue à charger.

Donc premier conseil, installe EWWW image optimiser sur wordpress, c'est gratuit (extensions> ajouter une extension> recherche "EWWW image optimiser" > Installer > activer) Tu auras une nouvelle option dans la partie administrateur de wordpress et c'est assez facile à comprendre pour configurer, tes nouvelles images seront automatiquement optimisés.

Deuxièmement, je te conseille le plugin "Lazy Loading" qui va permettre à tes images de se charger uniquement lorsque tu scroll sur la page. Si tu ne descent pas sur la page, les images qui n'apparaissent pas encore ne sont pas chargés. C'est donc un énorme plus pour les pages avec beaucoup d'images.

Enfin je recommande un plugin de mise en cache, il en existe plein je dirait "WP super cache" (gratuit) et "WP rocket" (payant mais qui aide beaucoup pour la vitesse de chargement grâce à d'autres options).

Refais un test de vitesse après avoir apporté les modifications et tu devrais beaucoup mieux t'en sortir.

Nico

webmestre amateur · 8 Mars 2017

Je reprends ma réponse précédente qui se trouve inexacte !

Précision :

Les photos sont au format 600 x450 avant d'être mises en ligne sur le site. Mais il y a un plugin qui les affiche sous forme de grosses vignettes au format 300 x 225. Et quand on clique sur l'image, c'est la taille réelle de 600 x 450 qui s'affiche.

gotgot · 8 Mars 2017

du coup en fait ce qu'il serait bien de faire tu mets les photos au format 300*225, et quand l'utilisateur clique dessus tu charge celle qui veut en 600*450, ou sinon une fois la page finit de charger tu charges toutes les img en 600*450 en javascript au cas ou l’utilisateur clique dessus

Bigb06 · 9 Mars 2017

Il faudrait envoyer le résultat d'un test sur https://www.webpagetest.org/ ainsi que l'url du site
Ca permettrait de vous aider au mieux.

Sur wordpress il existe plusieurs plugins pour améliorer les performances, et charger les images uniquement lorsqu'elles sont visibles (lazy loading).

webmestre amateur · 9 Mars 2017

Bonsoir,

Merci de m'aider ainsi que les autres qui m'ont répondu précédemment.

J'ai lancé le test sur la page des pommiers (1er lien) mais le site mouline au run 3 pour le screenshot.

Il y a par exemple :
http://www.pepiniere-courtin.fr/catalogue/arbres-fruitiers/pommiers/
ou
la plus longue :
http://www.pepiniere-courtin.fr/catalogue/rosiers/rosiers-buissons/

Je viens de refaire le test sur le lien des rosiers buissons : 2ème lien

Résultat :

Code:

2017/03/09 21:25:17 - Test Created
2017/03/09 21:26:49 - Starting test (initiated by tester WEBPAGETEST-91.183.64.49)
2017/03/09 21:26:49 - Run 1 assigned to WEBPAGETEST-91.183.64.49
2017/03/09 21:27:07 - Test Run Complete. Run: 1, Cached: 0, Done: 1, Tester: WEBPAGETEST-91.183.64.49
2017/03/09 21:27:07 - Marked shard 1 as complete: {"1":true}
2017/03/09 21:27:07 - Extracting 59106 byte uploaded file '/tmp/phpwuOo8u' to './results/17/03/09/F8/1C54'
2017/03/09 21:27:07 - Done Processing. Run: 1, Cached: 0, Done: , Tester: WEBPAGETEST-91.183.64.49
2017/03/09 21:27:08 - Run 2 assigned to WEBPAGETEST-91.183.64.49
2017/03/09 21:27:27 - Test Run Complete. Run: 2, Cached: 0, Done: 1, Tester: WEBPAGETEST-91.183.64.49
2017/03/09 21:27:27 - Marked shard 2 as complete: {"1":true,"2":true}
2017/03/09 21:27:27 - Extracting 69886 byte uploaded file '/tmp/phppgbdcX' to './results/17/03/09/F8/1C54'
2017/03/09 21:27:27 - Done Processing. Run: 2, Cached: 0, Done: , Tester: WEBPAGETEST-91.183.64.49
2017/03/09 21:27:27 - Run 3 assigned to WEBPAGETEST-91.183.64.49
2017/03/09 21:27:46 - Test Run Complete. Run: 3, Cached: 0, Done: 1, Tester: WEBPAGETEST-91.183.64.49
2017/03/09 21:27:46 - Marked shard 3 as complete: {"1":true,"2":true,"3":true}
2017/03/09 21:27:46 - All 3 runs are complete
2017/03/09 21:27:46 - Extracting 58688 byte uploaded file '/tmp/phpszA9Je' to './results/17/03/09/F8/1C54'
2017/03/09 21:27:46 - Done Processing. Run: 3, Cached: 0, Done: 1, Tester: WEBPAGETEST-91.183.64.49
2017/03/09 21:27:46 - Test Complete
2017/03/09 21:27:46 - Test post-processing complete

Pour info :
J'utilise Nextgen Gallery pour visionner les photos en galerie comme son nom l'indique.
J'utilisais le plugin Nextgen Resize (plus suivi par son développeur) qui me créait un conflit avec un autre plugin. Je l'ai donc désactivé.
J'ai découvert que les images dans la galerie ne se zooment plus.

En fait, je pensais plutôt modifier la structure des pages plutôt que de compresser davantage les photos qu sont déjà compressées.
1) soit en saucissonnant la page trop lourde en créant des pages web avec une limite de 500 mots (page1, page2, etc ... )
Mais je risque de me retrouver avec des mots clés, balises méta identiques, etc ... et en plus la gestion des liens pages1, 2 ...

2) en créant une page web par produit : beaucoup de pages web mais le contenu sera faible par page. Risque de recul dans le référencement si le contenu de chaque page se limite à 50 mots et 1 photo.

J'attends vos suggestions.

Encore merci.

webmestre amateur · 11 Mars 2017

Bonsoir à tous,

J'ai commencé à installer ce que vous me conseillez pour tester dans un premier temps.

J'ai installé WP super cache et Lazy loading.

J'ai un message pour WP super cache :

Code:

WP Super Cache Warning!

Your server is configured to show files and directories, which may expose sensitive data such as login cookies to attackers in the cache directories. That has been fixed by adding a file named index.html to each directory. If you use PHP or legacy caching, consider moving the location of the cache directory on the Advanced Settings page.

If you just installed WP Super Cache for the first time, you can dismiss this message. Otherwise, you should probably refresh the login cookies of all logged in WordPress users here by clicking the logout link below.

The logout link will log out all WordPress users on this site except you. Your authentication cookie will be updated, but you will not be logged out.

Qu'est-ce que cela signifie ?

Merci de vos réponses.

spout · 12 Mars 2017

.htaccess:

Code:

Options -Indexes

Src: https://wiki.apache.org/httpd/DirectoryListings

webmestre amateur · 12 Mars 2017

Bonsoir,
Je n'ai pas trop compris ! :?

Que veut dire ce message en somme ?

Cela est-il du à l'installation du plugin WP super cache ou cela n'a rien à voir ?

Options -Indexes

, c'est une ligne à ajouter dans .htaccess ?

Merci d'avance.

Furtif · 12 Mars 2017

c'est une ligne à ajouter dans .htaccess ?

Pour eviter ce genre de probleme : http://www.pepiniere-courtin.fr/wp-content/gallery/parterres-fleuris/

Your server is configured to show files and directories, which may expose sensitive data such as login cookies to attackers in the cache directories.

webmestre amateur · 12 Mars 2017

Ok. Il y a un problème de sécurité.

Il suffit d'ajouter la ligne Options -Indexes dans .htaccess ?

Et à un endroit particulier ?

Merci bien.

nico-digital · 13 Mars 2017

Pas de position particulière dans le .htaccess
Avez vous vu une amélioration après l'installation du plugin de cache et celui de lazy load?

webmestre amateur · 13 Mars 2017

Je ne sais pas dire si cela va mieux.
J'ai fait les tests l'autre jour sur le 1er onglet où l'on peut voir les performances sur le test :
https://www.webpagetest.org/result/170313_BA_1785/

Je viens de voir que le 1er onglet est réservé pour les mobiles.
J'ai refait le test ce soir avec le 2ème onglet pour les PCs (voir résultats plus hauts).
En fait, je n'ai pas vraiment la sensation que les pages soient lentes à charger. C'était juste l'audit WRi qui me prévient que 4 pages dépassent le temps de téléchargement optimal (600 ms).

Sinon, j'ai fait les modifs du .htaccess, ajouté le WP super cache ainsi que Lazy loading.

question pour Furtif et les autres aussi s'ils ont la réponse bien sur

Code:

Pour éviter ce genre de problème : http://www.pepiniere-courtin.fr/wp-content/gallery/parterres-fleuris/

Comment a-t il trouvé ce lien ? quand on clique sur la page parterres fleuris, je ne pouvais voir ce lien !
Maintenant, avec la modif du .htaccess, on peut y aller !

elji · 13 Mars 2017

Non, on ne peut pas y aller. Il y a un écran qui indique que c'est verboten, alors qu'avant, ce lien aurait montré l'arobrescence du répertoire, ce qu'il est prudent d'éviter de montrer.

webmestre amateur · 13 Mars 2017

Oui, je sais que maintenant, c'est interdit depuis que j'ai fait la modif du .htaccess.
Mais ma question était de savoir (pour approfondir mes connaissances en matière de sécurité) comment il avait trouvé l'url alors que les pages web n'ont pas la même structure : nom_du_domaine/realisations/nom_de realisation ou nom_de_domaine/catalogue/famille_produit.
Or, ici, ce n'est pas le cas dans le lien donné. Heureusement qu'il a trouvé la faille et je l'en remercie.