Como testar seu site com o Google Lighthouse?

Uma nova ferramenta do Google é testar e fornecer recomendações para melhorar o desempenho, SEO, segurança, práticas recomendadas e acessibilidade.


Google lançado recentemente Farol, uma ferramenta de código aberto para auditar seu site manual e automaticamente.

Quais métricas são testadas pelo Google Lighthouse?

tem mais de 75 métricas ele testa e fornece pontuação geral. Alguns dos seguintes populares que você pode estar interessado como proprietário de um site, analista de SEO, webmasters.

  • atuação – tempo para interatividade, latência, índice de velocidade, otimização de recursos, TTFB, entrega de ativos, tempo de execução de scripts, tamanho do DOM, etc..
  • SEO – Compatível com dispositivos móveis, meta, rastreamento, canônico, estrutura etc..
  • Melhores Práticas – Otimização de imagem, bibliotecas JS, registro de erros do navegador, acessível por HTTPS, vulnerabilidades conhecidas em JS, etc.
  • Acessibilidade  – Elementos da página, idioma, atributos ARIA, etc..
  • PWA (Aplicativo da Web progressivo) – redirecione HTTP para HTTPS, código de resposta ok, carregamento rápido em 3G, tela inicial, porta de visualização etc..

É uma ferramenta fantástica e você pode usar de várias maneiras.

Isso mesmo – de várias maneiras. Se você é um desenvolvedor, pode usá-lo com o Node.js para executar um teste programaticamente. Já existem poucas ferramentas no mercado com tecnologia Lighthouse que oferecem monitoramento contínuo do desempenho do site.

Vamos descobrir como você executa o teste de farol no seu site.

Comece pelo mais fácil.

Medir por web.dev

O Google lançou o web.dev há alguns meses e ganhou boa popularidade. Testar online é fácil.

Vamos para A medida página e insira o URL para executar a auditoria. Levará alguns segundos e você deverá ver os relatórios detalhados com a pontuação geral.

Os resultados também mostram o teste de métricas de sucesso tão bem feito para as auditorias aprovadas e o trabalho nessas necessidades.

Não gaste muito tempo recebendo 100. Mesmo os sites do Google não pontuam isso.

Considere-os como diretrizes e tente melhorar o máximo possível.

Nota: o web.dev emula um teste usando um dispositivo móvel e, enquanto escrevo, não vejo uma opção para testar usando o Desktop.

cromada

Você sabe que o Lighthouse está disponível no seu navegador Chrome? E a boa notícia é que você pode optar por testar usando o Mobile ou o Desktop. Está disponível nas ferramentas do desenvolvedor.

  • Abra o navegador Chrome
  • Acesse seu site para testar
  • Abra as ferramentas do desenvolvedor (pressione F12 se estiver usando o Windows) ou clique com o botão direito do mouse na página e clique em Inspecionar
  • Vá para a guia auditorias

Como você pode ver acima, você tem a opção de escolher o que deseja testar. Isso é ótimo, pois você pode se concentrar em seu objetivo e obter os resultados da auditoria mais rapidamente.

A aparência e os resultados do Chome e web.dev são quase semelhantes.

Mas se você olhar com cuidado, há um grupo de métricas extra aqui – Progressive Web App. Outro motivo para auditar usando o Chrome.

Node.js

O farol está disponível como um módulo de nó. Você pode instalá-lo no servidor e usá-lo programaticamente ou na linha de comando. Vamos ver rapidamente como instalar o Lighthouse para executar alguns testes.

Instalando o Lighthouse no Ubuntu 18.x

A seguir, testei em DigitalOcean servidor. O farol requer o nó LTS 8.9 ou posterior e eu presumo que você já o tenha instalado. Caso contrário, consulte este guia de instalação do Node.js..

Você também exigirá navegador de cromo para ser instalado no servidor. Eu cobri as instruções de instalação aqui.

A instalação do Lighthouse é simples, como você faz em outros módulos.

  • Entre no seu servidor
  • Execute o seguinte comando para instalar

npm install -g farol

Estou usando -g aqui para que seja instalado como módulo global.

[protegido por email]: ~ # npm install -g farol
/ usr / bin / farol -> /usr/lib/node_modules/lighthouse/lighthouse-cli/index.js
/ usr / bin / chrome-debug -> /usr/lib/node_modules/lighthouse/lighthouse-core/scripts/manual-chrome-launcher.js

> [protegido por email] postinstall / usr / lib / node_modules / lighthouse / node_modules / ax-core
> construção do nó / utils / postinstall.js

+ [protegido por email]
adicionou 179 pacotes de 119 colaboradores em 10.094s
[protegido por email]: ~ #

Depois de instalado, execute o comando lighthouse para garantir que ele tenha sido instalado corretamente.

[protegido por email]: ~ # farol
Forneça um URL

Especifique –help para opções disponíveis
[protegido por email]: ~ #

Bom, o farol está pronto para executar a auditoria. Vamos tentar algumas opções de teste.

Para executar um teste usando um navegador sem cabeça

URL do farol –chrome-flags ="–sem cabeça"

Você precisa fornecer um URL absoluto, incluindo http ou https.

Ex:

[protegido por email]: ~ $ farol https://geekflare.com –chrome-flags ="–sem cabeça"
ChromeLauncher Aguardando navegador. + 0ms
ChromeLauncher Aguardando navegador … + 1ms
ChromeLauncher Aguardando navegador ….. + 511ms
ChromeLauncher Aguardando navegador ….. ✓ + 2ms
status Conectando ao navegador + 176ms
status Redefinindo o estado com aproximadamente: em branco + 24ms
status Máquina de benchmarking + 30ms
status Inicializando… + 508ms
status Carregando página & aguardando onload Scripts, CSSUsage, Viewport, ViewportDimensions, ThemeColor, Manifest, RuntimeExceptions, ChromeConsoleMessages, ImageUsage, Acessibilidade, LinkElements, AnchorsWithNoRelNoopener, AppCacheManifest, Doctype, DOMStats, JSLibraries, OptimizedImages, PasswordInstationsMicrosoftCommunityPartnerSpecialist , Hreflang, Conteúdo incorporado, Canonical, RobotsTxt + 27ms
status Recuperando in-page: scripts + 2s
status Recuperando in-page: CSSUsage + 0ms
status Recuperando in-page: Viewport + 0ms
status Recuperando in-page: ViewportDimensions + 0ms
status Recuperando in-page: ThemeColor + 0ms
status Recuperando in-page: manifesto + 0ms
status Recuperando in-page: RuntimeExceptions + 0ms
status Recuperando in-page: ChromeConsoleMessages + 0ms
status Recuperando in-page: ImageUsage + 0ms
status Recuperando in-page: acessibilidade + 0ms
status Recuperando in-page: LinkElements + 0ms
status Recuperando in-page: AnchorsWithNoRelNoopener + 1ms
status Recuperando in-page: AppCacheManifest + 0ms
status Recuperando in-page: Doctype + 0ms
status Recuperando in-page: DOMStats + 0ms
status Recuperando in-page: JSLibraries + 0ms
status Recuperando in-page: OptimizedImages + 0ms
status Recuperando in-page: PasswordInputsWithPreventedPaste + 0ms
status Recuperando in-page: ResponseCompression + 0ms
status Recuperando in-page: TagsBlockingFirstPaint + 0ms
status Recuperando in-page: MetaDescription + 0ms
status Recuperando in-page: FontSize + 0ms
status Recuperando in-page: Links rastreáveis ​​+ 0ms
status Recuperando in-page: MetaRobots + 0ms
status Recuperando in-page: Hreflang + 0ms
status Recuperando in-page: Conteúdo incorporado + 0ms
status Recuperando in-page: Canonical + 0ms
status Recuperando in-page: RobotsTxt + 0ms
status Recuperando rastreamento + 1ms
status Recuperando devtoolsLog & registros de rede + 110ms
Recuperando status: Scripts + 27ms
Recuperando status: CSSUsage + 53ms
Recuperando status: Viewport + 192ms
status Recuperando: ViewportDimensions + 5ms
status Recuperando: ThemeColor + 13ms
Recuperando status: Manifesto + 2ms
Recuperando status: RuntimeExceptions + 295ms
status Recuperando: ChromeConsoleMessages + 1ms
Recuperando status: ImageUsage + 2ms
Recuperando status: Acessibilidade + 22ms
Recuperando status: LinkElements + 526ms
Recuperando status: AnchorsWithNoRelNoopener + 10ms
Recuperando status: AppCacheManifest + 6ms
Recuperando status: Doctype + 20ms
Recuperando status: DOMStats + 4ms
Recuperando status: JSLibraries + 50ms
Recuperando status: OptimizedImages + 25ms
status Recuperando: PasswordInputsWithPreventedPaste + 234ms
Recuperando status: ResponseCompression + 3ms
status Recuperando: TagsBlockingFirstPaint + 7ms
Recuperando status: MetaDescription + 6ms
Recuperando status: FontSize + 7ms
status Recuperando: CrawlableLinks + 245ms
Recuperando status: MetaRobots + 6ms
Recuperando status: Hreflang + 2ms
Recuperando status: Conteúdo incorporado + 2ms
Recuperando status: Canonical + 3ms
Recuperando status: RobotsTxt + 6ms
status Redefinindo o estado com aproximadamente: em branco + 19ms
status Carregando página & aguardando carga ServiceWorker, Offline, StartUrl + 24ms
status Recuperando in-page: ServiceWorker + 59ms
status Recuperando in-page: off-line + 0ms
status Recuperando in-page: StartUrl + 1ms
status Recuperando devtoolsLog & registros de rede + 0ms
Recuperando status: ServiceWorker + 2ms
Recuperando status: off-line + 1ms
Recuperando status: StartUrl + 1ms
status Redefinindo o estado com aproximadamente: em branco + 5ms
status Carregando página & aguardando carga HTTPRedirect, HTMLWithoutJavaScript + 48ms
status Recuperando in-page: HTTPRedirect + 260ms
status Recuperando in-page: HTMLWithoutJavaScript + 0ms
status Recuperando devtoolsLog & registros de rede + 0ms
Recuperando status: HTTPRedirect + 7ms
status Recuperando: HTMLWithoutJavaScript + 12ms
status Desconectando do navegador … + 7ms
status Analisando e executando auditorias … + 6ms
status Avaliando: Usa HTTPS + 3ms
status Avaliando: Redireciona o tráfego HTTP para HTTPS + 24ms
status Avaliando: registra um trabalhador de serviço que controla a página e o start_url + 1ms
status Avaliando: A página atual responde com 200 quando offline + 0ms
status Avaliando: Possui uma tag “ com largura ” ou `escala inicial` + 1ms
status Avaliando: Contém algum conteúdo quando o JavaScript não está disponível + 1ms
status Avaliando: Primeira pintura com conteúdo + 6ms
status Avaliando: Primeira pintura significativa + 54ms
status Avaliando: o carregamento da página é rápido o suficiente em redes móveis + 10ms
status Avaliando: Índice de velocidade + 33ms
status Avaliando: Screenshot Miniaturas + 529ms
status Avaliando: Captura de tela final + 287ms
status Avaliando: latência estimada de entrada + 2ms
status Avaliando: Nenhum erro do navegador registrado no console + 16ms
status Avaliando: Os tempos de resposta do servidor são baixos (TTFB) + 1ms
status Avaliando: Primeiro CPU ocioso + 1ms
status Avaliando: Tempo para interativo + 30ms
status Avaliando: Marcas e medidas de tempo do usuário + 0ms
status Avaliando: Minimize a profundidade de solicitações críticas + 2ms
status Avaliando: Evite redirecionamentos de várias páginas + 3ms
status Avaliando: o manifesto do aplicativo Web atende aos requisitos de instalabilidade + 2ms
status Avaliando: configurado para uma tela inicial personalizada + 1ms
status Avaliando: define uma cor do tema da barra de endereço + 0ms
status Avaliando: o conteúdo é dimensionado corretamente para a janela de visualização + 1ms
status Avaliando: Exibe imagens com proporção correta + 0ms
status Avaliando: evita APIs descontinuadas + 1ms
status Avaliando: Minimiza o trabalho do thread principal + 0ms
status Avaliando: tempo de execução do JavaScript + 11ms
status Avaliando: pré-carregar solicitações de chave + 3ms
status Avaliando: pré-conectar às origens necessárias + 2ms
status Avaliando: Todo o texto permanece visível durante o carregamento de fontes da web + 2ms
status Avaliando: solicitações de rede + 1ms
status Avaliando: Métricas + 2ms
status Avaliando: start_url responde com 200 quando offline + 1ms
status Avaliando: o site funciona em vários navegadores + 1ms
status Avaliando: as transições de página não parecem bloquear na rede + 0ms
status Avaliando: cada página tem um URL + 0ms
status Avaliando: os atributos `[ária – *]` correspondem às suas funções + 1ms
status Avaliando: `[role]` s têm todos os atributos `[aria – *]` necessários + 1ms
status Avaliando: Elementos com `[role]` que requerem filhos específicos `[role]` s, estão presentes + 0ms
status Avaliando: `[role]` s estão contidos pelo elemento pai necessário + 1ms
status Avaliando: os valores `[role]` são válidos + 1ms
status Avaliando: os atributos `[ária – *]` têm valores válidos + 0ms
status Avaliando: os atributos `[ária – *]` são válidos e não estão incorretos + 1ms
status Avaliando: “ os elementos contêm um “ elemento com `[kind ="legendas"] `+ 1ms
status Avaliando: os botões têm um nome acessível + 1ms
status Avaliando: a página contém um cabeçalho, pular link ou região de referência + 1ms
status Avaliando: as cores de plano de fundo e primeiro plano têm uma taxa de contraste suficiente + 1ms
status Avaliando: “ ‘contém apenas elementos “ e “ grupos, “ ou “ ordenados corretamente. + 1ms
status Avaliando: os itens da lista de definição são agrupados em “ elementos + 0ms
status Avaliando: O documento possui um “ elemento + 1ms
status Avaliando: os atributos `[id]` na página são únicos + 1ms
status Avaliando: “ ou “ os elementos têm um título + 1ms
status Avaliando: “ o elemento possui um atributo `[lang]` + 0ms
status Avaliando: “ o elemento tem um valor válido para o atributo `[lang]` + 1ms
status Avaliando: Os elementos da imagem têm atributos `[alt]` + 1ms
status Avaliando: “ os elementos têm `[alt]` texto + 1ms
status Avaliando: os elementos do formulário têm rótulos associados + 0ms
status Avaliando: Apresentacional `

Os elementos `evitam usar o atributo` `,` `ou o` [summary] `. + 1ms
status Avaliando: os links têm um nome discernível + 1ms
status Avaliando: As listas contêm apenas `
  • `elementos e elementos de suporte ao script (` `e` `). + 1ms
    status Avaliando: Listar itens (`
  • `) estão contidos em`
      `ou`
        `elementos pai + 1ms
        status Avaliando: O documento não usa “ + 0ms
        status Avaliando: `[escalável pelo usuário ="não"] `não é usado no elemento` `e o atributo` [maximum-scale] `não é menor que 5. + 1ms
        status Avaliando: “ os elementos têm `[alt]` texto + 1ms
        status Avaliando: Nenhum elemento possui um valor `[tabindex]` superior a 0 + 1ms
        status Avaliando: Células em um `
  • O elemento `que usa o atributo` [headers] `refere-se apenas a outras células da mesma tabela. + 1ms
    status Avaliando: “ elementos e elementos com `[role ="columnheader"/"rowheader"] `tem células de dados que eles descrevem. + 0ms
    status Avaliando: os atributos `[lang]` têm um valor válido + 1ms
    status Avaliando: “ os elementos contêm um “ elemento com `[kind ="legendas"] `+ 1ms
    status Avaliando: “ os elementos contêm um “ elemento com `[kind ="descrição"] `+ 1ms
    status Avaliando: os valores `[accesskey]` são únicos + 1ms
    status Avaliando: os controles personalizados têm rótulos associados + 0ms
    status Avaliando: Os controles personalizados têm funções ARIA + 1ms
    status Avaliando: O foco do usuário não é capturado acidentalmente em uma região + 0ms
    status Avaliando: Os controles interativos têm foco no teclado + 0ms
    status Avaliando: Os títulos não pulam os níveis + 0ms
    status Evaluation: Elementos interativos indicam sua finalidade e estado + 1ms
    status Avaliando: A página possui uma ordem lógica de tabulação + 0ms
    status Avaliando: o foco do usuário é direcionado para o novo conteúdo adicionado à página + 1ms
    status Avaliando: o conteúdo fora da tela está oculto da tecnologia assistencial + 0ms
    status Avaliando: os elementos de referência HTML5 são usados ​​para melhorar a navegação + 0ms
    status Avaliando: a ordem visual na página segue a ordem do DOM + 0ms
    status Avaliando: Usa política de cache eficiente em ativos estáticos + 1ms
    status Evaluation: Evita enormes cargas úteis da rede + 3ms
    status Avaliando: adie imagens fora da tela + 1ms
    status Avaliando: elimine recursos de bloqueio de renderização + 12ms
    status Avaliando: Minify CSS + 28ms
    status Avaliando: Minify JavaScript + 64ms
    status Avaliando: Adie CSS + 69ms não utilizados
    status Avaliando: sirva imagens em formatos de última geração + 12ms
    status Avaliando: codifique imagens com eficiência + 11ms
    status Avaliando: Ative a compactação de texto + 6ms
    status Avaliando: Dimensione corretamente as imagens + 6ms
    status Avaliando: use formatos de vídeo para conteúdo animado + 7ms
    status Avaliando: evita o cache do aplicativo + 11ms
    status Avaliando: a página possui o doctype HTML + 0ms
    status Avaliando: evita um tamanho DOM excessivo + 1ms
    status Avaliando: os links para destinos de origem são seguros + 2ms
    status Avaliando: Evita solicitar a permissão de geolocalização no carregamento da página + 1ms
    status Avaliando: Evita `document.write ()` + 0ms
    status Avaliando: Evita bibliotecas JavaScript front-end com vulnerabilidades de segurança conhecidas + 0ms
    status Avaliando: Bibliotecas JavaScript detectadas + 9ms
    status Avaliando: Evita solicitar a permissão de notificação no carregamento da página + 1ms
    status Avaliando: Permite que os usuários colem nos campos de senha + 0ms
    status Avaliando: Usa HTTP / 2 para seus próprios recursos + 0ms
    status Avaliando: usa ouvintes passivos para melhorar o desempenho da rolagem + 1ms
    status Avaliando: O documento possui uma meta descrição + 0ms
    status Avaliando: a página possui um código de status HTTP bem-sucedido + 1ms
    status Avaliando: o documento usa tamanhos de fonte legíveis + 5ms
    status Avaliando: os links têm texto descritivo + 1ms
    status Avaliando: a página não está impedida de indexar + 1ms
    status Avaliando: robots.txt é válido + 2ms
    status Avaliando: O documento possui um `hreflang` válido + 1ms
    status Avaliando: Documento evita plugins + 1ms
    status Avaliando: O documento possui um `rel = canonical` válido + 0ms
    status Avaliando: a página é compatível com dispositivos móveis + 1ms
    status Avaliando: dados estruturados são válidos + 0ms
    status Gerando resultados … + 0ms
    ChromeLauncher Killing Chrome instance 7098 + 59ms
    Saída html da impressora gravada em /home/chandan/geekflare.com_2019-01-20_19-29-35.report.html + 46ms
    Protip CLI: Execute o farol com `–view` para abrir imediatamente o relatório HTML no seu navegador + 1ms

    Na segunda última linha, você pode ver que ele imprimiu o caminho onde posso encontrar o relatório. Por padrão, ele gera um relatório em formato HTML que você pode visualizar baixando no seu PC ou servindo-o através de algum servidor web.

    Mas, e se você precisar gerar um relatório em JSON formato?

    É factível da seguinte forma.

    URL do farol –chrome-flags ="–sem cabeça" –saída json –output-path URL.json

    Ao usar o Lighthouse CLI, você tem total controle para usar da maneira que deseja. Eu recomendo fortemente verificar o Repositório do GitHub para saber mais sobre o uso da CLI ou programaticamente.

    Conclusão

    O Google Lighthouse parece uma ferramenta promissora para realizar um teste de continuidade para melhorar o desempenho e a usabilidade do site. Se você está usando o WordPress e quer acelerar o carregamento do site, confira Foguete.

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map