O painel Network no DevTools do seu navegador ajuda a identificar quais recursos estão e quando são carregados. Cada linha no painel Network corresponde a um URL específico que seu app da Web carregou.
Saiba o que você carrega
Criar as estratégias corretas de armazenamento em cache para seu aplicativo da Web exige entender o que exatamente você está carregando. Ao criar uma Web confiável a rede pode estar sujeita a todos os tipos de forças sombrias. Você precisa entender as vulnerabilidades da rede se quiser lidar com elas em sua app.
Talvez você ache que já tem uma boa ideia do que os o aplicativo será carregado. Se você usar apenas uma pequena quantidade de HTML estático, JavaScript, CSS e arquivos de imagem, isso pode ser verdade. Mas, assim que você começar misturando recursos de terceiros hospedados em redes de fornecimento de conteúdo, usando solicitações de API dinâmicas e respostas geradas pelo servidor, a imagem rapidamente se torna mais murkier.
Uma estratégia de armazenamento em cache que faça sentido para alguns arquivos CSS pequenos provavelmente não fazem sentido para centenas de imagens grandes, por exemplo.
Saiba quando você carrega
Outra parte do cenário geral do carregamento é quando tudo é carregado.
Algumas solicitações feitas à rede, como solicitação de navegação para seu HTML inicial, são feitas incondicionalmente assim que um usuário visita determinado URL. Esse HTML pode conter referências fixadas no código a CSS ou JavaScript essenciais que também devem ser carregados para exibir sua página interativa. Esses todas as solicitações ficam no caminho crítico de carregamento. Você vai precisar de forma agressiva armazená-los em cache para agilizar o processo.
Outros recursos, como solicitações de API ou recursos de carregamento lento, podem não começar a carregar até bem depois de todo o carregamento inicial ser concluído. Se Essas solicitações só acontecem após uma sequência específica de interações do usuário. um conjunto completamente diferente de recursos pode acabar sendo solicitado em várias visitas à mesma página. Uma estratégia de armazenamento em cache menos agressiva é geralmente apropriado para conteúdo que você identificou como fora da o caminho crítico de carregamento.
As colunas Nome e Tipo ajudam com o que
As colunas Nome e Tipo ajudam a fornecer uma imagem 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 que seu navegador solicitou, embora você só veja
a última parte do caminho do URL listada. Por exemplo, se
https://example.com/main.css for carregado, você acabará vendo apenas main.css
listadas em Nome.
Os últimos caracteres do caminho do URL, seguindo o
(por exemplo, "css"), são conhecidas como a extensão do URL.
A extensão do URL geralmente informa que 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 com quando
Examine a coluna Cascata, começando no topo e descendo. A o comprimento de cada barra representa o tempo total gasto no carregamento para cada recurso. Como saber a diferença entre uma solicitação feita como do caminho crítico de carregamento e de uma solicitação acionada dinamicamente, muito depois de o carregamento inicial da página ser 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 um
hierarquia) dessa solicitação de navegação inicial, com base em quais imagens, scripts
e define o estilo das referências do documento HTML.
A hierarquia mostra que, assim que o carregamento de v2.html terminar, as solicitações
dos recursos a que ele faz referência (também chamados de sub-recursos). A
navegador pode solicitar diversos sub-recursos ao mesmo tempo, e isso é
representada pelas barras sobrepostas na coluna Cascata para main.css e
logo.svg. Por fim, é possível observar na captura de tela que main.js inicia
o carregamento por último e termina depois que os outros três URLs são concluídos
.