Performances page html

Fermé
gite-ti-goudoul Messages postés 1 Date d'inscription vendredi 17 avril 2020 Statut Membre Dernière intervention 17 avril 2020 - 17 avril 2020 à 21:49
 Nanaki - 18 avril 2020 à 02:53
Bonjour,

Je suis Marie et je programme le nouveau site Internet pour mon gîte.

Je rencontre un problème de performance sur Google PageSpeed Insight : "Différez le chargement des images hors écran" pour la page principale du site. J'y ai pourtant utilisé un script lazyload. Je suis surprise car sur une autre page comportant plus d'images je n'ai pas le message. Je pense qu'il sera plus simple que je vous donne l'adresse des pages concernées.

Page correcte pour le chargement des images : https://gite-tigoudoul.bzh/testnew/a-voir-a-faire-autour-de-moelan-sur-mer.html
Page sur laquelle il y a un problème : https://gite-tigoudoul.bzh/testnew/

Je cherche depuis quelques heures sans rien trouver.

Merci pour votre aide.

Bien à vous,
Marie



Configuration: Macintosh / Safari 13.0.5
A voir également:

1 réponse

Salut,
le temps de chargement des pages étant dépendant de son poids et de ceux de ses contenus c'est en effet les images qui sont le plus longues à charger qui ralentiront ce temps de chargement. Plus l'exécution éventuelle de scripts mais là ça dépends du script.
Je ne connait pas cette technique de différer le chargement des images parce que si l'utilisateur n'a pas toute la page affichée directement cela peut être frustrant et sembler un bug donc ça me semble à utiliser avec précautions.(enfin dans votre page le "defer" semble ndiquer que c'est le cas).

Ce qui est plus utilisé est de baisser les dimensions ou la qualité(donc le poids des images) pour qu'elles chargent plus rapidement et s'adapter à tous les types de connexions même les moins rapide.
Où dans le même ordre d'idées mettre moins d'images par pages.
En général une autre techniques est de précharger les images avant d'afficher la page. Cela peut se faire par un JavaScript qui va simplement charger l'image sans l'afficher, par exemple en utilisant l'objet new Image(...); pour chauqe image de la page dans un script placé avant le chargement du body(voir aussi document.body/onload qui va permettre d'attendre l'événement du chargement complet de la page).

Pour la page dont vous dites qu'elle semble poser problème je voit qu'il y a une carte Google. C'est peut-être de cela qu'il s'agit puisque la page doit utiliser un script sur un serveur externe(celui de Google Map) avant de pouvoir afficher une image assez grande puisque la page du monde entier ainsi que le programme qui permet de la gérer.
Une astuce pourrait être de différer ce chargement en utilisant une simple image et proposant lors un bouton ou autre pour charger le Google Map qui permets d'avoir des indications pratiques sur la localisation et autres détails possibles avec ce service.

En espérant avoir apporté quelques pistes à votre question.
1