1. Representación inicial : cuánto tiempo le lleva al usuario ver al menos algo
   
   • Reduce las solicitudes de bloqueo de representación
     
   • Evitar cadenas secuenciales
     
   • Reutilice las conexiones del servidor
     
   • Trabajadores de servicio para renderizado instantáneo
2. : ,
   
   • . .
     
   • ,
     
   • 
     
   • 
     
3. :
   
   • ,
     

Reduce las solicitudes de bloqueo de representación

• Mover etiquetas de script a la parte inferior del cuerpo
  
• Descargar scripts en modo asincrónico usando async
  
• Si JS o CSS deben cargarse secuencialmente, es mejor incrustarlos con pequeños fragmentos

Evite conversaciones con solicitudes secuenciales que bloqueen la representación

• Reglas @importCSS
  
• Fuentes web a las que hace referencia el archivo CSS
  
• JavaScript descargable o etiquetas de script

1. Documento HTML
   
2. Aplicaciones CSS
   
3. CSS para fuentes de Google
   
4. Archivo de fuente de Google Woff (no se muestra en el diagrama)

Reutilizando las conexiones del servidor para acelerar las solicitudes

1. Búsqueda de DNS
   
2. Establecer una conexión TCP
   
3. Establecer una conexión SSL

Reduzca el tamaño del archivo y use CDN

Elimine la latencia de la red con los trabajadores del servicio.

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

Descargar aplicación

1. Descargar el código de la aplicación (JS y CSS)
   
2. Descargue los datos requeridos para la página
   
3. Descargar datos e imágenes adicionales

Descargue solo el código necesario y maximice la cantidad de visitas en el caché

• Código para una página específica (específica de la página)
  
• Código de aplicación común
  
• Módulos de terceros que rara vez cambian (¡excelente para el almacenamiento en caché!)

Cargando datos para una página

No espere la descarga completa del paquete antes de comenzar a descargar los datos.

1. Incrustar datos en un documento HTML
   
2. Ejecute una solicitud de datos utilizando el script incorporado dentro del documento

window.userDataPromise = fetch("/me")

No bloquee el renderizado mientras espera datos irrelevantes

Evitar consultas de datos consecutivas

Representación del lado del servidor

Siguiente página

Precarga de recursos

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

Reutilización de datos ya descargados

Conclusión