1. Renderização inicial : quanto tempo leva para o usuário ver pelo menos algo
   
   • Reduzir solicitações de bloqueio de renderização
     
   • Evite cadeias seqüenciais
     
   • Reutilizar conexões do servidor
     
   • Trabalhadores de serviço para renderização instantânea
2. : ,
   
   • . .
     
   • ,
     
   • 
     
   • 
     
3. :
   
   • ,
     

Reduzir solicitações de bloqueio de renderização

• Mover tags de script para a parte inferior do corpo
  
• Faça o download de scripts no modo assíncrono usando async
  
• Se JS ou CSS devem ser carregados sequencialmente, é melhor incorporá-los com pequenos trechos

Evite conversas com solicitações sequenciais que bloqueiam a renderização

• Regras @importCSS
  
• Fontes da Web referenciadas pelo arquivo CSS
  
• Tags de script ou JavaScript para download

1. Documento HTML
   
2. Aplicações CSS
   
3. CSS para fontes do Google
   
4. Arquivo Woff de fonte do Google (não mostrado no diagrama)

Reutilizando conexões do servidor para acelerar solicitações

1. Pesquisa de DNS
   
2. Estabelecer uma conexão TCP
   
3. Estabelecer uma conexão SSL

Reduza o tamanho do arquivo e use CDN

Elimine a latência da rede com trabalhadores de serviço

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

Baixar aplicativo

1. Faça o download do código do aplicativo (JS e CSS)
   
2. Faça o download dos dados necessários para a página
   
3. Baixe dados e imagens adicionais

Faça o download apenas do código necessário e maximize o número de ocorrências no cache

• Código para uma página específica (específica da página)
  
• Código de aplicação comum
  
• Módulos de terceiros que raramente mudam (ótimo para armazenamento em cache!)

Carregando dados para uma página

Não espere o download completo do pacote antes de começar a baixar os dados

1. Incorporar dados em um documento HTML
   
2. Execute uma solicitação de dados usando o script interno dentro do documento

window.userDataPromise = fetch("/me")

Não bloqueie a renderização enquanto aguarda dados irrelevantes

Evite consultas consecutivas de dados

Renderização do lado do servidor

Próxima página

Pré-carregamento de recursos

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

Reutilização de dados já baixados

Conclusão