Lighthouse es una herramienta automatizada de código abierto desarrollada por Google para mejorar la calidad de las páginas web. Audita su sitio a través de varias métricas, incluido el rendimiento, la accesibilidad, las mejores prácticas, el SEO y los criterios de aplicaciones web progresivas (PWA). Si bien lograr una puntuación Lighthouse perfecta es un desafío, es posible mediante una optimización sistemática. Esta guía lo guiará a través de los pasos necesarios para mejorar su sitio y aspirar a obtener una puntuación Lighthouse del 100 %.

1. Optimización del rendimiento

El rendimiento es un componente fundamental de la puntuación de Lighthouse. Así es como puedes mejorarlo:

Carga lenta

Implemente la carga diferida para imágenes y videos para garantizar que solo se carguen cuando aparecen en la ventana gráfica.

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 




  
  
  Compresión


Utiliza la compresión Brotli o gzip para tus recursos para reducir su tamaño y acelerar los tiempos de carga.


  
  
  Minificación


Minimiza tus archivos JavaScript, CSS y HTML para eliminar caracteres innecesarios y reducir el tamaño de los archivos.


  
  
  Almacenamiento en caché


Aproveche el almacenamiento en caché del navegador configurando encabezados de caché adecuados para mejorar los tiempos de carga para los visitantes que regresan.


  
  
  CSS crítico


CSS crítico en línea para garantizar que el contenido principal de su página se cargue rápidamente y aplazar el CSS no crítico.


  
  
  Reducir el tiempo de ejecución de JavaScript


Optimiza tu código JavaScript para minimizar el tiempo de ejecución y garantizar que tu sitio siga respondiendo.


  
  
  2. Mejoras de accesibilidad


La accesibilidad garantiza que su sitio pueda ser utilizado por la mayor cantidad de personas posible, incluidas aquellas con discapacidades.


  
  
  Contraste de color


Asegúrese de que el texto y los colores de fondo tengan suficiente contraste para que sean fácilmente legibles.


  
  
  Roles de ARIA


Utilice roles y atributos de ARIA para mejorar la accesibilidad de su aplicación web.


  
  
  Orden de tabulación


Asegurar un orden de tabulación lógico para los elementos interactivos para facilitar la navegación mediante el teclado.


  
  
  Etiquetas


Agregue etiquetas descriptivas a los elementos del formulario para que sean accesibles a los lectores de pantalla.


  
  
  3. Mejores prácticas


Seguir las mejores prácticas ayuda a garantizar que su sitio sea seguro y funcione bien.


  
  
  HTTPS


 Sirve tu sitio a través de HTTPS para garantizar una transmisión de datos segura.


  
  
  Evite el contenido mixto


Asegúrese de que todos los recursos se carguen a través de HTTPS para evitar problemas de contenido mixto.


  
  
  Auditoría de vulnerabilidades de seguridad


Audite periódicamente su código para detectar problemas de seguridad y corrija cualquier vulnerabilidad.


  
  
  4. SEO


El SEO ayuda a mejorar la visibilidad de su sitio en los resultados de los motores de búsqueda.


  
  
  Metaetiquetas


Incluya metaetiquetas relevantes para el título, la descripción y la ventana gráfica.


  
  
  Datos estructurados


Utilice datos estructurados (p. ej., JSON-LD) para ayudar a los motores de búsqueda a comprender mejor su contenido.


  
  
  Compatible con dispositivos móviles


Asegúrese de que su sitio sea compatible con dispositivos móviles y responsivo para atender a los usuarios en varios dispositivos.


  
  
  5. Aplicación web progresiva (PWA)


Las PWA brindan una experiencia similar a una aplicación nativa en la web.


  
  
  Archivo de manifiesto


Cree un archivo de manifiesto de aplicación web con toda la información necesaria para convertir su sitio en una PWA.


  
  
  Trabajador del servicio


Implementar un trabajador de servicio para almacenar en caché los activos y habilitar la funcionalidad fuera de línea.


  
  
  HTTPS


Asegúrese de que su sitio funcione a través de HTTPS, ya que es un requisito para las PWA.


  
  
  Pruebas e iteración



  
  
  Realice auditorías de faro con regularidad


Utilice Chrome DevTools o Lighthouse CLI para ejecutar auditorías y solucionar cualquier problema.


  
  
  Monitorear el desempeño


Utiliza herramientas como WebPageTest, Google PageSpeed ​​Insights y GTmetrix para monitorear el rendimiento de tu sitio.


  
  
  Mejora continua


Actualiza y optimiza periódicamente tu código base para mantener un alto rendimiento y una buena experiencia de usuario.


  
  
  Ejemplo: optimización de la carga de recursos con precarga




    
    




  
  
  Ejemplo: implementación de un trabajador de servicio para almacenamiento en caché




// 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);
        })
    );
});





  
  
  Ejecución de Lighthouse mediante programación


Puedes ejecutar Lighthouse mediante programación usando el 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();
})();





  
  
  Conclusión


Lograr una puntuación perfecta en Lighthouse requiere un esfuerzo constante y un compromiso con las mejores prácticas. Al centrarse en la optimización del rendimiento, las mejoras de accesibilidad, seguir las mejores prácticas, mejorar el SEO e implementar funciones de PWA, puede mejorar significativamente su puntuación de Lighthouse. Las pruebas e iteraciones periódicas son clave para mantener una aplicación web de alta calidad que brinde una excelente experiencia de usuario.

Recuerde, si bien puede resultar tentador encontrar atajos para mejorar su puntuación Lighthouse, una optimización genuina dará como resultado una mejor experiencia de usuario y una aplicación web más sólida.