Identifique JavaScript lento de terceros
Potencie sus habilidades de detective de desempeño con Lighthouse y Chrome DevTools.
Como desarrollador, a menudo no tiene control sobre qué scripts de terceros carga su sitio. Antes de que pueda optimizar el contenido de terceros, debe hacer un trabajo de detective para averiguar qué hace que su sitio sea lento. 🕵️
En este post, aprenderá a usar Lighthouse y Chrome DevTools para identificar recursos lentos de terceros. El post le irá mostrando técnicas cada vez más sólidas que se utilizan mejor combinadas.
Si solo tiene 5 minutos #
La auditoría de rendimiento de Lighthouse le ayuda a descubrir oportunidades para acelerar la carga de páginas. Es probable que aparezcan scripts lentos de terceros en la sección Diagnósticos en las auditorías Reducir el tiempo de ejecución de JavaScript y Evitar enormes cargas útiles de red.
Para ejecutar una auditoría:
Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.
Click the Lighthouse tab.
Haga clic en Móvil.
Seleccione la casilla de verificación Rendimiento. (Puede deseleccionar el resto de las casillas de verificación en la sección Auditorías).
Haga clic en 3G rápida simulada, Alentamiento del CPU 4x.
Seleccione la casilla de verificación Borrar almacenamiento.
Haga clic en Ejecutar auditorías.
Uso de terceros #
La auditoría de uso de de terceros de Lighthouse muestra una lista de los proveedores de terceros que utiliza una página. Esta descripción general puede ayudarle a comprender mejor el panorama general e identificar el código de terceros redundante. La auditoría está disponible en la extensión Lighthouse y pronto se agregará a DevTools en Chrome 77.
Reducir el tiempo de ejecución de JavaScript #
La auditoría Reducir el tiempo de ejecución de JavaScript de Lighthouse destaca los scripts que tardan mucho en analizarse, compilarse o evaluarse. Seleccione la casilla de verificación Mostrar recursos de terceros para descubrir scripts de terceros que usen intensivamente la CPU.
Evite cargas útiles de red enormes #
La auditoría Evitar enormes cargas útiles de red 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 su carga útil de red supera los 4,000 KB.
Bloquear solicitudes de red en Chrome DevTools #
El bloqueo de solicitudes de red de Chrome DevTools le permite ver cómo se comporta su página cuando un script, hoja de estilo u otro recurso en particular no está disponible. Después de identificar los scripts de terceros que sospecha que afectan el rendimiento, mida cómo cambia el tiempo de carga bloqueando las solicitudes a esos scripts.
Para habilitar el bloqueo de solicitudes: 1. Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.
Click the Network tab.
Haga clic con el botón derecho en cualquier solicitud en el panel Red.
Seleccione Bloquear URL de solicitud.
Aparecerá una pestaña de bloqueo de solicitudes en el cajón de DevTools. Puede administrar qué solicitudes se han bloqueado allí.
Para medir el impacto de los scripts de terceros:
- Mida cuánto tiempo tarda su página en cargarse utilizando el panel Red. Para emular las condiciones del mundo real, active la limitación de red y la limitación de CPU. (En conexiones más rápidas y hardware de escritorio, el impacto de scripts tardados puede no ser tan representativo como lo sería en un teléfono móvil).
- Bloquee las URL o los dominios responsables de los scripts de terceros que crea que son un problema.
- Vuelva a cargar la página y mida de nuevo el tiempo que tarda en cargarse sin los scripts de terceros bloqueados.
Con suerte, debería ver una mejora en la velocidad, pero el bloqueo ocasional de scripts de terceros podría no tener el efecto esperado. Si ese es el caso, reduzca la lista de URL bloqueadas hasta que aísle la que está causando la lentitud.
Tenga en cuenta que realizar tres o más corridas de medición y observar los valores promedio probablemente producirá resultados más estables. Dado que el contenido de terceros ocasionalmente puede atraer diferentes recursos por carga de página, este enfoque puede brindarle una estimación más realista. DevTools ahora admite múltiples registros en el panel Rendimiento, lo que facilita las cosas.