Aplicar o carregamento instantâneo com o padrão PRPL

PRPL é um acrônimo em inglês que descreve um padrão usado para fazer com que páginas da Web sejam carregadas e se tornem interativas e mais rápidas:

  • Pré-carregue os recursos descobertos tardiamente.
  • Renderize a rota inicial o mais rápido possível.
  • Pré-armazenar em cache os recursos restantes.
  • Carregar lentamente outras rotas e recursos não críticos.

Neste guia, você vai aprender como cada uma dessas técnicas se encaixa, mas ainda pode ser usada de maneira independente para alcançar resultados de desempenho.

Auditar sua página com o Lighthouse

Execute o Lighthouse para identificar oportunidades de melhoria alinhadas às técnicas de PRPL:

  1. Pressione "Control + Shift + J" (ou "Command + Option + J" no Mac) para abrir o DevTools.
  2. Clique na guia Lighthouse.
  3. Marque as caixas de seleção Desempenho e Progressive Web App.
  4. Clique em Executar auditorias para gerar um relatório.

Para mais informações, acesse Descobrir oportunidades de desempenho com o Lighthouse.

Pré-carregar recursos críticos

O Lighthouse mostra a seguinte auditoria com falha se um determinado recurso for analisado e buscado com atraso:

Lighthouse: auditoria de pré-carregamento de solicitações principais

Pré-carregamento é uma solicitação de busca declarativa que diz ao navegador para solicitar um recurso que não pode ser descoberto pelo verificador de pré-carregamento dele, como uma imagem referenciada pela propriedade background-image. Pré-carregue os recursos descobertos tardiamente adicionando uma tag <link> com rel="preload" ao cabeçalho do seu documento HTML:

<link rel="preload" as="image" href="hero-image.jpg">

Adicionar uma diretiva <link rel="preload"> iniciará uma solicitação para esse recurso e o armazenará no cache. Assim, o navegador poderá recuperá-las quando necessário.

Para saber mais sobre o pré-carregamento de recursos críticos, consulte o guia Pré-carregar recursos críticos.

Renderizar a rota inicial o mais rápido possível

O Lighthouse fornecerá um aviso se houver recursos que atrasam a Primeira exibição, o momento em que seu site renderiza pixels na tela:

Lighthouse: elimine auditoria de recursos que bloqueiam a renderização

Para melhorar a primeira exibição, o Lighthouse recomenda a inserção in-line de JavaScript essencial e o adiamento do restante usando async, além da inserção in-line de CSS essencial usado acima da dobra. Isso melhora o desempenho, eliminando idas e voltas ao servidor para buscar recursos de bloqueio de renderização. No entanto, o código inline é mais difícil de manter do ponto de vista do desenvolvimento e não pode ser armazenado em cache separadamente pelo navegador.

Outra abordagem para melhorar a primeira exibição é renderizar o HTML inicial da página no lado do servidor. Isso mostra conteúdo imediatamente para o usuário, enquanto os scripts ainda estão sendo buscados, analisados e executados. No entanto, isso pode aumentar significativamente o payload do arquivo HTML, o que pode prejudicar o tempo para interação da página ou o tempo que leva para o aplicativo se tornar interativo e responder à entrada do usuário.

Não há uma solução única correta para reduzir a primeira exibição no aplicativo. Só considere estilos in-line e renderização no lado do servidor se os benefícios superarem as desvantagens para o aplicativo. Saiba mais sobre esses dois conceitos com os recursos a seguir.

Solicitações/respostas com service worker

Pré-armazenar recursos em cache

Ao agir como um proxy, os service workers podem buscar recursos diretamente no cache em vez do servidor em visitas repetidas. Isso não só permite que os usuários usem seu aplicativo quando estiverem off-line, mas também resulta em tempos de carregamento de página mais rápidos em visitas repetidas.

Use uma biblioteca de terceiros para simplificar o processo de geração de um service worker, a menos que você tenha requisitos de armazenamento em cache mais complexos do que uma biblioteca pode fornecer. Por exemplo, o Workbox fornece um conjunto de ferramentas que permitem criar e manter um service worker para armazenar recursos em cache. Para mais informações sobre service workers e confiabilidade off-line, consulte o guia de service workers no programa de aprendizado sobre confiabilidade.

Carregamento lento

O Lighthouse exibe uma auditoria com falha se você enviar muitos dados pela rede.

Lighthouse: conta com auditoria de payloads de rede enormes

Isso inclui todos os tipos de recursos, mas grandes payloads de JavaScript são especialmente caros devido ao tempo que o navegador leva para analisá-los e compilá-los. O Lighthouse também fornece um alerta quando apropriado.

Lighthouse: auditoria do tempo de inicialização do JavaScript

Para enviar um payload JavaScript menor que contenha apenas o código necessário quando um usuário inicialmente carrega seu aplicativo, divida todo o pacote e os blocos de carregamento lento sob demanda.

Depois de conseguir dividir o pacote, pré-carregue as partes mais importantes. Consulte o guia Pré-carregar recursos críticos. O pré-carregamento garante que os recursos mais importantes sejam buscados e transferidos por download mais cedo pelo navegador.

Além de dividir e carregar diferentes blocos de JavaScript sob demanda, o Lighthouse também oferece uma auditoria para carregamento lento de imagens não críticas.

Lighthouse: adiar auditoria de imagens fora da tela

Se você carregar muitas imagens na sua página da Web, adie todas as que estão abaixo da dobra ou fora da janela de visualização do dispositivo quando uma página for carregada. Consulte Usar Lazysizes para fazer o carregamento lento de imagens.

Próximas etapas

Agora que você entende alguns dos conceitos básicos por trás do padrão PRPL, continue no próximo guia desta seção para saber mais. É importante lembrar que nem todas as técnicas precisam ser aplicadas juntas. Qualquer esforço feito com as medidas a seguir vai proporcionar melhorias perceptíveis no desempenho.

  • Pré-carregue recursos críticos.
  • Renderize a rota inicial o mais rápido possível.
  • Pré-armazenar em cache os recursos restantes.
  • Carregar lentamente outras rotas e recursos não críticos.

Leia mais sobre padrões PRPL.