1. Erstes Rendern : Wie lange dauert es, bis der Benutzer mindestens etwas sieht?
   
   • Reduzieren Sie Rendering-Blockierungsanforderungen
     
   • Vermeiden Sie aufeinanderfolgende Ketten
     
   • Serververbindungen wiederverwenden
     
   • Servicemitarbeiter für das sofortige Rendern
2. : ,
   
   • . .
     
   • ,
     
   • 
     
   • 
     
3. :
   
   • ,
     

Reduzieren Sie Rendering-Blockierungsanforderungen

• Verschieben Sie Skript-Tags an den unteren Rand des Körpers
  
• Laden Sie Skripte im asynchronen Modus mit herunter async
  
• Wenn JS oder CSS nacheinander geladen werden sollen, ist es besser, sie mit kleinen Snippets einzubetten

Vermeiden Sie Gespräche mit sequentiellen Anforderungen, die das Rendern blockieren

• @importCSS- Regeln
  
• Web-Schriftarten, auf die in der CSS-Datei verwiesen wird
  
• Herunterladbare JavaScript- oder Skript-Tags

1. HTML-Dokument
   
2. CSS-Anwendungen
   
3. CSS für Google Fonts
   
4. Google Font Woff-Datei (im Diagramm nicht dargestellt)

Wiederverwenden von Serververbindungen, um Anforderungen zu beschleunigen

1. DNS-Suche
   
2. Stellen Sie eine TCP-Verbindung her
   
3. Stellen Sie eine SSL-Verbindung her

Reduzieren Sie die Dateigröße und verwenden Sie CDN

Beseitigen Sie die Netzwerklatenz mit Servicemitarbeitern

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);
   })
 );
});

Anwendung herunterladen

1. Anwendungscode herunterladen (JS und CSS)
   
2. Laden Sie die erforderlichen Daten für die Seite herunter
   
3. Laden Sie zusätzliche Daten und Bilder herunter

Laden Sie nur den erforderlichen Code herunter und maximieren Sie die Anzahl der Treffer im Cache

• Code für eine bestimmte Seite (seitenspezifisch)
  
• Gemeinsamer Anwendungscode
  
• Module von Drittanbietern, die sich selten ändern (ideal zum Zwischenspeichern!)

Laden von Daten für eine Seite

Warten Sie nicht auf den vollständigen Download des Pakets, bevor Sie mit dem Herunterladen der Daten beginnen

1. Daten in ein HTML-Dokument einbetten
   
2. Führen Sie eine Datenanforderung mit dem im Dokument integrierten Skript aus

window.userDataPromise = fetch("/me")

Blockieren Sie das Rendern nicht, während Sie auf irrelevante Daten warten

Vermeiden Sie aufeinanderfolgende Datenabfragen

Serverseitiges Rendern

Nächste Seite

Vorladen von Ressourcen

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

Wiederverwendung bereits heruntergeladener Daten

Fazit