¿Cómo alcanzar un 100 en Google Lighthouse?

¿Cómo alcanzar un 100 en Google Lighthouse?

Posicionarse alto en Google Lighthouse es un trabajo duro cuando su página de WordPress es compleja.

Queríamos compartir nuestra experiencia al lograr un puntaje de desempeño del 100% en la auditoría de Google Lighthouse.

Tabla de contenidos

¿Importa Google Lighthouse?

Los desarrolladores y diseñadores web continuamente perseguimos mejorar el SEO, la accesibilidad y la usabilidad de las webs. Lo hacemos mejorando el código, funcionalidades y rendimiento del sitio, bien. Pero si hay algo que de forma común perseguimos, es la necesidad de buenas herramientas para evaluar y medir el impacto de nuestro trabajo.

Con Google Lighthouse Audit Score, nos aventuramos a afirmar que estamos delante de una muy buena herramienta por su detallado análisis y cómo no, por su alineación con los intereses del motor de búsqueda de Google.

¿Qué es Google Lighthouse Audit?

Google Lighthouse es una herramienta de auditoría de código abierto de Google.

Utiliza su conexión y los datos del sitio para medir el rendimiento de tu sitio web , pero también su rendimiento de SEO, PWA y otras mejores prácticas.

Lighthouse divide las auditorías en 5 áreas:

  • Rendimiento,
  • Accesibilidad,
  • SEO,
  • Buenas prácticas y
  • Aplicaciones web progresivas.

El objetivo es evaluar de forma general la experiencia del usuario y los problemas que podría tener con tu sitio web.

Google Lighthouse audita la página web y la clasifica entre 0 y 100.

¿Qué es una buena puntuación en Lighthouse?

Una puntuación “Buena” (verde) está por encima de 90. Una puntuación Pobre (naranja) oscila entre 89 y 50, y una “mala experiencia del usuario final” (rojo) es una puntuación inferior a 50.

Niveles de puntuación de Google Lighthouse
Rangos de puntuación de Lighthouse: 0 a 49 Deficiente – 50 a 89 Necesita mejorar – 90 a 100 Bueno

Lighthouse de Google frente a PageSpeed Insights

Lighthouse está integrado directamente en Chrome DevTools, en el panel «Lighthouse», pero también se usa como motor de prueba en la herramienta de prueba de rendimiento online Google PageSpeed Insights.

PageSpeed insights LCP FID CLS FCP INP y TTFB
Resultado de PageSpeed Insights de wetopi.com al final del proceso

Si bien Google PageSpeed utiliza la información generada por Lighthouse, enriqueciéndola con datos de tu audiencia,
Lighthouse proporciona otros informes no limitándose exclusivamente a «Rendimiento».

Lighthouse audita otros aspectos como SEO, Accesibilidad, Progressive Web App, etc.

Si eres desarrollador, otra diferencia es que también puedes ejecutar Lighthouse mediante programación. Google Lighthouse está disponible como un módulo nodejs que puede ejecutar desde el código o la línea de comandos.

Mejorando nuestra web con Google Lighthouse

En este artículo, compartiremos cómo mejoramos la puntuación de auditoría de Google Lighthouse de nuestro sitio web.

Empezamos con pocas expectativas. Nuestro WordPress trabajaba con un tema antiguo y demasiado cargado de opciones. Teniendo en cuenta el punto de partida, terminamos con un resultado impresionante.

Sin embargo, este último año actualizamos nuestro site usando el novedoso tema «Full site Editing» de WordPress: «Twenty Twenty-Two». El resultado es: ¡Todavía estamos impactados!

Nunca pensamos que con un tema «Full Site Editing» de WordPress, sería tan fácil obtener una puntuación de 100 en todas las pruebas.

Este es nuestro viaje

  • Desde aquí:
Una mala puntuación de auditoría de Google Lighthouse
  • Hasta aquí :
Resultados de 100 en Google Lighthouse

¿Cómo abrir Lighthouse de Google?

Puedes encontrar Lighthiouse en las herramientas para desarrolladores de tu navegador Chrome.

Para abrir las «Herramientas de desarrollador», selecciona:

  • «Menú superior → View → Desarrollador → Herramientas para desarrolladores» o
  • «⌥+⌘+I» en Mac o
  • «F12+Ctrl+Mayúsculas+I» en Windows.

Nota: también puedes abrirlo desde la parte superior derecha «Menú de tres puntos»:

Acceda a las herramientas de desarrollo desde el menú de tres puntos

En la barra superior donde ves Elementos, Consola, … elige Auditorías.

Desplázate hacia abajo por las opciones y haz clic en Ejecutar auditorías.

Panel Audits de Google en DevTools

Prueba siempre los cambios en un servidor de prueba

Ten en cuenta que el informe de auditoría de Google te sugerirá muchos cambios. Es importante que trabajes siempre en un entorno staging destinado a pruebas.

Para no romper tu web producción durante las pruebas …

Clona tu server producción y crea un entorno «staging» !!!

Clonar un sitio de WordPress con Wetopi es tan fácil como un simple clic.

Clonamos nuestro sitio con la herramienta de clonación de Wetopi. En unos segundos, la clonación nos proporciona un nuevo servidor que se ejecuta en un subdominio de desarrollo totalmente separado del utilizado en producción:

Despliega un entorno staging para probar los cambios sugeridos por Google Lighthouse

¿Qué configuración usar en Google Lighthouse?

En nuestro caso, no hemos querido alterar los valores sugeridos por google.

Ejecutaremos las auditorías con las opciones predeterminadas:

puntuación de optimización con la auditoría de Google con opciones predeterminadas

Después de unos segundos, la auditoría finaliza. Lo más interesante de Google Lighthouse es que nos muestra una lista de oportunidades ordenadas por “Ahorro estimado” en segundos.

Abordemos la primera oportunidad de optimización.

Trabajando en las oportunidades que sugieren los resultados de Google Lighthouse

Este fue nuestro primer esfuerzo de refactorización centrado en la herramienta de auditoría Google Lighthouse . Decidimos adoptar el enfoque experimental y avanzar a través de los hallazgos del informe.

Es importante abordar los pasos con mayor margen de mejora y menor esfuerzo de ejecución. No hagas como nosotros que empezamos por limpiar los CSS.

Aplazar la carga de estilos CSS no utilizados

Optimice el faro de auditoría Aplazar CSS no utilizado

Estábamos cargando una enorme hoja de estilos CSS.

Si trabajas con un tema WordPress super cargado de opciones, este es el precio a pagar.

En nuestro caso, tomamos la decisión de limpiar manualmente este archivo CSS. Eliminamos las secciones que sabíamos que no se usaban. Por ejemplo: todos los estilos de woo-commerce y «slides» animados.

Reemplazar el archivo CSS del tema WordPress

Para tomar el control de nuestro CSS de tema, quitamos la cola del estilo principal del tema y lo reemplazamos con nuestro estilo curado agregando un wp_enqueue .

En nuestro functions.php de nuestro tema hijo, «Child Theme» agregamos este fragmento de código:

function my_load_child_scripts() { 
  wp_dequeue_style( THEME_SHORT.'-theme' ); 
  wp_deregister_style( THEME_SHORT.'-theme' ); 
  wp_enqueue_style( THEME_SHORT . '-child-theme' , get_stylesheet_directory_uri() . '/style.css', array(), false, 'all' );
}

add_action( 'wp_enqueue_scripts', 'my_load_child_scripts', 100);

Identificar el código CSS no utilizado

Para ayudarnos a identificar los bloques de código CSS no utilizados, utilizamos la Herramienta para desarrolladores de Chrome de Coverage .

Esta tarea de «limpieza» requiere mucho tiempo. Terminamos reduciendo nuestro style.css a la mitad de su tamaño original. Principalmente eliminando woo-commerce, todas las funciones del control deslizante y otros códigos CSS no utilizados.

¿El resultado? Saltamos de 54 a 66 en la puntuación de rendimiento de lighthouse:

66 en el resultado de la auditoría de rendimiento

Aplazar la carga de imágenes fuera de pantalla

¡Este «Aplazamiento de imágenes fuera de pantalla» tiene un tiempo de ahorro potencial estimado de 1,05 segundos!

Aplazar imágenes fuera de pantalla

Google hizo un gran trabajo al proporcionarnos «Más información» para ayudarnos a resolver el problema.

Las imágenes fuera de pantalla son imágenes que aparecen «Above de Fold».

Si los usuarios no pueden ver las imágenes fuera de pantalla cuando cargan una página, no hay motivo para descargar las imágenes fuera de pantalla como parte de la carga inicial de la página.

Lazy Loading obliga a que las imágenes se carguen solo cuando están «en la mitad superior de la página»; en otras palabras, se cargan las imágenes conforme las vamos necesitando.

NUEVO: Native Lazy Loading llegó con WordPress 5.5

En nuestro WordPress actual, eliminamos este plugin.

Si prefieres la idea de un plugin para resolver tus necesidades de carga diferida, resolvimos esta primera optimización, después de algunas investigaciones, con Lazy Load de WP Rocket, el plugin más rápido y liviano para resolver este problema. Actualmente está activo en más de 20,000 instalaciones con una calificación de 4 de 5 estrellas. La gran ventaja de este plugin es que pesa menos de 10 KB. No hay opciones para configurar, simplemente instala el plugin y la carga diferida simplemente funcionará.

NOTA: después de la instalación de Lazy Load, ve a la configuración de administrador de WordPress y selecciona la carga diferida de imágenes.

La carga diferida nos llevó de 66 a 70 en la puntuación de desempeño de auditoría.

Agregar la etiqueta de preconexión «preconnect»

El establecimiento de conexiones a menudo implica un tiempo significativo en redes lentas, especialmente cuando se trata de conexiones seguras. Eso ocurre cuando tenemos búsquedas de DNS, redireccionamientos y acabamos realizando viajes de ida y vuelta al servidor que da respuesta a la solicitud del usuario.

La cave consiste en informar con antelación al navegador de nuestra intención. Eso permite al navegador establecer de antemano y en paralelo las conexiones.

¿Cómo añadir el preconnect?

La solución, es bastante sencilla. Consiste en añadir la etiqueta de enlace «preconnect» al inicio de página dentro del bloque header.

Para modificar los encabezados, tenemos que editar en nuestro directorio de temas secundarios, el archivo header.php añadiendo una línea para cada servicio externo al que sabemos nuestra página va a conectar.

<link rel="preconnect" href="https://www.google-analytics.com">
<link rel="preconnect" href="https://stats.g.doubleclick.net">

Elimina los recursos que bloquean el renderizado

Conforme vamos solucionando puntos del informe de Oportunidades, es normal que se vaya produciendo una alternancia entre «Eliminar CSS no utilizado» y «Eliminar recursos que bloquean el renderizado».

Ahora es el momento de reducir «recursos que bloquean el renderizado», es decir revisar el uso de javascript.

Eliminación de videos y su código javascript de bloqueo:

Una gran decisión que tomamos fue eliminar las incrustaciones de video de nuestro servicio de video externo Wistia. Observamos en Auditorías que Wistia CSS y javascript bloqueaban la ejecución del renderizado. Además, ni siquiera las miniaturas para el «previsualizado» estaban optimizadas.

Reemplazamos las incrustaciones de video con infografias simples.

Otra limpieza que hicimos fue eliminar jQuery Migrate (nuestro registro de la consola de Chrome nos dio la pista que muestra » JQMIGRATE : Migrate está instalado, versión 1.4.1″)

jQuery Migrate simplifica el proceso de mover el código antiguo de jQuery a versiones más nuevas de jQuery mediante la identificación de características obsoletas. En nuestro caso, jQuery Migrate no es necesario. Estamos ejecutando plugins y temas actualizados.

Vamos a probar nuestro sitio sin él.

Eliminar jQuery Migrate:

Vamos a agregar este código a nuestro functions.php

//Remove JQuery migrate 

function remove_jquery_migrate( $scripts ) { 
  if ( ! is_admin() && isset( $scripts->registered['jquery'] ) ) { 
    $script = $scripts->registered['jquery']; 
    if ( $script->deps ) { 
      // Check whether the script has any dependencies 
      $script->deps = array_diff( $script->deps, array( 'jquery-migrate' ) );
    } 
  } 
} 

add_action( 'wp_default_scripts', 'remove_jquery_migrate' );

Este fragmento de código, cuando no estamos en "wp-admin", verifica si se utiliza jQuery. Si es así procede a des-registrar jQuery Migrate de la matriz de dependencias.

Revisa siempre que todas las páginas y rincones de tu sitio funcionan como se espera. En nuestro caso todo fue bien.

Volviendo al análisis, un nuevo test con Lighthouse nos dio nuestra primera puntuación en verde de 89 en rendimiento:

La eliminación de videos y de jQuery Migrate, mejora la métrica de rendimiento a 89

NOTA: las últimas versiones de Lighthouse son un poco más estrictas y solo dan verde a partir del 90.

Sirviendo nuestras fuentes de Google y afinando con font-display:

Continuando con nuestra tarea de reducir los bloqueos. La auditoría de Google sugiere configurar font-display .

El nuevo descriptor de visualización de fuentes para @font-face permite a los desarrolladores decidir cómo se representarán (o retrocederán) sus fuentes web, según el tiempo que tarden en cargarse. La idea es no bloquear el proceso de renderizado, por lo que font-face se renderiza con un respaldo al principio si no está cargado, pero la fuente se intercambia tan pronto como se carga.

Otra mejora que podemos hacer es servir las fuentes de Google desde nuestro servidor. Nuestros servidores wetopi son ultrarrápidos y tienen una mejor política de caché.

Deshabilitaremos todas las fuentes de Google en nuestro panel de administración de temas y descargaremos los archivos.

Aquí va un consejo. ¡El sitio de fuentes de Google no proporciona todos los formatos de fuente! queremos al menos woff y woff2 . Encontramos este proyecto en línea: http://google-webfonts-helper Una forma sin complicaciones de autohospedar Google Fonts. @majodev ¡Gracias!

Así es como alojamos nuestras fuentes de Google:

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100;
    font-display: fallback;
    src: local('Roboto Thin'), local('Roboto-Thin'), url('/wp-content/themes/angle-child-theme/fonts/roboto-v18-latin-100.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/wp-content/themes/angle-child-theme/fonts/roboto-v18-latin-100.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: fallback;
    src: local('Roboto Light'), local('Roboto-Light'), url('/wp-content/themes/angle-child-theme/fonts/roboto-v18-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/wp-content/themes/angle-child-theme/fonts/roboto-v18-latin-300.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: fallback;
    src: local('Roboto'), local('Roboto-Regular'), url('/wp-content/themes/angle-child-theme/fonts/roboto-v18-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('/wp-content/themes/angle-child-theme/fonts/roboto-v18-latin-regular.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
Alojar en nuestro server las fuentes de Google permiten aumentar el rendimiento de Lighthoouse
Aumenta el rendimiento auto-hospedando las fuentes de google

Presentamos Cache y conexiones seguras con Https

Llegados al punto en que nos resultan inviables las opciones sugeridas para la mejora de rendimiento, nos queda siempre la opción de reducir los tiempos de carga.

habilitaremos nuestro plugin de caché WP Super Cache y habilitaremos el certificado Letsencrypt para servir páginas con HTTPS (en nuestro dominio producción ya estaba activo, hoy en día es imprescindible que trabajemos conexiones seguras).

Un aspecto importante a tener en cuenta con conexiones seguras es trabajar con servidores modernos que utilicen como mínimo protocolos en su versión HTTP/2 y TLS 1.3

En wetopi dispones de servidores con las últimas versiones y protocolos de seguridad. Prueba con una copia de tu site.

En nuestro caso los servidores están finamente ajustados y utilizan el último protocolo HTTP/2 con TLS 1.3

HTTPS aumenta el rendimiento de auditoría de Google

¿El resultado? Genial.

Gracias a HTTPS, saltamos a las «puntuaciones verdes» en rendimiento y también en Mejores Prácticas.

En este punto, la lista de Oportunidades ya es más corta:

Oportunidades para acelerar el rendimiento de la aplicación y aumentar Google Lighthouse Score

El primer punto todavía apunta al CSS y javascript. Decidimos pasar más tiempo buscando más estilos sin usar para reducir el tamaño. Mientras trabajábamos en la limpieza, descubrimos que estábamos cargando código javascript de plugins que no eran necesarios en la página de inicio.

Para ser más selectivos con el «donde» y «cuándo» se cargan los plugins, tenemos dos caminos:

  1. Usar un plugin capaz de controlar la carga de archivos de javascript y CSS: por ejemplo, W3 Total Cache. Nos da el control para usar las técnicas de «diferir» y «precargar».
  2. Codificar en nuestro functions.php la lógica para cargar plugins solo cuando sea necesario. O encontrar un plugin que nos haga este trabajo de selección.

Apostamos por la última opción. Sin embargo, hay un inconveniente, y es que podemos cargarnos el sistema de caché del navegador si somos agresivos en las combinaciones de plugins. Potencialmente, podemos terminar dándole más trabajo al navegador al tener un javascript concatenado diferente y un archivo CSS de estilo en todas y cada una de las páginas del sitio.

Nuestro enfoque fue dividir los plugins en dos bloques: una combinación de plugins para las páginas de nuestro sitio corporativo y una segunda para las publicaciones de nuestro blog.

Instalamos Plugin Load Filter para implementar este enfoque. Este plugin te permite habilitar/deshabilitar plugins según muchos criterios. ¡Cuidado, no seas un/a loco/a!

En resumen, te da una página de configuración con 2 pestañas. En la pestaña «Registro de filtro» tú decides los plugins que deseas controlar. Luego, para aquellos plugins que deseas administrar en función del «Tipo de página», puedes cambiar a la segunda pestaña «Activaciones de filtro de página». Aquí es donde puedes volverte loco/a. En nuestro caso éramos “binarios”, y nos restringimos a las opciones de filtro “Página” o “Publicación”:

Filtro de carga de plugin utilizado para aumentar la puntuación en la auditoría de Google Lighthouse

Esto ha reducido el tamaño de nuestro javascript principal, dándonos un rendimiento decente de 97 y un tiempo decente de Primer Pintado (First Contentful Paint) de 1,6 segundos en redes 3G:

97 en rendimiento y First Content Paint de 1,6 segundos

Estamos satisfechos con la puntuación de rendimiento, pasemos a la siguiente sección de auditoría de Lighthouse.

Convertir WordPress en una PWA, Aplicación Web progresiva

Las aplicaciones web progresivas (PWA) son aplicaciones web que se cargan como páginas web o sitios web normales, pero que pueden ofrecer al usuario funciones como trabajar sin conexión, notificaciones automáticas, etc.

https://en.wikipedia.org/wiki/Progressive_web_applications

No todas las páginas web necesitan esta funcionalidad fuera de línea. En nuestro caso, nuestros clientes suelen ir a nuestra página web para hacer clic en el botón de inicio de sesión. Si nuestro sitio web se cae, perderán la ruta al panel de alojamiento de wetopi. Suena bien agregar esta funcionalidad sin conexión para nuestros clientes.

Buscando Progressive Web App encontramos SuperPWA .

El ecosistema de plugins de WordPress es como el bolsillo de Doraemon:

Siempre hay un plugin que nos resuelve el problema.

Este plugin es increíble. Lo instalamos y configuramos simplemente cargando los iconos de nuestra aplicación. En unos minutos, nuestro PWA está listo y funcionando.

Página de configuración de aplicaciones web superprogresivas
Página de configuración de Super PWA.

¡El resultado de la auditoría PWA de lighthouse nos da un impresionante 100!

Gracias a Super PWA por crear este increíble plugin y ponerlo a disposición de la comunidad de WordPress.

En ese momento, estamos en verde y alcanzamos una puntuación de casi 100 en todas las secciones.

La lista de correcciones de accesibilidad y SEO fue fácil de resolver: especialmente las imágenes principales sin descripciones alternativas y botones sin nombres accesibles.

Alcanzamos casi el 100% en la auditoría de Google Lighthouse

Estamos satisfechos con el resultado general por la cantidad de tiempo invertido. Mover la puntuación de accesibilidad y la puntuación de mejores prácticas a 100 significaría un cambio en el diseño y el tema.

¿Es recomendable usar PWA en WordPress?

PWA optimiza tu sitio de WordPress para las arañas SERP de Google. Esto es «imprescindible» si el tiempo de carga de la página de tu sitio no es óptimo.

En nuestro caso, al rediseñar nuestra web wetopi utilizando el último tema Full Site Editing «Twenty Twenty-Two», los tiempos de carga de la página eran tan bajos que decidimos prescindir de la funcionalidad PWA. Al final, un plugin menos también significa, menos tiempo de proceso y más velocidad.

Consejos generales para mejorar el rendimiento

Aquí hay un par de consideraciones a tener en cuenta cuando se trata del rendimiento de WordPress.

Reducir el uso de plugins

Agregar plugins significa agregar carga a nuestro servidor y en el navegador de nuestro usuario final.

No instales plugins que estrictamente no necesites.

Menos tiempo de proceso significa mayor velocidad.

Especialmente aquellos plugins con impacto en el front-end. Los plugins agregan carga a nuestro sitio web. Los plugins que añaden funcionalidades de usuario o modificando el aspecto, agregan hojas de estilo y javascript que conducen a incrementar los tiempos de carga y pintado de la página.

Construye tu web utilizando temas ligeros

En nuestro próximo rediseño de web, prestaremos sin duda especial atención a la selección de temas. El tema es una pieza crucial en WordPress. Todo dependerá de una buena elección.

En nuestro último restyling de la web, decidimos apostar por un tema «Full Site Editing» de WordPress Core. El resultado fue impresionante.

Instalamos el «Twenty Twenty-Two» y convertimos todos nuestros recursos gráficos a SVG y WebP. Con este simple cambio, saltamos inmediatamente a 99~100 en los resultados de la Auditoría.

Sin más, esperamos con este caso práctico, haberte ayudado a clarificar como mejorar el rendimiento general de tu web usando el panel de Auditorías Lighthouse de Chrome DevTools.

Si planeas optimizar tu propio sitio, cuenta con nosotros.

Con wetopi, tienes servidores de desarrollo gratuitos y migraciones gratuitas.

¡No esperes más y migra una copia de tu sitio web para empezar a trabajar con Google Lighthouse!

Resumidamente, somos unos techies apasionados por WordPress que hemos creado Wetopi, un Alojamiento Gestionado WordPress, para minimizar la fricción a la que todo profesional se enfrenta al trabajar y alojar proyectos WordPress.

¿No tienes una cuenta en wetopi?

Incluye servidores desarrollo Gratis.
Sin tarjeta de crédito.

Compara wetopi con tu alojamiento actual

Date de alta, pide una migración y compara.

Hacemos una copia de tu web gratis y sin esfuerzo por tu parte.

Sin letra pequeña.
Sin compromisos.
Sin tarjeta de crédito.