Réaliser l'audit d'un site web

Tester le chargement progressif et les images réactives

Testez gratuitement nos 1304 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Testez la fonctionnalité de chargement progressif et examinez l'importance de la technique des images réactives.
03:50

Transcription

Nous allons reprendre avec l'analyse du chargement des médias. Alors, nous avons déjà beaucoup parlé des médias responsifs, des images responsives, donc on va aller rapidement sur ce point, mais nous allons maintenant surtout voir si il y a du téléchargement progressif. Le téléchargement progressif permet d'améliorer la sensation de rapidité du chargement de la page, en affichant uniquement les données importantes, et en chargeant les données cachées au fur et à mesure. Soit en décalé par rapport au chargement initial, soit, lorsque je scrolle par exemple, j'affiche les images au fur et à mesure. Par exemple, si j'actualise la page, je peux, à l'oeil nu, voir si il y a du téléchargement progressif. Ici on a surtout l'impression que les médias se chargent dans un ordre qui est bien pensé, et que les fichiers .js sont bien chargés en bout de piste. De cette façon, la page affiche rapidement quelque chose. Donc c'est intéressant. Par contre, je ne vois pas d'images s'afficher au fur et à mesure. Tout s'affiche d'un coup. Donc j'ai pas vraiment du téléchargement progressif. Je vais cliquer sur d'autres pages. Voilà, mes images sont toutes affichées instantanément. Donc à l'oeil nu, je n'arrive pas à voir si il y a du téléchargement progressif. Je vais donc inspecter la page en ayant pris soin d'ouvrir un onglet en navigation privée, et vérifier s'il y a du téléchargement progressif dans la vue waterfall, donc cascade, de mon inspection. Donc, Control-Shift-N. Inspecter. Network, et F5. J'ai donc 32 requêtes. Et si je scrolle, est-ce que j'ai des éléments supplémentaires qui s'affichent ? Non. Tout est chargé. Donc là, je n'ai pas l'impression d'avoir du téléchargement progressif. Je vais charger une autre page. J'ai 20 requêtes. Quand je scrolle je n'ai rien non plus. Et si je regarde la timeline, Tous mes éléments se chargent en même temps. Oui, tous les médias là sont chargés en même temps. Donc c'est intéressant puisque ça charge très vite. Il y a du cache, mais pas de téléchargement progressif. Ici, pareil. Voyons maintenant en comparaison sur un site qui lui propose du téléchargement progressif. J'ouvre un nouvel onglet. Je vais sur ma plateforme de démo Typo3 et je vais aller voir la page qui contient les images, et inspecter le code. Je passe en Network, je clique sur F5. Et là donc j'ai bien 19 requêtes. 20 requêtes. 21. 22. Et je remarque que mes images sont bien chargées en décalé, en fonction du fait qu'elles se trouvent dans la zone visible ou non. Si je charge d'autres pages, même chose. Les images se chargent après. Donc ça c'est une technique que je recommande, en termes de performance. Elle est très intéressante car elle donne une impression de rapidité, puisque on ne charge que les éléments importants pour la vue initiale du site. Nous avons déjà parlé de la partie images responsives, et vu que le site audité proposait cette fonctionnalité, donc, par rapport à cette analyse, je dirais que nous pouvons mettre la moitié des points, et donc une note de cinq sur dix par rapport au chargement progressif et aux images responsives. Ce que je vous propose c'est de fusionner les notes et donc de baisser la note globale temps de chargement à sept.

Réaliser l'audit d'un site web

Évaluez la qualité du travail de développement et d'intégration de votre site Internet. Détectez les éventuels problèmes de performance, de compatibilité, etc.

1h47 (24 vidéos)
Aucun commentaire n´est disponible actuellement
 

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !