lighthouse
v12.2.2
O Lighthouse analisa aplicativos e páginas da web, coletando métricas de desempenho modernas e insights sobre as práticas recomendadas para desenvolvedores.
O Lighthouse é integrado diretamente ao Chrome DevTools, no painel “Lighthouse”.
Instalação : instale o Chrome.
Execute-o : abra o Chrome DevTools, selecione o painel Lighthouse e clique em "Gerar relatório".
A extensão do Chrome estava disponível antes do Lighthouse estar disponível nas Ferramentas para desenvolvedores do Chrome e oferece funcionalidade semelhante.
Instalação : instale a extensão da Chrome Web Store.
Execute-o : siga o guia de início rápido da extensão.
A CLI do Node oferece maior flexibilidade em como as execuções do Lighthouse podem ser configuradas e relatadas. Os usuários que desejam um uso mais avançado ou que desejam executar o Lighthouse de forma automatizada devem usar o Node CLI.
Nota O Lighthouse requer o Node 18 LTS (18.x) ou posterior.
Instalação :
npm install -g lighthouse
# or use yarn:
# yarn global add lighthouse Execute : lighthouse https://airhorner.com/
Por padrão, o Lighthouse grava o relatório em um arquivo HTML. Você pode controlar o formato de saída passando sinalizadores.
$ lighthouse --help
lighthouse <url> <options>
Logging:
--verbose Displays verbose logging [boolean] [default: false]
--quiet Displays no progress, debug logs, or errors [boolean] [default: false]
Configuration:
--save-assets Save the trace contents & devtools logs to disk [boolean] [default: false]
--list-all-audits Prints a list of all available audits and exits [boolean] [default: false]
--list-trace-categories Prints a list of all required trace categories and exits [boolean] [default: false]
--additional-trace-categories Additional categories to capture with the trace (comma-delimited). [string]
--config-path The path to the config JSON.
An example config file: core/config/lr-desktop-config.js [string]
--preset Use a built-in configuration.
WARNING: If the --config-path flag is provided, this preset will be ignored. [string] [choices: "perf", "experimental", "desktop"]
--chrome-flags Custom flags to pass to Chrome (space-delimited). For a full list of flags, see https://bit.ly/chrome-flags
Additionally, use the CHROME_PATH environment variable to use a specific Chrome binary. Requires Chromium version 66.0 or later. If omitted, any detected Chrome Canary or Chrome stable will be used. [string] [default: ""]
--port The port to use for the debugging protocol. Use 0 for a random port [number] [default: 0]
--hostname The hostname to use for the debugging protocol. [string] [default: "localhost"]
--form-factor Determines how performance metrics are scored and if mobile-only audits are skipped. For desktop, --preset=desktop instead. [string] [choices: "mobile", "desktop"]
--screenEmulation Sets screen emulation parameters. See also --preset. Use --screenEmulation.disabled to disable. Otherwise set these 4 parameters individually: --screenEmulation.mobile --screenEmulation.width=360 --screenEmulation.height=640 --screenEmulation.deviceScaleFactor=2
--emulatedUserAgent Sets useragent emulation [string]
--max-wait-for-load The timeout (in milliseconds) to wait before the page is considered done loading and the run should continue. WARNING: Very high values can lead to large traces and instability [number]
--enable-error-reporting Enables error reporting, overriding any saved preference. --no-enable-error-reporting will do the opposite. More: https://github.com/GoogleChrome/lighthouse/blob/main/docs/error-reporting.md [boolean]
--gather-mode, -G Collect artifacts from a connected browser and save to disk. (Artifacts folder path may optionally be provided). If audit-mode is not also enabled, the run will quit early.
--audit-mode, -A Process saved artifacts from disk. (Artifacts folder path may be provided, otherwise defaults to ./latest-run/)
--only-audits Only run the specified audits [array]
--only-categories Only run the specified categories. Available categories: accessibility, best-practices, performance, seo [array]
--skip-audits Run everything except these audits [array]
--disable-full-page-screenshot Disables collection of the full page screenshot, which can be quite large [boolean]
Output:
--output Reporter for the results, supports multiple values. choices: "json", "html", "csv" [array] [default: ["html"]]
--output-path The file path to output the results. Use 'stdout' to write to stdout.
If using JSON output, default is stdout.
If using HTML or CSV output, default is a file in the working directory with a name based on the test URL and date.
If using multiple outputs, --output-path is appended with the standard extension for each output type. "reports/my-run" -> "reports/my-run.report.html", "reports/my-run.report.json", etc.
Example: --output-path=./lighthouse-results.html [string]
--view Open HTML report in your browser [boolean] [default: false]
Options:
--version Show version number [boolean]
--help Show help [boolean]
--cli-flags-path The path to a JSON file that contains the desired CLI flags to apply. Flags specified at the command line will still override the file-based ones.
--locale The locale/language the report should be formatted in
--blocked-url-patterns Block any network requests to the specified URL patterns [array]
--disable-storage-reset Disable clearing the browser cache and other storage APIs before a run [boolean]
--throttling-method Controls throttling method [string] [choices: "devtools", "provided", "simulate"]
--throttling
--throttling.rttMs Controls simulated network RTT (TCP layer)
--throttling.throughputKbps Controls simulated network download throughput
--throttling.requestLatencyMs Controls emulated network RTT (HTTP layer)
--throttling.downloadThroughputKbps Controls emulated network download throughput
--throttling.uploadThroughputKbps Controls emulated network upload throughput
--throttling.cpuSlowdownMultiplier Controls simulated + emulated CPU throttling
--extra-headers Set extra HTTP Headers to pass with request
--precomputed-lantern-data-path Path to the file where lantern simulation data should be read from, overwriting the lantern observed estimates for RTT and server latency. [string]
--lantern-data-output-path Path to the file where lantern simulation data should be written to, can be used in a future run with the `precomputed-lantern-data-path` flag. [string]
--plugins Run the specified plugins [array]
--channel [string] [default: "cli"]
--chrome-ignore-default-flags [boolean] [default: false]
Examples:
lighthouse <url> --view Opens the HTML report in a browser after the run completes
lighthouse <url> --config-path=./myconfig.js Runs Lighthouse with your own configuration: custom audits, report generation, etc.
lighthouse <url> --output=json --output-path=./report.json --save-assets Save trace, screenshots, and named JSON report.
lighthouse <url> --screenEmulation.disabled --throttling-method=provided --no-emulatedUserAgent Disable device emulation and all throttling
lighthouse <url> --chrome-flags="--window-size=412,660" Launch Chrome with a specific window size
lighthouse <url> --quiet --chrome-flags="--headless" Launch Headless Chrome, turn off logging
lighthouse <url> --extra-headers "{"Cookie":"monster=blue", "x-men":"wolverine"}" Stringify'd JSON HTTP Header key/value pairs to send in requests
lighthouse <url> --extra-headers=./path/to/file.json Path to JSON file of HTTP Header key/value pairs to send in requests
lighthouse <url> --only-categories=performance,seo Only run the specified categories. Available categories: accessibility, best-practices, performance, seo
For more information on Lighthouse, see https://developers.google.com/web/tools/lighthouse/.
lighthouse
# saves `./<HOST>_<DATE>.report.html`
lighthouse --output json
# json output sent to stdout
lighthouse --output html --output-path ./report.html
# saves `./report.html`
# NOTE: specifying an output path with multiple formats ignores your specified extension for *ALL* formats
lighthouse --output json --output html --output-path ./myfile.json
# saves `./myfile.report.json` and `./myfile.report.html`
lighthouse --output json --output html
# saves `./<HOST>_<DATE>.report.json` and `./<HOST>_<DATE>.report.html`
lighthouse --output-path= ~ /mydir/foo.out --save-assets
# saves `~/mydir/foo.report.html`
# saves `~/mydir/foo-0.trace.json` and `~/mydir/foo-0.devtoolslog.json`
lighthouse --output-path=./report.json --output json
# saves `./report.json` Você pode executar um subconjunto do ciclo de vida do Lighthouse, se desejar, por meio dos sinalizadores CLI --gather-mode ( -G ) e --audit-mode ( -A ).
lighthouse http://example.com -G
# launches browser, collects artifacts, saves them to disk (in `./latest-run/`) and quits
lighthouse http://example.com -A
# skips browser interaction, loads artifacts from disk (in `./latest-run/`), runs audits on them, generates report
lighthouse http://example.com -GA
# Normal gather + audit run, but also saves collected artifacts to disk for subsequent -A runs.
# You can optionally provide a custom folder destination to -G/-A/-GA. Without a value, the default will be `$PWD/latest-run`.
lighthouse -GA=./gmailartifacts https://gmail.comNa primeira vez que você executar a CLI, você receberá uma mensagem perguntando se o Lighthouse pode relatar anonimamente exceções de tempo de execução. A equipe do Lighthouse usa essas informações para detectar novos bugs e evitar regressões. A desativação não afetará de forma alguma sua capacidade de usar o Lighthouse. Saber mais.
Você também pode usar o Lighthouse programaticamente com o módulo Node.
Leia Usando o Lighthouse programaticamente para obter ajuda para começar.
Leia Configuração do Lighthouse para saber mais sobre as opções de configuração disponíveis.
O Lighthouse pode produzir um relatório como JSON ou HTML.
Relatório HTML:
Executar o Lighthouse com o sinalizador --output=json gera um dump JSON da execução. Você pode visualizar este relatório online visitando https://googlechrome.github.io/lighthouse/viewer/ e arrastando o arquivo para o aplicativo. Você também pode usar o botão "Exportar" na parte superior de qualquer relatório HTML do Lighthouse e abrir o relatório no Lighthouse Viewer.
No Visualizador, os relatórios podem ser compartilhados clicando no ícone de compartilhamento no canto superior direito e fazendo login no GitHub.
Observação : os relatórios compartilhados são armazenados como um Gist secreto no GitHub, na sua conta.
Documentação útil, exemplos e receitas para você começar.
Documentos
Receitas
Vídeos
A sessão do Google I/O 2018 cobre o novo mecanismo de desempenho, a próxima API Lighthouse REST e o uso do relatório Chrome UX para avaliar dados de usuários reais.
A sessão do Google I/O 2017 cobre arquitetura, redação de auditorias personalizadas, integração GitHub/Travis/CI, Chrome headless e muito mais:
Clique na imagem para assistir ao vídeo no YouTube.
Continue lendo para saber os princípios básicos de hacking no Lighthouse. Além disso, consulte Contribuindo para obter informações detalhadas.
# yarn should be installed first
git clone https://github.com/GoogleChrome/lighthouse
cd lighthouse
yarn
yarn build-allnode cli http://example.com
# append --chrome-flags="--no-sandbox --headless --disable-gpu" if you run into problems connecting to ChromeDica de primeiros passos :
node --inspect-brk cli http://example.compara abrir o Chrome DevTools e percorrer todo o aplicativo. Consulte Depurando Node.js com Chrome DevTools para obter mais informações.
# lint and test all files
yarn test
# run all unit tests
yarn unit
# run a given unit test (e.g. core/test/audits/byte-efficiency/uses-long-cache-ttl-test.js)
yarn mocha uses-long-cache-ttl
# watch for file changes and run tests
# Requires http://entrproject.org : brew install entr
yarn watch
# # run linting, unit, and smoke tests separately
yarn lint
yarn unit
yarn smoke
# # run tsc compiler
yarn type-check Alguns de nossos documentos possuem testes que são executados apenas em CI por padrão. Para modificar nossa documentação, você precisará executar yarn build-pack && yarn test-docs localmente para garantir que eles sejam aprovados.
Dependências Adicionais
brew install jqEsta seção detalha os serviços que integraram dados do Lighthouse. Se você está trabalhando em um projeto legal integrando o Lighthouse e gostaria de aparecer aqui, registre um problema neste repositório ou envie um tweet para nós @_____lighthouse!
Web Page Test — Uma ferramenta de código aberto para medir e analisar o desempenho de páginas da web em dispositivos reais. Os usuários podem optar por produzir um relatório Lighthouse juntamente com a análise dos resultados do WebPageTest.
HTTPArchive - HTTPArchive rastreia como a web é construída rastreando 500 mil páginas com Web Page Test, incluindo resultados do Lighthouse, e armazena as informações no BigQuery onde estão disponíveis publicamente.
Calibre - Calibre é uma plataforma abrangente de monitoramento de desempenho executada no Lighthouse. Veja o impacto no desempenho do seu trabalho antes que ele chegue à produção com análises de solicitações pull do GitHub. Acompanhe o impacto de scripts de terceiros. Automatize seu sistema de desempenho com uma API Node.js voltada para desenvolvedores. Experimente o Calibre com um teste gratuito de 15 dias.
DebugBear - DebugBear é uma ferramenta de monitoramento de sites baseada no Lighthouse. Veja como suas pontuações e métricas mudaram ao longo do tempo, com foco na compreensão do que causou cada mudança. DebugBear é um produto pago com avaliação gratuita de 30 dias.
Treo - Treo é Farol como Serviço. Ele fornece testes de regressão, regiões geográficas, redes personalizadas e integrações com GitHub e Slack. Treo é um produto pago com planos para desenvolvedores individuais e equipes.
PageVitals - PageVitals combina Lighthouse, CrUX e testes de campo para monitorar o desempenho de sites. Veja o desempenho do seu site ao longo do tempo e seja alertado se ele ficar muito lento. Faça uma busca detalhada e encontre a causa real de qualquer problema de desempenho. PageVitals é um produto pago com avaliação gratuita de 14 dias.
Screpy - Screpy é uma ferramenta de análise web que pode analisar todas as páginas dos seus sites em um painel e monitorá-las com sua equipe. É desenvolvido pela Lighthouse e também inclui algumas ferramentas de análise diferentes (SERP, W3C, Uptime, etc). Screpy tem planos gratuitos e pagos.
Siteimprove Performance – Siteimprove Performance é uma solução de monitoramento de desempenho da web que permite que um profissional de marketing, gerente ou tomador de decisão entenda e otimize os tempos de carregamento do site. Obtenha insights fáceis de usar com foco em ganhos rápidos e impactantes. Siteimprove Performance é um produto pago com avaliação gratuita de 14 dias.
SpeedCurve — SpeedCurve é uma ferramenta para monitorar continuamente o desempenho da web em diferentes navegadores, dispositivos e regiões. Ele pode agregar qualquer métrica, incluindo pontuações do Lighthouse em várias páginas e sites, e permite definir orçamentos de desempenho com Slack ou alertas por e-mail. SpeedCurve é um produto pago com avaliação gratuita de 30 dias.
Foo - Lighthouse-as-a-service que oferece planos gratuitos e premium. Fornece monitoramento e relatórios históricos de auditorias do Lighthouse com CircleCI, GitHub e outras integrações. Os recursos incluem notificações do Slack, relatórios de comentários de relações públicas e muito mais.
Apdex - Apdex é um serviço de desempenho de sites. Os principais recursos são visualizações históricas de relatórios do Lighthouse, opções móveis/desktop, alertas, monitoramento de tempo de atividade e muito mais. Existem planos pagos flexíveis e um teste gratuito de 30 dias.
Websu - Websu é um projeto de código aberto para fornecer Lighthouse-as-a-Service por meio de uma API REST HTTP simples. Os principais recursos são a capacidade de hospedar e implantar em seu próprio ambiente e resumos históricos de relatórios do Lighthouse.
DTEKT.IO - DTEKT é um serviço de monitoramento de desempenho e tempo de atividade de sites. Ele usa farol para fornecer visibilidade do desempenho de sites de vários locais em vários dispositivos. Oferece três meses de teste gratuito e planos pagos.
SpeedVitals - SpeedVitals é uma ferramenta desenvolvida pelo Lighthouse para medir o desempenho da web em vários dispositivos e locais. Possui vários recursos como visualização de mudança de layout, gráfico em cascata, dados de campo e gráficos de recursos. SpeedVitals oferece planos gratuitos e pagos.
Lighthouse Metrics - Lighthouse Metrics fornece insights de desempenho global com um único teste. Você também pode monitorar seus sites diariamente ou de hora em hora. Lighthouse Metrics oferece testes globais gratuitos e monitoramento de desempenho como um recurso pago com uma avaliação gratuita de 14 dias.
Auditzy - Auditzy™ é uma ferramenta robusta de auditoria e monitoramento de sites que permite analisar a jornada pré-usuário de sua(s) página(s) da web. Analise a métrica de saúde do concorrente, os principais sinais vitais da Web e a tecnologia. Compare suas páginas da web com as de seus concorrentes para entender onde você está liderando ou ficando para trás. Notificação em tempo real com Slack. Tenha uma colaboração perfeita com várias equipes. Automatize suas auditorias de hora em hora, diariamente, semanalmente e assim por diante. Ele tem um teste gratuito com planos pré-pagos.
Lighthouse Metrics China - A primeira ferramenta de métricas Lighthouse projetada especificamente para a China. Experimente recursos incomparáveis de monitoramento de sites com o Lighthouse. Obtenha insights sobre as flutuações de suas pontuações e métricas no âmbito do Grande Firewall da China, permitindo uma compreensão abrangente dos fatores que influenciam cada mudança. Lighthouse Metrics China oferece planos gratuitos e pagos.
DeploymentHawk - DeploymentHawk é uma ferramenta automatizada de auditoria de sites desenvolvida pela Lighthouse. Detecte facilmente problemas de desempenho, acessibilidade e SEO antes que eles afetem seus usuários. DeploymentHawk é um produto pago com avaliação gratuita de 7 dias.
Guardius - Guardius é uma plataforma SaaS DevOps e DevSecOps que integra o Lighthouse para fornecer análise automatizada de desempenho da web. Ele não apenas fornece avaliação de métricas e verificação automática, mas também permite comparações de desempenho em diferentes períodos e observação contínua ao longo do tempo. Além disso, o Guardius oferece alertas predefinidos e personalizados, adaptados às suas necessidades específicas. Uma versão gratuita do Guardius está disponível para os usuários explorarem seus recursos.
PageWatch — PageWatch é uma ferramenta para encontrar páginas problemáticas em seu site. Ele fornece insights sobre erros ortográficos, problemas de layout, páginas lentas (desenvolvido pelo Lighthouse) e muito mais. PageWatch é oferecido em planos gratuitos e pagos.
Fluxguard - Fluxguard fornece monitoramento de alterações de DOM de sites orquestrado com Google Puppeteer e auditado pela Lighthouse. Fluxguard é um produto freemium, com acompanhamento mensal de até 75 páginas gratuitamente.
Microlink — Microlink é um navegador em nuvem como API. Ele oferece relatórios Lighthouse sob demanda, facilitando a construção de qualquer serviço. Funcionalidade semelhante está disponível por meio do projeto de código aberto subjacente denominado browserless.
Wattspeed - Wattspeed é uma ferramenta gratuita que gera instantâneos - capturas históricas de suas páginas da web que incluem pontuações do Lighthouse, uma lista de tecnologias, resultados do validador HTML W3C, tamanho do DOM, informações de conteúdo misto e muito mais.
lighthouse-plugin-field-performance - um plug-in que adiciona métricas de desempenho de usuário real para o URL usando os dados do Relatório UX do Chrome.
lighthouse-plugin-publisher-ads - uma ferramenta para melhorar a velocidade do anúncio e a qualidade geral por meio de uma série de auditorias automatizadas. No momento, isso é direcionado principalmente a sites que usam o Google Ad Manager. Esta ferramenta ajudará na resolução de problemas descobertos, fornecendo uma ferramenta a ser usada para avaliar a eficácia de mudanças iterativas e, ao mesmo tempo, sugerindo feedback acionável.
lighthouse-plugin-crux - um plug-in que coleta rapidamente dados de métricas de usuários reais da API de relatório UX do Chrome.
Outros projetos incríveis de código aberto que usam o Lighthouse.
Veja Arquitetura do Farol.
O Lighthouse relata as métricas de desempenho como seriam experimentadas por um usuário móvel típico em uma conexão 4G e um telefone intermediário de aproximadamente US$ 200. Mesmo que carregue rapidamente no seu dispositivo e na rede, os usuários em outros ambientes terão uma experiência muito diferente no site.
Leia mais em nosso guia sobre otimização.
As pontuações de desempenho do Lighthouse mudarão devido à variabilidade inerente nas tecnologias da web e de rede, mesmo que não tenha havido uma alteração no código. Teste em ambientes consistentes, execute o Lighthouse várias vezes e tome cuidado com a variabilidade antes de tirar conclusões sobre uma mudança que afete o desempenho.
Leia mais em nosso guia para reduzir a variabilidade.
Sim! Detalhes na configuração do Lighthouse.
Boa pergunta. A otimização de rede e CPU é aplicada por padrão em uma execução do Lighthouse. A rede tenta emular a conectividade 4G lenta e a CPU fica 4x mais lenta em relação à velocidade padrão da sua máquina. Se preferir executar o Lighthouse sem limitação, você terá que usar a CLI e desativá-la com os sinalizadores --throttling.* mencionados acima.
Leia mais em nosso guia sobre otimização de rede.
Não. O Lighthouse é executado localmente, auditando uma página usando uma versão local do navegador Chrome instalada na máquina. Os resultados do relatório nunca são processados ou transmitidos para um servidor remoto.
A partir do Lighthouse 8.0, o Lighthouse depende inteiramente do suporte Intl nativo e não usa mais um polyfill Intl . Se você estiver usando o Node 14 ou posterior, não deverá haver problema porque o Node agora é construído com full-icu por padrão.
No entanto, se você estiver usando uma versão small-icu , poderá ver mensagens de log do Lighthouse sobre sua localidade não estar disponível. Para remediar isso, você pode instalar manualmente os dados do ICU usando o módulo full-icu e o sinalizador do nó --icu-data-dir na inicialização.
Dica : consulte Lighthouse Architecture para obter mais informações sobre terminologia e arquitetura.
O Lighthouse pode ser estendido para executar auditorias e coletores personalizados de sua autoria. Isso é ótimo se você já está acompanhando métricas de desempenho em seu site e deseja exibi-las em um relatório Lighthouse.
Se você estiver interessado em executar suas próprias auditorias personalizadas, confira nosso exemplo de auditoria personalizada nas receitas.
Adoraríamos ajuda para escrever auditorias, corrigir bugs e tornar a ferramenta mais útil! Consulte Contribuindo para começar.
Farol , ˈlītˌhous (n): uma torre ou outra ferramenta de estrutura contendo um farol para alertar ou orientar navios em desenvolvimento marítimo .
