Mejora tus habilidades de detección de rendimiento con Lighthouse y las Herramientas para desarrolladores de Chrome.
Como desarrollador, a menudo no tienes control sobre qué secuencias de comandos de terceros carga tu sitio. Antes de optimizar el contenido de terceros, debes hacer un trabajo de investigación para descubrir qué hace que tu sitio sea lento. 🕵️
En esta publicación, aprenderás a usar Lighthouse y las Herramientas para desarrolladores de Chrome para identificar recursos de terceros lentos. En la publicación, se explican técnicas cada vez más sólidas que se usan mejor en combinación.
Si solo tienes 5 minutos
La auditoría de rendimiento de Lighthouse te ayuda a descubrir oportunidades para acelerar las cargas de página. Es probable que las secuencias de comandos de terceros lentas aparezcan en la sección Diagnóstico, en las auditorías Reduce el tiempo de ejecución de JavaScript y Evita cargas útiles de red enormes.
Para ejecutar una auditoría, haz lo siguiente:
- Presiona "Control + Mayúsculas + J" (o "Comando + Opción + J" en Mac) para abrir DevTools.
- Haz clic en la pestaña Lighthouse.
- Haz clic en Móvil.
- Selecciona la casilla de verificación Rendimiento. (Puedes desmarcar el resto de las casillas de verificación en la sección Auditorías).
- Haz clic en Red 3G rápida simulada, CPU 4 veces más lenta.
- Selecciona la casilla de verificación Borrar almacenamiento.
- Haz clic en Run audits.
Uso por parte de terceros
La auditoría Uso por parte de terceros de Lighthouse muestra una lista de los proveedores externos que usa una página. Esta descripción general puede ayudarte a comprender mejor el panorama general y a identificar el código de terceros redundante. La auditoría está disponible en la extensión de Lighthouse y pronto se agregará a DevTools en Chrome 77.
Reduce el tiempo de ejecución de JavaScript
La auditoría Reduce el tiempo de ejecución de JavaScript de Lighthouse destaca las secuencias de comandos que tardan mucho tiempo en analizarse, compilarse o evaluarse. Selecciona la casilla de verificación Show 3rd-party resources para descubrir secuencias de comandos de terceros que consumen mucha CPU.
Evita utilizar cargas útiles de red de gran tamaño
La auditoría Evita utilizar cargas útiles de red de gran tamaño de Lighthouse identifica las solicitudes de red, incluidas las de terceros, que pueden ralentizar el tiempo de carga de la página. La auditoría falla cuando la carga útil de red supera los 4,000 KB.
Cómo bloquear solicitudes de red en las herramientas para desarrolladores de Chrome
El bloqueo de solicitudes de red de las Herramientas para desarrolladores de Chrome te permite ver cómo se comporta tu página cuando no está disponible una secuencia de comandos, una hoja de estilo o algún otro recurso en particular. Después de identificar las secuencias de comandos de terceros que sospechas que afectan el rendimiento, mide cómo cambia el tiempo de carga bloqueando las solicitudes a esas secuencias de comandos.
Para habilitar el bloqueo de solicitudes, haz lo siguiente: 1. Presiona "Control + Mayúsculas + J" (o "Comando + Opción + J" en Mac) para abrir DevTools. 1. Haga clic en la pestaña Red. 1. Haz clic con el botón derecho en cualquier solicitud del panel Red. 1. Selecciona Bloquear la URL de solicitud.
Aparecerá una pestaña Bloqueo de solicitudes en el panel lateral de DevTools. Allí puedes administrar las solicitudes que se bloquearon.
Para medir el impacto de las secuencias de comandos de terceros, sigue estos pasos:
- Mide el tiempo que tarda en cargarse tu página con el panel Red. Para emular las condiciones del mundo real, activa la limitación de la red y la limitación de la CPU. (En conexiones más rápidas y hardware de computadoras de escritorio, el impacto de las secuencias de comandos costosas puede no ser tan representativo como lo sería en un teléfono celular).
- Bloquea las URLs o los dominios responsables de las secuencias de comandos de terceros que crees que son un problema.
- Vuelve a cargar la página y vuelve a medir cuánto tiempo tarda en cargarse sin las secuencias de comandos de terceros bloqueadas.
Con suerte, deberías ver una mejora en la velocidad, pero, en ocasiones, bloquear las secuencias de comandos de terceros puede no tener el efecto que esperas. Si ese es el caso, reduce la lista de URLs bloqueadas hasta aislar la que causa lentitud.
Ten en cuenta que realizar tres o más ejecuciones de medición y observar los valores medios probablemente genere resultados más estables. Como el contenido de terceros puede extraer diferentes recursos por carga de página, este enfoque puede brindarte una estimación más realista. DevTools ahora admite varias grabaciones en el panel Rendimiento, lo que facilita esta tarea.