O painel Network no DevTools do navegador ajuda a identificar quais recursos estão carregados e quando. Cada linha no painel "Rede" corresponde a um URL específico carregado pelo seu app da Web.
Saiba o que você carrega
As estratégias corretas de armazenamento em cache para seu aplicativo da Web exigem uma compreensão de o que você está carregando exatamente. Ao criar um aplicativo da Web confiável, a rede pode estar sujeita a todos os tipos de forças do mal. Você precisa entender as vulnerabilidades da rede para lidar com elas no app.
Você pode achar que já tem uma boa ideia do que seu aplicativo da Web carrega. Se você estiver usando apenas uma pequena dispersão de HTML estático, JavaScript, CSS e arquivos de imagem, talvez seja o caso. No entanto, assim que você começa a misturar recursos de terceiros hospedados em redes de fornecimento de conteúdo usando solicitações de API dinâmicas e respostas geradas pelo servidor, a situação rapidamente fica mais escura.
Uma estratégia de armazenamento em cache que faça sentido para alguns arquivos CSS pequenos provavelmente não será adequada para centenas de imagens grandes, por exemplo.
Saiba ao carregar
Outra parte do carregamento geral é quando tudo é carregado.
Algumas solicitações de rede, como a solicitação de navegação do HTML inicial, são feitas incondicionalmente assim que o usuário visita determinado URL. Esse HTML pode conter referências fixadas no código a arquivos CSS ou JavaScript essenciais que também precisam ser carregados para exibir a página interativa. Todas essas solicitações ficam no seu caminho de carregamento crítico. Você precisará armazená-los em cache de forma agressiva para ser rápido e confiável.
Outros recursos, como solicitações de API ou recursos de carregamento lento, podem não começar a ser carregados até que todo o carregamento inicial seja concluído. Se essas solicitações acontecerem apenas após uma sequência específica de interações do usuário, um conjunto completamente diferente de recursos poderá ser solicitado em várias visitas à mesma página. Uma estratégia de armazenamento em cache menos agressiva geralmente é apropriada para conteúdo identificado como fora do caminho de carregamento crítico.
As colunas Nome e Tipo ajudam com o quê
As colunas "Nome" e "Tipo" ajudam a fornecer uma visão significativa do que está sendo carregado. A resposta para "o que está carregando?" no exemplo acima é um total de quatro URLs, cada um representando um tipo exclusivo de conteúdo.
O nome representa o URL solicitado pelo navegador, mas você verá apenas a última parte do caminho do URL listada. Por exemplo, se
https://example.com/main.css estiver carregado, você verá apenas main.css
listados em "Nome".
Os últimos caracteres do caminho do URL, após o ponto final (por exemplo, "css"), são conhecidos como a extensão do URL.
A extensão do URL geralmente informa qual tipo de recurso está sendo solicitado
e mapeia diretamente para as informações mostradas na coluna "Tipo". Por exemplo, v2.html é um documento e main.css é uma folha de estilo.
A coluna Cascata ajuda no momento
Examine a coluna Cascata, começando no topo e descendo. O comprimento de cada barra representa o tempo total gasto carregando cada recurso. Como saber a diferença entre uma solicitação feita como parte do caminho de carregamento crítico e uma solicitação que é disparada dinamicamente bem depois que o carregamento inicial da página é concluído?
A primeira solicitação na hierarquia sempre será para o documento HTML,
por exemplo, v2.html. Todas as solicitações subsequentes fluem (como uma cascata) a partir dessa solicitação de navegação inicial, com base nas imagens, scripts e estilos que o documento HTML faz referência.
A hierarquia mostra que, assim que v2.html termina de carregar, as solicitações
dos recursos a que ele faz referência (também conhecidas como subrecursos) começam. O
navegador pode solicitar vários subrecursos ao mesmo tempo, e isso é
representado pelas barras sobrepostas na coluna Cascata para main.css e
logo.svg. Por fim, podemos ver na captura de tela que main.js começa a ser carregado por último e termina depois que os outros três URLs também são concluídos.