EnglishCommencer

La performance d'une application web

Les trois signaux Core Web Vitals (LCP, INP, CLS) et leurs seuils, le chemin de rendu et les ressources bloquantes, le poids des images et des scripts, le cache, la compression et le chargement différé.

  • 33 cartes
  • 6 thèmes
  • Gratuit
Réviser ce deck

Le programme, thème par thème

Le poids de chaque thème suit celui que lui donne l'examen.

  1. Notions
  2. Questions
  3. Ranger et relier
  4. Les chiffres
  5. Mises en situation
  6. Comprendre

Quelques cartes du deck

  • LCP (Largest Contentful Paint) : de quoi s'agit-il ?

    Voir la réponse

    Temps écoulé avant l'affichage du plus grand élément visible de la page, souvent une image ou un titre ; il est bon jusqu'à 2,5 s.

    Il mesure le moment où la page paraît prête à celui qui la regarde. Au-delà de 4 s, il est jugé mauvais.

  • Cette page reste blanche trop longtemps. Quelle modification libère le premier affichage ?

    ```html
    <head>
    <link rel="stylesheet" href="style.css">
    <script src="app.js"></script>
    </head>
    `

    • Ajouter defer à la balise script
    • Ajouter defer à la balise link de la feuille de style
    • Ajouter lazy à la balise script du fichier
    • Supprimer la feuille de style et styler en JavaScript
    Voir la réponse

    Ajouter defer à la balise script

    Un script sans attribut arrête l'analyse jusqu'à son exécution. defer n'a aucun effet sur un link, lazy n'existe pas comme attribut de script, et styler en JavaScript retarde encore l'affichage.

  • Les seuils d'un bon score sont : LCP jusqu'à …, INP jusqu'à … et CLS jusqu'à ….

    Voir la réponse

    Les seuils d'un bon score sont : LCP jusqu'à 2,5 s, INP jusqu'à 200 ms et CLS jusqu'à 0,1.

    Un seuil mauvais commence à 4 s pour le LCP, 500 ms pour l'INP et 0,25 pour le CLS ; entre les deux, la page « nécessite des améliorations ».

  • INP (Interaction to Next Paint) : de quoi s'agit-il ?

    Voir la réponse

    Délai entre une action de l'utilisateur (clic, toucher, touche) et la mise à jour visible de l'écran, relevé pour une des interactions les plus lentes de la visite ; bon jusqu'à 200 ms.

    Il mesure la réactivité : une interaction qui attend un long script du fil principal donne un INP élevé. Au-delà de 500 ms, il est mauvais.

Réviser ce deck