Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

Réaliser l'audit d'un site web

Analyser la rapidité de chargement du site

Testez gratuitement nos 1338 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Vous allez apprendre à analyser la rapidité de chargement du site web. Étudiez le comportement fonctionnel attendu.
09:58

Transcription

Nous allons maintenant analyser la rapidité de chargement du site que nous auditons. Pour cela, nous allons d'abord nous baser sur le temps de chargement ressenti donc sur notre poste. Et pour cela, nous allons tout de même prendre des précautions. Nous allons d'abord effacer les caches de notre navigateur pour pouvoir réellement ressentir ce que donne un premier chargement du site. Il faut savoir que le site, une fois qu'il a déjà été visité, a stocké énormément de choses en local sur votre ordinateur, et qu'il va se charger donc beaucoup plus rapidement mais de manière un petit peu artificielle, puisque les médias ne vont pas faire appel au serveur, mais vont faire appel à des fichiers qui sont stockés sur votre disque dur. Allons-y, passons sur notre navigateur, donc ici Chrome. Et nous allons commencer par vider les caches du navigateur. Plus d'outils Effacer les données de navigation, et ici je choisis Toutes les données. Et je vais vider principalement les images et fichiers en cache. Voilà, c'est terminé. Je peux maintenant retourner sur le site et actualiser. Et donc maintenant mon ressenti est que le site s'est chargé instantanément. Je n'ai eu aucun temps d'attente. Donc très, très, très rapide. Bien que j'ai quand-même remarqué que la petite flèche de chargement tournait pendant quelques secondes. Donc ça veut dire que le site est conçu de manière assez intelligente. et que seuls les éléments que je suis censé voir au chargement du site s'affichent très rapidement. Et le reste se charge tranquillement en tâche de fond. Mais ça n'impacte pas mon ressenti, puisque je ne vois pas, de toute façon, ces éléments au chargement du site. Si je vais maintenant sur une autre page. La page se charge très rapidement aussi, en moins d'une seconde. Et si je clique sur, par exemple, un lien vers une actualité, pareil, le chargement est de l'ordre d'une seconde, voire un petit peu moins. Donc, mon ressenti au chargement est excellent, et le site est, pour moi, à mon emplacement, très rapide. Maintenant, que se passe-t-il si je mesure avec un outil le temps de chargement de mon site ? Donc pour cela, je vais d'abord mesurer avec mon outil en local, l'outil de Chrome, mais je peux faire la même chose exactement avec Firefox et Internet Explorer. Donc je vais recharger mon site après avoir vidé les caches. Je vais inspecter le code du site, cliquer sur Network, passer en vue générale, et je cliquer sur la page d'accueil. Donc là je peux remarquer que le site a mis finalement pas loin de 5 secondes à se charger intégralement. Mais certains éléments donc ne sont pas visibles au départ. Ça n'a pas d'impact sur mon ressenti, mais il a quand-même mis beaucoup de temps à charger. On va essayer d'en savoir un petit peu plus. Je cache la vue globale, et je vais agrandir cette fenêtre et regarder les éléments qui se sont chargés. Alors, comment lire cette vue en cascade, qu'on appelle « waterfall » en anglais ? J'ai ici sur la gauche les éléments qui se sont chargés. Leur statut par rapport au serveur. Ici leurs poids, et le temps qu'ils on mis à charger. Ici, à quel moment ils se sont mis à charger. Donc cette vue est assez synthétique, et très efficace. Si je regarde rapidement donc, ce que je peux déjà en déduire c'est qu'il y a beaucoup d'éléments puisque j'en ai 178 qui se sont chargés. Au total quatre mégas. Donc ça fait quand-même beaucoup de données, mais pour une connexion moderne, ce n'est pas du tout choquant. Et que la page s'est chargée en 5 secondes à peu près, 4 secondes 93. Si je continue à scroller, je remarque un élément intéressant, c'est qu'il y a des éléments qui sont capables de se charger en même temps. Donc ça veut dire que le site s'appuie sur un CDN. On rentrera plus en détail sur ce point lorsqu'on sera dans le chapitre performances. Mais donc je regarde tout de même ces éléments, il y a beaucoup d'éléments qui se chargent très rapidement. Ici j'ai énormément de petites images, apparemment, qui viennent de dailymotion. Donc cela ne m'intéresse pas en termes de chargement de ma page, puisque c'est un élément externe. Ici, toujours du dailymotion. Là, j'ai quelques erreurs. Il y a un fichier javascript qui ne s'affiche pas, apparemment. Ici, aussi. Mais rien de choquant. Donc ça veut dire que mon site, finalement, n'a pas tant d'éléments que ça, puisqu'il y a uniquement ces éléments qui appartiennent réellement à mon site, et ensuite je passe sur du dailymotion. Donc, finalement, je n'ai pas 179 éléments à charger. Si je rentre un petit peu plus dans le détail, sans pour autant déflorer la partie performances que nous allons voir tout à l'heure, mais je peux aussi savoir exactement en quoi consiste le temps de chargement d'un élément. Donc ici par exemple, une image. Ici, j'ai le détail du timing. Donc il y a une partie de dialogue avec le serveur. Une connexion initiale avec le serveur. La requête est envoyée. Donc en fait, avant même que je demande l'image, il y a déjà du temps consommé uniquement pour dialoguer avec le serveur. Une fois que la requête est envoyée au serveur, j'ai un certain temps d'attente, puis ensuite mon contenu est téléchargé. Et le tout m'amène à 297 millisecondes. J'ai des petits éléments un peu gadget mais qui sont intéressants, par exemple je peux capturer des screenshots du chargement de ma page. Et pour cela donc, je clique sur F5, cela relance un chargement de ma page, les screenshot sont réalisés, et j'ai maintenant un petit film du chargement de mon site. Cela peut être intéressant pour justement détecter des éléments qui mettraient plus de temps à se charger que d'autres. Et l'impact que cela peut avoir sur mon internaute. Et donc là on remarque que, de toute façon, quel que soit mon positionnement dans mon temps de chargement, sur les cinq secondes de chargement, je vois la même chose. Donc ça veut dire que mon internaute, lui, n'a pas l'impression qu'il y a des choses qui se chargent. Donc si on fait un bilan de ce test préliminaire de rapidité de chargement, nous sommes extrêmement positifs, puisque le temps de chargement ressenti est très très rapide, que ce soit au niveau du chargement sur mon navigateur que de l'analyse de ce chargement via les outils de mon navigateur. On va maintenant relancer la même chose sur un outil en ligne, et vérifier que tout est cohérent. Je pars donc sur webpagetest.org paris.fr et je vais lancer une simulation à partir de Paris, sur Chrome, voir si on est cohérents par rapport à mon test. Le test est en cours, et nous allons bientôt avoir les résultats. Ça y est, le test est affiché. Et donc, là, j'ai des informations assez intéressantes, puisque je sais que à la première lecture, premier chargement le temps de chargement total a été de 7 secondes. Puis, les nouvelles lectures ont pris une seconde. Ici donc j'ai d'autres éléments, comme par exemple le nombre de requêtes, donc 35 requêtes. Alors, là on voit que le test a fait la différence entre les éléments qui se trouvent sur mon serveur, et ceux qui sont à l'extérieur, par exemple ceux de dailymotion. Et j'ai même une petite vidéo, que je vais pouvoir consulter, et qui va me montrer le comportement, en termes de ressentie, de l'internaute qui se trouverait donc à Paris, avec Chrome. Avec le timing de chargement. Les données commencent à arriver à une seconde, et, très rapidement, le site est complètement affiché, en ce qui concerne ce que je vois sur la page d'accueil. Donc, rien, une seconde quatre, à peu près, le site commence à s'afficher, et il est généré. Au bout de deux secondes, tout est chargé. Je retrouve ma fameuse vue « waterfall ». Avec le temps de rendu de mes différents éléments, et de chargement de mes éléments. Donc, ma page HTML, les CSS, les JS. Et si je continue à analyser le rendu, ici donc j'ai des informations par rapport aux connexions. Donc sur quel site sont faites les connexions. Et leurs temps de négociation avec le serveur et de chargement, avec un code couleur en fonction du type de donnée chargée. Et ensuite, ici, j'ai les éléments qui sont chargés avant le rendu du site. C'est le début d'affichage de quelque chose du site. pendant le début d'affichage du site, et pendant l'affichage du site, et après le chargement du site. Et enfin, voici tous les fichiers qui sont téléchargés et qui appartiennent à mon serveur, et qui servent à générer la page de mon site. Tout en haut, donc ici, j'ai une notation en fait de différentes axes d'analyse du chargement. Le premier chargement de la première donnée, à partir de quand se fait-il ? Est-ce que la connexion est bien permanente ? Et ensuite, je vérifie si les transferts de données sont bien compressés. Et si le contenu est bien mis en cache. Et est-ce que j'utilise aussi un CDN. Donc là, ces notes sont à prendre en compte de manière relative, et nous analyserons beaucoup plus en détail tout ça un petit peu plus tard, lorsque nous serons dans la partie performances. Le bilan définitif est donc, encore une fois, très bon. Nous avons une très bonne expérience d'utilisation en local, sur notre poste, du site. Et l'analyse par des outils en ligne reste bonne aussi. Pas exceptionnelle, puisqu'il y a certains points qui semblent ne pas être au maximum. Mais, tout de même, très bonne. Donc on pourrait mettre une note de huit sur dix.

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 !