Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Réaliser l'audit d'un site web

Aller plus loin avec l'analyse du temps de chargement

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Vous allez étudier comment aller plus loin dans l'analyse de votre page. Intéressez-vous ici à l'analyse du temps de chargement.
08:00

Transcription

On va essayer d'aller plus loin en utilisant un outil qui va être un peu plus pointu. Je lance la page webpagetest.org que nous avons déjà utilisé. Je saisis l'adresse de mon site. Comme location, comme endroit de test, je vais garder Paris. Et je garde comme navigateur Chrome. Et je lance le test. En parallèle, je vais installer un outil supplémentaire sur mon outil local pour voir si je peux pas aller un peu plus loin pendant que le test distant est en train de se lancer. Je vais afficher le site yslow.org et je vais cliquer sur l'extension Chrome. Et j'installe l'extension. Maintenant je retourne sur mon site et je vais lancer l'extension YSlow. Je vais maintenant cliquer sur Run Test. Et voilà le rapport de l'extension YSlow, qui a analysé, de manière assez pointue aussi, le chargement de ma page. Ici, j'ai une série de notes, donc de A à F, qui indiquent le niveau d'excellence de chacun des domaines traités, qui correspond aussi à une couleur. Donc, rouge quand c'est pas bien, vert quand c'est bien, et jaune quand c'est pas très bien mais c'est pas grave. Et il y a différents niveaux de vert, aussi. Je vais réajuster ma fenêtre pour que vous puissiez voir l'intégralité des remarques. Et nous allons les passer une par une et essayer de les comprendre. Donc, réduire le nombre des requêtes HTTP. Donc là, il est en train de me dire que cette page a cinq fichiers Javascript externes qu'il faudrait combiner en un seul. Et qu'elle a 25 images de fond externes aussi à combiner en sprites. Donc la notion de sprites c'est de rassembler beaucoup d'images dans une seule image, de manière à ensuite ne charger qu'une seule image, et dans ce cas on utilise des propriétés background en CSS pour se centrer sur la bonne image et donc réduire le nombre de requêtes HTTP. Voilà, par exemple, un sprite utilisé par Google, qui contient plusieurs boutons qui sont utilisés pour l'interface Et donc c'est une seule image PNG qui est chargée une seule fois, donc une requête au serveur, et pourtant, ça me permet d'afficher toutes les combinaisons d'images possibles qui sont utilisées dans l'interface. Je reviens sur le résultat de mon test. Je peux avoir plus d'informations ici quant aux règles d'utilisation des recommandations, mais nous allons nous en parler en français, ce sera plus simple pour tout le monde. Maintenant, Utilisez un CDN. Nous allons parler de ce qu'est un CDN très rapidement, Il s'agit de serveurs qui peuvent être répliqués un peu partout dans le monde, et qui vont servir les données au plus proche de l'utilisateur. Donc là, dans le cadre de ce site-là, le teste est un peu faussé, puisqu'il y a déjà de nombreux sites qui fournissent de la donnée, qui peuvent être considérés comme des CDN, mais le système ne les reconnait pas comme tels. Donc, il est possible ici de cliquer sur Add as CDN pour indiquer au test que ce sont bien des CDN et que par conséquent la note ne peut pas être mauvaise et qu'elle est à réévaluer. Dans le cas du site audité, les sources sont fiables, il y a bien utilisation de CDN donc j'ai coché les cases. Évitez les balises src ou href vides. Donc là, aucun problème. Ajoutez des « Expires headers ». Donc là il s'agit d'en-têtes que l'on transmet dans la page et qui indiquent au navigateur de garder dans son cache les médias. Ce sont ces en-têtes qui permettent de ne plus recharger notamment les médias lorsque l'on se balade sur une autre page du site qui les utilise aussi, ou lorsque je recharge la même page. Ensuite, compresser certains éléments en gzip. Donc ça c'est un point que nous avions déjà vu dans notre analyse locale. Effectivement, parfois ça peut être intéressant. Parfois moins, puisque le serveur a besoin de travailler pour dézipper. Donc ça prend de la ressource aussi, et pareil pour les compresser, ça prend de la ressource. Donc ce n'est pas toujours une bonne pratique. Ici, tout va bien. Tout va bien, tout va bien. Et nous avons à nouveau « Use cookie-free domains ». Que nous avions déjà vu auparavant. Donc, en réalité, nous avons une très bonne note, puisque nous avons une note de 80. C'est très bien. Le site est très performant. D'autant plus que certains éléments, comme les expire headers, je pense ne se reproduiraient pas si on relançait le test puisque les données seraient bien en cache. Allons retrouver notre test sur le site en ligne, qui est maintenant terminé. Et nous allons prendre note des retours. Je clique sur « Performance Review ». Et voilà une checklist qui me propose des améliorations. Et là, je retrouve les mêmes retours donc. Conseil, en tout cas, de passer certains médias en gzip pour réduire leur taille et le nombre de données. Et des données qui ne sont pas mises en cache statique. Donc il faudrait mettre en cache. Donc ça rejoint les remarques à propos du header. Et, ici, nous avons la notion aussi de CDN qui est détecté pour certains médias, mais pas pour tous. Alors, il faut savoir que certains des médias ne viennent pas forcément du site de Paris, donc là ce n'est pas grave. piwik, par exemple, OK, c'est un autre serveur. Alors, je continue à explorer les résultats. Donc là, c'est le résumé de mon analyse du haut. Donc rien de nouveau. Donc pour l'instant, je suis complètement cohérent avec ce que j'ai vu en local. Donc c'est très intéressant. Il va falloir que je relance un test aussi à distance. Pour cela, je retourne sur la page d'accueil. Et je relance un test. Alors, je n'ai pas les données de visite du site Donc je ne sais pas quel est le pays qui utilise le plus le site paris.fr. Mais si je me base sur les langues disponibles, EN et ES, il parait pertinent de tester par exemple les États-Unis et le Royaume Uni. Donc on va commencer par le Royaume Uni. Et je vais prendre Londres, avec le navigateur Chrome. Et je lance un test. Dans le même temps, je vais relancer un test à partir des États-Unis. Pour ça, je clique avec la molette sur le logo de la page d'accueil, afin d'ouvrir un nouvel onglet. Et je relance la même procédure. Et je choisis les États-Unis. Voilà notre test à partir des États-Unis. J'ai un temps de chargement très très bon, puisque quatre secondes six. C'est aussi bien, voire meilleur, que depuis la France. Et si je fais un point sur les performances, j'ai à peu près les mêmes retours. Donc là, je me rends compte que mon site est très bien aussi desservi depuis l'étranger, depuis les États-Unis. On va basculer maintenant sur un nouveau test. On va faire un pays plus éloigné encore. On peut faire Tokyo, par exemple, ou allez, Hong Kong. Et je démarre. Voilà, le test et terminé. Donc le chargement depuis la Chine est encore un peu moins bon que celui que nous avons fait tout à l'heure. Donc je vais quand-même regarder la vidéo de chargement. Donc, rien de visible. Trois secondes, je commence à avoir des choses. OK. Donc, c'est assez long, mais ça reste acceptable, je dirais, au vu de la distance. Donc, le bilan.

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 !