---
# System prepended metadata

title: '[TC2] INR - TD1'
tags: [TD, TC2, S2, INR]

---

# [TC2] INR - TD1 

###### tags: `INR` `S2` `TC2` `TD`


## Analyse de performances navigateur web


### Rapidité


Pour l'analyse de perf, on utilise les outils de développements. 
Un site internet est dit "plus rapide" au travers : 
* du temps de réponse, 
* taille des framework utilisés (dépend des types de framework), 
* taille des images sur une page

Un site plus sobre = moins de ressources ( et donc de requêtes vers un asset). Donc le moins de javascript, CSS, vidéos, images etc. Google recommande un affichage qui se fait en moins de 3 secondes pour un temps de chargement. 

Onglet "Network" du mode développeur permet de voir tout ce qui est téléchargé (ressources, trackers, etc).

Waterfall : arborescence des éléments téléchargés les uns après les autres ( donc augmente temps de chargement). Pour chaque domaine, a aussi un temps d'accès au DNS + parse la réponse à chaque fois. Permet de voir aussi la quantité de données téléchargé, le temps, et autres indications.

Même sur YT y a des ressources qui failed, personne n'est parfait, c'est deconné

**Web vitals** : Google calcul la performance des pages ( temps des tasks etc). 

Youtube télécharge 11 Mo de data au chargement de la page d'accueil

On a tous ces outils sur le nav nativement, on a pas de raison pour ne pas les utiliser et avoir des sites super rapide :runner: 

**Pagespeed**: permet de voir différentes métriques de performance sur un site web. C'est vraiment pas mal en vrai y a pleins de tips 💡
**Lighthouse** : onglet sur Outil de developpement sur navigateur qui permet d'avoir pas mal d'infos aussi sur le site. Permet d'avoir des scores sur la perf pour l'historique. Equivalent de pagespeed de google. 
**Compact layer shift** (CLS) : exemple : une page qui charge est puis decale le text parce que une pub a finit de charger


Dareboost -> un outil avec encore plus de tools


[**Cloudinary**](https://webspeedtest.cloudinary.com/): Permet de savoir si nos images sont optimisées niveau compression






