Lighthouse informa cuántas solicitudes de red se realizaron y cuántos datos se transfirieron mientras se cargaba la página:
- Para calcular los valores Requests y Transfer Size de la fila Total, se agregan los valores para las filas Image, Script, Font, Stylesheet, Other, Document y Media.
- La columna Terceros no tiene en cuenta los valores de la fila Total. Su propósito es que sepas cuántas solicitudes totales y qué cantidad del tamaño total de transferencia provino de dominios de terceros. Las solicitudes de terceros pueden ser una combinación de cualquiera de los otros tipos de recursos.
Cómo reducir la cantidad de recursos y los tamaños de transferencia
El efecto de una gran cantidad de recursos o de grandes tamaños de transferencia en el rendimiento de la carga depende del tipo de recurso que se solicite.
CSS y JavaScript
Según la configuración predeterminada, las solicitudes de archivos CSS y JavaScript bloquean la renderización. En otras palabras, los navegadores no pueden procesar contenido en la pantalla hasta que finalicen todas las solicitudes de CSS y JavaScript. Si alguno de estos archivos está alojado en un servidor lento, ese único servidor puede retrasar todo el proceso de renderización. Consulta los artículos para optimizar JavaScript, optimizar tus recursos de terceros y optimizar tu CSS para obtener información sobre cómo enviar solo el código que realmente necesitas.
Métricas afectadas: Todas
Imágenes
Las solicitudes de imágenes no bloquean la renderización como CSS y JavaScript, pero pueden afectar negativamente el rendimiento de carga. Un problema común es cuando un usuario de dispositivo móvil carga una página y ve que las imágenes comenzaron a cargarse, pero tardarán un poco en terminar. Consulta Optimiza tus imágenes para aprender a cargar imágenes más rápido.
Métricas afectadas: First Contentful Paint, First Meaningful Paint, Índice de velocidad
Fuentes
La carga ineficiente de archivos de fuentes puede provocar texto invisible durante la carga de la página. Consulta Optimiza tus fuentes para obtener información sobre cómo usar una fuente que está disponible de forma predeterminada en el dispositivo del usuario y, luego, cambiar a tu fuente personalizada cuando se termine de descargar.
Métricas afectadas: First Contentful Paint
Documentos
Si tu archivo HTML es grande, el navegador debe dedicar más tiempo a analizar el HTML y construir el árbol del DOM a partir del HTML analizado.
Métricas afectadas: First Contentful Paint
Medios
Los archivos GIF animados suelen ser muy grandes. Consulta Cómo reemplazar GIF por videos para aprender a cargar animaciones más rápido.
Métricas afectadas: First Contentful Paint
Usa presupuestos de rendimiento para evitar regresiones
Una vez que hayas optimizado tu código para reducir el recuento de solicitudes y los tamaños de transferencia, consulta Establece presupuestos de rendimiento para obtener información sobre cómo evitar regresiones.