web vitals extension
v1.5.3
Uma extensão do Chrome para medir as métricas para uma instalação saudável do site agora
Essa extensão mede as três principais métricas da Web Vitals de uma maneira que corresponda à maneira como elas são medidas pelo Chrome e relatadas a outras ferramentas do Google (por exemplo, relatório de experiência do usuário do Chrome, insights de velocidade da página, console de pesquisa).
Ele suporta todos os vitais principais da Web e aproveita a biblioteca da Web-Vitals sob o capô para capturar:
Ele também suporta as métricas de diagnóstico:
A extensão do Chrome da Web Vitals pode ser instalada na Chrome Web Store.
Se você estiver procurando por uma compilação de ponta mais sangrando, também pode instalar a versão da extensão do Master.
Google Chrome
web-vitals-extension-master .chrome://extensions ).web-vitals-extension-master em qualquer lugar da página para importá-la (não exclua a pasta depois). 
O crachá ambiente ajuda a verificar se uma página que passa pelos limiares principais da Web.
Depois de instalado, a extensão exibirá um ícone de crachá de estado desativado até você navegar para um URL. Nesse ponto, ele atualizará o crachá para verde, âmbar ou vermelho, dependendo de o URL passar os limites principais da Web Vitals.
O crachá tem vários estados:
Se uma ou mais métricas estiverem falhando, o crachá animará os valores dessas métricas (essa animação pode ser desligada na tela de opções).
Clicar no ícone de crachá ambiental permitirá que você perfure os valores métricos individuais. Nesse modo, a extensão também dirá se uma métrica exigir uma ação do usuário.
Por exemplo, a interação com a próxima tinta requer uma interação real (por exemplo, clique/toque) com a página e estará em uma Waiting for input... Estado até que este seja o caso. Recomendamos consultar a documentação da Web.Dev para LCP, CLS e INP para entender quando os valores métricos liquidarem.
O pop-up combina as experiências locais da Web Core Web com dados de usuários reais do campo através da API do Relatório UX do Chrome (CRUX). Essa integração fornece informações contextuais para ajudá -lo a entender como suas experiências individuais são semelhantes a outros usuários de desktop na mesma página. Também adicionamos uma nova opção para "comparar experiências locais para telefonar para os dados de campo", se necessário. Observe que os dados do Crux podem não estar disponíveis para algumas páginas; nesse caso, tentamos carregar dados de campo para a origem como um todo.
A sobreposição exibe uma tela Heads Up (HUD) que sobrepõe sua página. É útil se você precisar de uma visão persistente de suas métricas principais da Web Vitals durante o desenvolvimento. Para ativar a sobreposição:
Display HUD overlay e clique em 'Salvar'
O recurso de log do console da extensão da Web Vitals fornece uma visão de diagnóstico de todas as métricas suportadas. Para ativar os logs do console:
Console logging e clique em 'Salvar'Web Vitals Para filtrar métricas desnecessárias, adie um sinal de menos ao nome métrico. Por exemplo, defina o filtro para Web Vitals Extension -CLS -LCP para filtrar informações de diagnóstico CLS e LCP.
Informações de diagnóstico para cada métrica são registradas como um grupo de console preso pelo nome da extensão, [Web Vitals Extension] , o que significa que você precisará clicar nessa linha para alternar o grupo aberto e fechado.
Os tipos de informações de diagnóstico variam por métrica. Por exemplo, as informações do LCP incluem:
Para algumas métricas (LCP e INP), as quebras podem ser salvas nas marcas de tempo do usuário, usando performance.measure .
Para as outras métricas, o Chrome DevTools normalmente fornece informações suficientes para que não sejam necessárias quebras adicionais.
As contribuições para este projeto são bem -vindas na forma de solicitações ou problemas de tração. Consulte Contribuindo.md para obter mais detalhes.
Se seu feedback estiver relacionado à maneira como medimos as métricas, registre um problema contra os vitais da Web diretamente.
src/browser_action/vitals.js : Script que aproveita o WebVitais.js para coletar métricas e transmitir alterações métricas para o Badging e o HUD. Fornece uma pontuação geral das métricas que podem ser usadas para emblema.src/bg/background.js : executa atualizações de ícones de crachá usando dados fornecidos pelo Vitals.js. Passa ao longo dos dados para popup.js para exibir o resumo das métricas locais mais detalhadas.src/browser_action/popup.js : Script de conteúdo que lida com relatórios de métricas detalhados de renderização na janela pop-up exibida ao clicar no ícone do crachá.src/options/options.js : Opções de interface do usuário (configuração salva) para recursos avançados como a sobreposição do HUD Quem é o público principal para esta extensão?
O público principal para esta extensão são os desenvolvedores que desejam feedback instantâneo sobre como estão suas páginas nas métricas principais da Web Vitals durante o desenvolvimento de uma máquina de mesa.
Como devo interpretar os números de métricas relatados por esta ferramenta?
Esta extensão relata métricas para sua máquina de desktop ou laptop. Em muitos casos, esse hardware será significativamente mais rápido que o do telefone celular mediano que seus usuários podem ter. Por esse motivo, é fortemente recomendado que você teste o uso de ferramentas como Lighthouse e em hardware móvel real (por exemplo, via WebPageTest) para garantir que todos os seus usuários tenham uma experiência positiva.
Que ações posso tomar para melhorar meus vitais principais da Web?
Estamos disponibilizando um conjunto de guias para otimizar cada uma das métricas principais da Web Vitals, se você achar que sua página não estiver passando por um limite específico:
O Lighthouse também inclui auditorias de ação adicional para essas métricas.
Nós imaginamos que os usuários usarão a extensão para feedback instantâneo sobre métricas (para sua máquina de mesa), mas farão uma auditoria de farol para (1) uma visão diagnóstica de como essas métricas parecem em um dispositivo móvel mediano e (2) especificamente o que você pode fazer para melhorar.
Apache 2.0
