1. Rendu initial : combien de temps faut-il à l'utilisateur pour voir au moins quelque chose
   
   • Réduisez les demandes de blocage du rendu
     
   • Évitez les chaînes séquentielles
     
   • Réutiliser les connexions au serveur
     
   • Travailleurs de service pour le rendu instantané
2. : ,
   
   • . .
     
   • ,
     
   • 
     
   • 
     
3. :
   
   • ,
     

Réduisez les demandes de blocage du rendu

• Déplacez les balises de script au bas du corps
  
• Téléchargez des scripts en mode asynchrone en utilisant async
  
• Si JS ou CSS doivent être chargés séquentiellement, il est préférable de les incorporer avec de petits extraits

Évitez les conversations avec des requêtes séquentielles qui bloquent le rendu

• Règles @importCSS
  
• Polices Web référencées par le fichier CSS
  
• Balises JavaScript ou script téléchargeables

1. Document HTML
   
2. Applications CSS
   
3. CSS pour les polices Google
   
4. Fichier Google Font Woff (non illustré dans le diagramme)

Réutilisation des connexions serveur pour accélérer les demandes

1. Recherche DNS
   
2. Établir une connexion TCP
   
3. Établir une connexion SSL

Réduisez la taille des fichiers et utilisez CDN

Éliminez la latence du réseau avec les employés de service

self.addEventListener("install", async e => {
 caches.open("v1").then(function (cache) {
   return cache.addAll(["/app", "/app.css"]);
 });
});

self.addEventListener("fetch", event => {
 event.respondWith(
   caches.match(event.request).then(cachedResponse => {
     return cachedResponse || fetch(event.request);
   })
 );
});

Téléchargez l'application

1. Télécharger le code d'application (JS et CSS)
   
2. Téléchargez les données requises pour la page
   
3. Téléchargez des données et des images supplémentaires

Téléchargez uniquement le code nécessaire et maximisez le nombre de hits dans le cache

• Code pour une page spécifique (spécifique à la page)
  
• Code d'application commun
  
• Modules tiers qui changent rarement (idéal pour la mise en cache!)

Chargement de données pour une page

N'attendez pas le téléchargement complet du package avant de commencer le téléchargement des données

1. Incorporer des données dans un document HTML
   
2. Exécutez une demande de données à l'aide du script intégré dans le document

window.userDataPromise = fetch("/me")

Ne bloquez pas le rendu en attendant des données non pertinentes

Évitez les requêtes de données consécutives

Rendu côté serveur

Page suivante

Préchargement des ressources

import(
    /* webpackPrefetch: true, webpackChunkName: "todo-list" */ "./TodoList"
)

Réutilisation de données déjà téléchargées

Conclusion