Potencia 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 averiguar por qué tu sitio es lento. 🕵️
En esta publicación, aprenderás a usar Lighthouse y las herramientas para desarrolladores de Chrome para identificar recursos externos lentos. En la publicación, se explican técnicas cada vez más sólidas que se combinan mejor.
Si solo tienes 5 minutos
La auditoría de rendimiento de Lighthouse te ayuda a descubrir oportunidades para acelerar la carga de páginas. 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 las cargas útiles de red de gran tamaño.
Para ejecutar una auditoría, haz lo siguiente:
- Presiona "Control + Mayús + J" (o bien "Comando + Opción + J" en Mac) para abrir Herramientas para desarrolladores.
- Haz clic en la pestaña Lighthouse.
- Haz clic en Dispositivo 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 Simulación rápida de 3G, 4x CPU Slowdown.
- Selecciona la casilla de verificación Liberar espacio de almacenamiento.
- Haz clic en Ejecutar auditorías.
Uso de terceros
La auditoría de Uso de terceros de Lighthouse muestra una lista de los proveedores externos que utiliza una página. Esta descripción general puede ayudarte a comprender mejor el panorama general e identificar el código redundante de terceros. La auditoría está disponible en la extensión de Lighthouse y pronto se agregará a Herramientas para desarrolladores en Chrome 77.
Reduce el tiempo de ejecución de JavaScript
La auditoría de Lighthouse Reduce el tiempo de ejecución de JavaScript destaca las secuencias de comandos que tardan mucho tiempo en analizarse, compilarse o evaluarse. Selecciona la casilla de verificación Show 3rd-party resources (Mostrar recursos de terceros) para descubrir secuencias de comandos de terceros que requieren mucha CPU.
Evita cargas útiles de red de gran tamaño
La auditoría de Lighthouse Evitar cargas útiles de red enormes 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 tu 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 el comportamiento de tu página cuando una secuencia de comandos, una hoja de estilo o algún otro recurso específico no están disponibles. Después de identificar las secuencias de comandos de terceros que sospecha que afectan el rendimiento, bloquee las solicitudes a esas secuencias de comandos para medir cómo cambia el tiempo de carga.
Para habilitar el bloqueo de solicitudes, haz lo siguiente: 1. Presiona "Control + Mayús + J" (o bien "Comando + Opción + J" en Mac) para abrir Herramientas para desarrolladores. 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 URL de solicitud.
Aparecerá una pestaña Request bloqueador en el panel lateral de Herramientas para desarrolladores. Puedes administrar las solicitudes que se bloquearon allí.
Para medir el impacto de las secuencias de comandos de terceros, haz lo siguiente:
- Mide cuánto tiempo tarda tu página en cargarse con el panel Red. Para emular condiciones reales, activa la regulación de la red y la regulación de la CPU. (En conexiones más rápidas y hardware de escritorio, el impacto de los costosos scripts puede no ser tan representativo como lo sería en un teléfono móvil).
- Bloquea las URLs o los dominios responsables de las secuencias de comandos de terceros que consideres 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.
Deberías ver una mejora en la velocidad, pero, en ocasiones, bloquear secuencias de comandos de terceros puede no tener el efecto que esperas. Si ese es el caso, reduce la lista de URLs bloqueadas hasta que aísles la que está causando la lentitud.
Ten en cuenta que realizar tres o más ejecuciones de medición y observar los valores de la mediana probablemente producirá resultados más estables. Debido a que el contenido de terceros puede incluir en ocasiones 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 Performance, lo que facilita un poco este proceso.