Lighthouse é uma ferramenta automatizada de código aberto desenvolvida pelo Google para melhorar a qualidade das páginas da web. Ele audita seu site em várias métricas, incluindo desempenho, acessibilidade, práticas recomendadas, SEO e critérios de aplicativos web progressivos (PWA). Embora seja um desafio alcançar uma pontuação perfeita no Lighthouse, isso é possível por meio da otimização sistemática. Este guia orientará você nas etapas necessárias para aprimorar seu site e buscar uma pontuação Lighthouse de 100%.

1. Otimização de desempenho

O desempenho é um componente crítico da pontuação do Lighthouse. Veja como você pode melhorá-lo:

Carregamento lento

Implemente o carregamento lento de imagens e vídeos para garantir que eles só carreguem quando aparecerem na janela de visualização.

document.addEventListener("DOMContentLoaded", function() {
    let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

    if ("IntersectionObserver" in window) {
        let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    let lazyImage = entry.target;
                    lazyImage.src = lazyImage.dataset.src;
                    lazyImage.classList.remove("lazy");
                    lazyImageObserver.unobserve(lazyImage);
                }
            });
        });

        lazyImages.forEach(function(lazyImage) {
            lazyImageObserver.observe(lazyImage);
        });
    } else {
        // Fallback for browsers without IntersectionObserver
        let lazyLoad = function() {
            let scrollTop = window.pageYOffset;
            lazyImages.forEach(function(img) {
                if (img.offsetTop 




  
  
  Compressão


Use a compactação Brotli ou gzip para seus ativos para reduzir seu tamanho e acelerar o tempo de carregamento.


  
  
  Minificação


Minimize seus arquivos JavaScript, CSS e HTML para remover caracteres desnecessários e reduzir o tamanho dos arquivos.


  
  
  Cache


Aproveite o cache do navegador definindo cabeçalhos de cache apropriados para melhorar o tempo de carregamento dos visitantes recorrentes.


  
  
  CSS crítico


CSS crítico inline para garantir que o conteúdo principal da sua página carregue rapidamente e adiar CSS não crítico.


  
  
  Reduza o tempo de execução do JavaScript


Otimize seu código JavaScript para minimizar o tempo de execução e garantir que seu site permaneça responsivo.


  
  
  2. Melhorias de acessibilidade


A acessibilidade garante que seu site possa ser usado pelo maior número possível de pessoas, incluindo pessoas com deficiência.


  
  
  Contraste de cores


Certifique-se de que as cores do texto e do plano de fundo tenham contraste suficiente para serem facilmente legíveis.


  
  
  Funções ARIA


Use funções e atributos ARIA para melhorar a acessibilidade de seu aplicativo da web.


  
  
  Ordem das guias


Garanta uma ordem de tabulação lógica para elementos interativos para facilitar a navegação usando o teclado.


  
  
  Etiquetas


Adicione rótulos descritivos aos elementos do formulário para torná-los acessíveis aos leitores de tela.


  
  
  3. Melhores práticas


Seguir as práticas recomendadas ajuda a garantir que seu site seja seguro e tenha um bom desempenho.


  
  
  HTTPS


Veicule seu site via HTTPS para garantir uma transmissão segura de dados.


  
  
  Evite conteúdo misto


Certifique-se de que todos os recursos sejam carregados por HTTPS para evitar problemas de conteúdo misto.


  
  
  Auditoria para vulnerabilidades de segurança


Audite regularmente seu código em busca de problemas de segurança e corrija quaisquer vulnerabilidades.


  
  
  4. SEO


SEO ajuda a melhorar a visibilidade do seu site nos resultados de pesquisas.


  
  
  Metatags


Inclua metatags relevantes para o título, a descrição e a janela de visualização.


  
  
  Dados Estruturados


Use dados estruturados (por exemplo, JSON-LD) para ajudar os mecanismos de pesquisa a entender melhor seu conteúdo.


  
  
  Compatível com dispositivos móveis


Certifique-se de que seu site seja compatível com dispositivos móveis e responsivo para atender usuários em vários dispositivos.


  
  
  5. Aplicativo Web Progressivo (PWA)


PWAs fornecem uma experiência nativa semelhante a um aplicativo na web.


  
  
  Arquivo de manifesto


Crie um arquivo de manifesto de aplicativo da web com todas as informações necessárias para tornar seu site um PWA.


  
  
  Trabalhador de serviço


Implemente um service worker para armazenar ativos em cache e ativar a funcionalidade off-line.


  
  
  HTTPS


Certifique-se de que seu site seja veiculado por HTTPS, pois é um requisito para PWAs.


  
  
  Teste e Iteração



  
  
  Execute auditorias Lighthouse regularmente


Use o Chrome DevTools ou o Lighthouse CLI para executar auditorias e resolver quaisquer problemas.


  
  
  Monitore o desempenho


Use ferramentas como WebPageTest, Google PageSpeed ​​​​Insights e GTmetrix para monitorar o desempenho do seu site.


  
  
  Melhoria continua


Atualize e otimize regularmente sua base de código para manter o alto desempenho e uma boa experiência do usuário.


  
  
  Exemplo: Otimizando o Carregamento de Recursos com Pré-carregamento




    
    
    
    


    
    
    






  
  
  Exemplo: Implementando um Service Worker para Cache




// service-worker.js
self.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open('my-cache').then(function(cache) {
            return cache.addAll([
                '/',
                '/index.html',
                '/styles/main.css',
                '/scripts/main.js',
                '/images/logo.png'
            ]);
        })
    );
});

self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request).then(function(response) {
            return response || fetch(event.request);
        })
    );
});





  
  
  Executando o Lighthouse programaticamente


Você pode executar o Lighthouse programaticamente usando o módulo Lighthouse Node:



const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

(async () => {
    const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
    const options = {logLevel: 'info', output: 'html', onlyCategories: ['performance'], port: chrome.port};
    const runnerResult = await lighthouse('https://example.com', options);

    // `.report` is the HTML report as a string
    const reportHtml = runnerResult.report;
    console.log(reportHtml);

    // `.lhr` is the Lighthouse Result as a JS object
    console.log('Report is done for', runnerResult.lhr.finalUrl);
    console.log('Performance score was', runnerResult.lhr.categories.performance.score * 100);

    await chrome.kill();
})();





  
  
  Conclusão


Alcançar uma pontuação Lighthouse perfeita requer um esforço consistente e um compromisso com as melhores práticas. Ao focar na otimização de desempenho, melhorias de acessibilidade, seguir as práticas recomendadas, melhorar o SEO e implementar recursos PWA, você pode melhorar significativamente sua pontuação no Lighthouse. Testes e iterações regulares são essenciais para manter um aplicativo da web de alta qualidade que forneça uma ótima experiência ao usuário.

Lembre-se de que, embora possa ser tentador encontrar atalhos para melhorar sua pontuação no Lighthouse, a otimização genuína resultará em uma melhor experiência do usuário e em um aplicativo da web mais robusto.