Monitore e melhore o desempenho de carregamento do seu aplicativo web

Hoje, grandes aplicações web são muitas vezes montadas a partir de muitas peças independentes, todas carregando seus próprios dados e recursos. Quando todas essas peças competem pela mesma conexão de rede, o congestionamento pode aumentar e a experiência do usuário pode ser prejudicada.

Para resolver esse problema, temos o prazer de apresentar um novo recurso que os desenvolvedores web podem começar a testar no Microsoft Edge hoje: Protetores de eficiência de rede.

Se você é um desenvolvedor web, melhorar o desempenho de carregamento do seu aplicativo começa sabendo no que focar primeiro. No entanto, quando seu aplicativo da web incorpora uma combinação de conteúdo próprio e de terceiros de diferentes fontes, a otimização do desempenho depende de cada uma dessas peças, não apenas do que você construiu. É por isso que identificar os recursos que precisam ser otimizados para melhorar o tempo de carregamento do seu aplicativo é crucial, e é exatamente isso que o recurso Network Efficiency Guardrails faz.

Portanto, se você estiver trabalhando em um aplicativo que incorpora conteúdo, continue lendo para saber mais sobre os Network Efficiency Guardrails e comece a usá-los.

Detectando padrões incorretos de carregamento de recursos

Com base na nossa própria experiência de trabalho com grandes aplicações baseadas na Web, sabemos que existem certos padrões de carregamento de recursos que têm um impacto desproporcional no desempenho. Por exemplo:

• Imagens muito grandes
• Recursos não compactados
• Grande data: URLs

Com o recurso Network Efficiency Guardrails, você pode solicitar ao navegador que monitore o uso de recursos de rede do seu aplicativo. Assim que o monitoramento da rede é iniciado, o navegador identifica automaticamente padrões ineficientes de carregamento de recursos e os reporta a você. Você pode então usar essas informações para otimizar seu aplicativo para todos os usuários.

Na prática, primeiro você opta pelo recurso definindo uma Política de Documentos. Depois de fazer isso, os padrões de carregamento ofensivos detectados pelo navegador serão relatados como violações de política por meio do API de relatóriosum mecanismo de plataforma web que permite enviar relatórios estruturados de volta ao seu servidor quando algo notável acontece em tempo de execução.

O que é relatado

Atualmente, quando você aceita o recurso Network Efficiency Guardrails, o Microsoft Edge usará os seguintes critérios para identificar violações de política:

• Recursos baseados em texto que não são compactados por HTTP.
• Imagens maiores que 200 kB.
• data: URLs maiores que 100 KB.

Esses são nossos critérios iniciais e acreditamos que eles são eficazes para sinalizar padrões de uso de recursos atípicos para aplicativos com bom desempenho.

Escolhemos esses critérios com base em dados agregados do mundo real, nas melhores práticas estabelecidas do setor e Descobertas do Almanaque da Web. Para saber mais sobre como esses valores foram escolhidos, você pode ler sobre isso em nosso documento explicativo de recursos. Esperamos fazer alterações nesses valores à medida que continuamos a coletar mais feedback e dados.

Experimente hoje mesmo os Guardrails de Eficiência de Rede

O recurso está disponível no Microsoft Edge, a partir da versão 146. Para experimentá-lo, primeiro você precisa habilitá-lo:

1. No Edge, vá para edge://flags.
2. Tipo “Recursos experimentais da plataforma Web” no Sinalizadores de pesquisa caixa de texto na parte superior.
3. Sob o Recursos experimentais da plataforma web seção, selecione Habilitado no menu suspenso.
4. Reinicie o Edge.

Habilite a política de documentos em seu site

Em seguida, opte pelo recurso ativando a política de documentos em seu site, o que você pode fazer de uma destas duas maneiras:

• Defina a política do documento enviando os seguintes cabeçalhos de resposta HTTP do seu servidor:

  Document-Policy:network-efficiency-guardrails; report-to=neg-endpoint
Reporting-Endpoints: neg-endpoint="/neg-reporting/"

  O report-to o nome e o valor do endpoint ainda não são importantes. Eles são necessários apenas para que você possa começar a ver os relatórios, mas ainda não precisa ter o endpoint do servidor em execução.

• Ou defina os cabeçalhos de resposta acima criando uma substituição local no DevTools. Para saber como fazer isso, veja Substituir cabeçalhos de resposta HTTP.

  Isso pode ser útil para começar rapidamente, pois você não precisa modificar o código do servidor.

Veja as violações denunciadas

Agora que tudo está configurado, você pode usar seu aplicativo normalmente e o navegador começará a relatar padrões de uso de rede problemáticos. Você pode visualizar as violações relatadas no DevTools ou no seu servidor.

Usar DevTools para isso é uma maneira simples de começar. À medida que as violações forem detectadas, elas aparecerão no Console ferramenta como mensagens de erro:

E você também pode vê-los no Aplicativo ferramenta, sob o API de relatórios seção, onde você pode encontrar mais detalhes sobre cada relatório:

Visualizar os relatórios no DevTools é uma ótima maneira de começar. No entanto, se quiser usar Network Efficiency Guardrails na produção e receber relatórios reais dos dispositivos dos seus usuários, você também precisará configurar um endpoint de relatório no seu servidor.

Configurar um ponto final do servidor de relatórios

Para coletar relatórios em produção, use o report-to campo no Document-Policy cabeçalho, dando-lhe o nome de sua escolha. E então especifique o valor para este endpoint do servidor em Reporting-Endpoints:

Document-Policy: network-efficiency-guardrails; report-to=neg-endpoint
Reporting-Endpoints: neg-endpoint="/neg-reporting/"

Agora, configure o /neg-reporting/ endpoint em seu servidor e certifique-se de que ele pode receber os relatórios, bem como aceitar solicitações de simulação se você estiver usando um endpoint de origem cruzada.

Para saber mais, leia o API de relatórios documentação no MDN, e nosso explicador de recursos.

Ver relatórios do lado do cliente

Você também pode recuperar relatórios de violação no cliente com código JavaScript. Os relatórios são expostos ao documento onde foram criados, por meio da API Reporting do lado do cliente.

Use o Interface ReportingObserver acessar esses relatórios à medida que são gerados e procurar relatórios que tenham ReportBody.featureId === "network-efficiency-guardrails".

Deixe-nos saber o que você pensa

O recurso Network Efficiency Guardrails está em seus estágios iniciais de desenvolvimento e adoraríamos que você experimentasse e compartilhasse seus comentários conosco.

Conhecer os padrões de uso de rede específicos do seu aplicativo pode nos ajudar a projetar a API certa para você.

Estamos explorando ativamente as seguintes questões em aberto, então agora é uma ótima oportunidade para testar o recurso e nos ajudar a melhorá-lo:

• Ajustar as proteções existentes: ajude-nos a detectar melhor os padrões de uso da rede com base em seus dados e feedback.
• Adicionando novas proteções: existem padrões adicionais que deveríamos considerar?
• Relatórios entre quadros: como um quadro pai deve monitorar um quadro filho? O monitoramento bidirecional deveria ser possível? Como as proteções devem ser aplicadas em estruturas embutidas?

Confira o Explicador dos Guardrails de Eficiência de Rede e deixe-nos saber seu feedback por abrindo uma nova edição.