Lighthouse es una herramienta automatizada que te permite mejorar la calidad de tu sitio. Le proporcionas una URL y te proporciona una lista de recomendaciones sobre cómo mejorar el rendimiento de la página, hacer que las páginas sean más accesibles, cumplir con las prácticas recomendadas y mucho más. Puedes ejecutarlo desde las Herramientas para desarrolladores de Chrome, como una extensión de Chrome, o incluso como un módulo Node, que es útil para la integración continua.
Por un tiempo, Lighthouse proporciona muchas sugerencias para mejorar el rendimiento de carga de páginas, como habilitar la compresión de texto o reducir las secuencias de comandos que bloquean la renderización. El equipo de Lighthouse continúa lanzando auditorías nuevas para ofrecerte consejos aún más útiles y lograr que tus sitios sean más rápidos. Esta publicación es un resumen de auditorías de rendimiento útiles que quizás no conozcas, como las siguientes:
- Desglose del trabajo del subproceso principal
- Precarga las solicitudes de claves
- El tiempo de inicio de JavaScript es alto
- Evita los redireccionamientos de página
- JavaScript sin uso
- Se usa una política de caché ineficiente en recursos estáticos
- Evita los costosos viajes de ida y vuelta a cualquier origen
- Cómo usar formatos de video para el contenido animado
- Todo el texto sigue siendo visible mientras se carga la fuente para sitios web
- CSS y JavaScript no minificados
- Reglas de CSS sin usar
Desglose del trabajo del subproceso principal
Si alguna vez usaste el panel de rendimiento en Herramientas para desarrolladores, sabes que puede ser un poco tedioso obtener un desglose de dónde se dedicó el tiempo de CPU a cargar una página. Nos complace anunciar que esta información ya está disponible de manera conveniente y fácil a través de la nueva auditoría de Desglose del trabajo del subproceso principal.
Este nuevo diagnóstico evalúa la cantidad y el tipo de actividad que ocurre durante la carga de la página, que puedes usar para controlar los problemas de rendimiento de carga relacionados con el diseño, la evaluación de secuencias de comandos, el análisis y otras actividades.
Precargar las solicitudes de claves
Cuando los navegadores recuperan recursos, lo hacen a medida que encuentran referencias a ellos dentro del documento y sus subrecursos. A veces, esto puede no ser óptimo porque algunos recursos críticos se descubren bastante tarde en el proceso de carga de la página. Afortunadamente, rel=preload brinda a los desarrolladores la capacidad de indicar a los navegadores compatibles qué recursos se deben recuperar lo antes posible. La nueva auditoría de Solicitudes de claves de precarga permite a los desarrolladores saber
qué recursos podrían beneficiarse si se cargan antes para rel=preload.
Es muy importante que pruebes y compares los cambios de rendimiento con y sin rel=preload, ya que puede afectar el rendimiento de carga de formas no previstas. Por ejemplo, la precarga de una imagen grande podría retrasar la renderización inicial, pero la compensación es que la imagen precargada aparecerá antes en el diseño.
Asegúrate siempre de estar bien con los resultados.
El tiempo de inicio de JavaScript es alto
Cuando se carga demasiado JavaScript, la página puede dejar de responder a medida que el navegador la analiza, compila y ejecuta. Las secuencias de comandos y los anuncios de terceros son una fuente particular de actividad excesiva de secuencias de comandos que puede complicar incluso dispositivos potentes. La nueva auditoría El tiempo de arranque de JavaScript es alto revela cuánto tiempo de CPU consume cada secuencia de comandos de una página, junto con su URL:
Cuando ejecutes esta auditoría, también puedes habilitar insignias de terceros en el panel de red y filtrar la lista para identificar recursos de secuencias de comandos de terceros. Con los datos de esta auditoría, estarás mejor equipado para encontrar fuentes de actividad excesiva de JavaScript que hagan que las páginas pasen de ser ágiles a complicadas. En el caso de las secuencias de comandos específicas de tu aplicación, puedes emplear técnicas como la división de código y la eliminación de código no utilizado para limitar el volumen de JavaScript en cada página de tu sitio.
Evita redireccionamientos de página
En ocasiones, cuando un navegador solicita una URL, el servidor puede responder con un código de estado de nivel 300. Esto hace que el navegador redireccione a otra URL. Si bien los redireccionamientos son necesarios para la SEO y la conveniencia, agregan latencia a las solicitudes. Esto se aplica en especial si redireccionan a otros orígenes, lo que puede generar búsquedas de DNS y tiempo de negociación de TLS o conexión.
Los redireccionamientos no son recomendables para las páginas de destino de tu sitio. Para ayudarte a reducir la latencia y mejorar el rendimiento de carga, Lighthouse ahora ofrece la auditoría Evita los redireccionamientos de página, que te avisa cuando una navegación activa redireccionamientos.
Ten en cuenta que esta auditoría es difícil de activar en la versión de Lighthouse para Herramientas para desarrolladores, ya que analiza la URL actual en la barra de direcciones de la página, lo que refleja la resolución de todos los redireccionamientos. Es más probable que veas esta auditoría propagada en la CLI de Node.
JavaScript sin uso
El código muerto puede ser un problema grave en las aplicaciones que utilizan JavaScript. Si bien no implica costos de ejecución, ya que nunca se invoca, tiene otros efectos no deseados. De todos modos, el navegador descarga, analiza y compila el código muerto. Esto afecta el rendimiento de carga y el tiempo de inicio de JavaScript. Al igual que el panel de cobertura de Herramientas para desarrolladores, la auditoría Unused JavaScript muestra el código JavaScript descargado por la página actual, pero nunca se utiliza.
Con esta auditoría, puedes identificar código muerto en tus aplicaciones y quitarlo para mejorar el rendimiento de la carga y reducir el uso de recursos del sistema. Sugerencia profesional: También puedes usar el panel de cobertura de código en Herramientas para desarrolladores de Chrome para encontrar esta información.
Usa una política de caché ineficiente en recursos estáticos
Si bien muchos consejos de rendimiento tienden a enfocarse en aumentar la velocidad de un sitio web para los usuarios nuevos, también es importante usar el almacenamiento en caché con el objetivo de mejorar el rendimiento de carga de los usuarios recurrentes. La auditoría Usa la política de caché ineficiente en elementos estáticos inspecciona los encabezados de almacenamiento en caché de los recursos de red y te notifica si las políticas de caché para los recursos estáticos son deficientes.
Con la ayuda de esta auditoría, podrás encontrar y solucionar fácilmente los problemas con tu política de caché actual. Esto mejorará en gran medida el rendimiento para los usuarios recurrentes, quienes apreciarán la velocidad adicional.
Evita los costosos viajes de ida y vuelta a cualquier origen
Cuando los navegadores recuperan recursos de un servidor, puede llevar mucho tiempo realizar una búsqueda de DNS y establecer una conexión con un servidor.
rel=preconnect permite a los desarrolladores enmascarar esta latencia estableciendo conexiones con otros servidores antes de que el navegador lo haga en el futuro esperado. La auditoría Evita los costos múltiples de ida y vuelta a cualquier origen te ayudará a descubrir oportunidades para usar rel=preconnect.
rel=preconnect en LighthouseCuando se reduce la latencia de los recursos de origen cruzado, los usuarios percibirán que el proceso se mueve un poco más rápido. Con esta nueva auditoría de Lighthouse, aprenderás sobre las nuevas oportunidades de usar rel=preconnect para hacer precisamente eso.
Cómo usar formatos de video para contenido animado
Los GIF animados son enormes y suelen consumir al menos cientos de kilobytes, o incluso varios megabytes de datos. Si te interesa el rendimiento de carga, puedes convertir esos GIFs en videos. Afortunadamente, podrás realizar la auditoría Cómo usar formatos de video para el contenido animado.
Si tu sitio tiene GIFs de más de 100 KB, esta auditoría los marcará automáticamente y te guiará a modo de orientación para convertirlos en videos y, luego, incorporarlos. Los sitios como Imgur mejoraron significativamente el rendimiento de carga al convertir sus GIFs en videos. Además, si tu sitio tiene un plan de hosting con ancho de banda medido, el ahorro de costos potencial por sí solo debería ser suficiente para persuadirlo.
Todo el texto permanece visible mientras se carga la fuente web
Cuando cargamos fuentes web para páginas, a menudo, los navegadores renderizan texto invisible hasta que se carga. Este fenómeno, conocido como el destellos de texto invisible (FOIT), puede ser preferible desde el punto de vista del diseño, pero en realidad es un problema. El texto que está bloqueado de la renderización no se puede leer hasta que se renderiza y se vuelve visible. En las conexiones de latencia alta o ancho de banda alto, esto significa que falta una parte central de la experiencia del usuario. También puede ser una especie de problema de rendimiento perceptual, ya que la página no renderiza contenido significativo tan rápido como podría hacerlo. Afortunadamente, la auditoría de Todo el texto permanece visible durante las cargas de fuentes web te ayuda a encontrar oportunidades para corregir esto en tu sitio.
Si Lighthouse encuentra fuentes web en tu aplicación que retrasan la renderización del texto, hay algunas soluciones posibles. Puedes controlar la renderización de texto con la propiedad font-display de CSS o la API de Font Loading.
Si quieres profundizar más, te recomendamos que leas Una guía completa sobre las estrategias de carga de fuentes, una excelente guía de Zach cueroman, que es un recurso excelente para lograr una carga óptima de la fuente.
CSS y JavaScript no minificados
La reducción es una técnica sugerida desde que el rendimiento web es algo importante, y por un buen motivo. Reduce significativamente el tamaño de los recursos basados en texto, lo que a su vez es bueno para el rendimiento de carga. Sin embargo, es fácil pasar por alto esta optimización, en especial si los procesos de compilación no se encargan de esta tarea por ti. Las auditorías de Minify CSS y Minify JavaScript compilarán una lista de recursos sin minificar que encuentre en la página actual. Desde allí, puedes reducir esos archivos de forma manual o aumentar el sistema de compilación para que lo haga por ti.
Reglas de CSS sin usar
A medida que un sitio se vuelve un poco largo, es inevitable que comience a generarse la pérdida de la refactorización. Una de esas fuentes de errores se presenta en la forma de reglas de CSS sin usar que ya no son necesarias para que el sitio funcione, pero aún consumen ancho de banda. Para tu comodidad, la auditoría de Reglas de CSS sin usar revela qué recursos de CSS en la página contienen CSS sin usar.
Si Lighthouse encuentra elementos CSS sin usar en la página, hay formas de eliminarlo. UnCSS es una de esas utilidades que hace esto por ti automáticamente (aunque se debe usar con cuidado). Un método más manual consiste en usar el panel de cobertura de código en Herramientas para desarrolladores. Sin embargo, solo recuerda que en una página podría ser necesario usar CSS sin usar en otra. Otro enfoque puede ser dividir tu CSS en archivos específicos de la plantilla que solo se carguen cuando sea necesario. Sea lo que sea que decidas hacer, Lighthouse estará allí para informarte si el error de CSS está llegando a ser demasiado.
¡Prueba Lighthouse!
Si te entusiasman estas nuevas auditorías, actualiza Lighthouse y pruébalas.
- La extensión de Chrome de Lighthouse debería actualizarse automáticamente, pero puedes hacerlo de forma manual mediante
chrome://extensions. - En las Herramientas para desarrolladores, puedes ejecutar Lighthouse en el panel de auditorías. Chrome se actualiza a una versión nueva aproximadamente cada 6 semanas, por lo que es posible que algunas auditorías más recientes no estén disponibles. Si deseas usar las auditorías más recientes disponibles, puedes descargar Chrome Canary para ejecutar el código más reciente de Chrome.
- Para usuarios de Node: Ejecuta
npm update lighthouseonpm update lighthouse -gsi instalaste Lighthouse de forma global.
Agradecemos especialmente a Kayce Basques, Patrick Hulce, Addy Osmani y Vinamrata Singal por sus valiosos comentarios, que mejoraron significativamente la calidad de este artículo.