Las cargas útiles de red grandes están altamente correlacionadas con tiempos de carga largos. También les cuestan dinero a los usuarios, por ejemplo, es posible que tengan que pagar para obtener más datos móviles. Por lo tanto, reducir el tamaño total de las solicitudes de red de la página es bueno para la experiencia del usuario en tu sitio y sus billeteras.
Cómo falla la auditoría de la carga útil de la red de Lighthouse
Lighthouse muestra el tamaño total en kibibytes (KiB) de todos los recursos que solicita tu página. Las solicitudes más grandes se presentan primero:
![Captura de pantalla de Lighthouse para evitar la enorme auditoría de cargas útiles de red](https://developer.chrome.google.cn/static/docs/lighthouse/performance/total-byte-weight/image/a-screenshot-the-lightho-5edd6e4e68e25.png?authuser=9&hl=es)
Según los datos de HTTP Archive, la carga útil mediana de la red es de entre 1,700 y 1,900 KiB. Para ayudar a mostrar las cargas útiles más altas, Lighthouse marca las páginas cuyas solicitudes de red totales superan los 5,000 KiB.
Cómo reducir el tamaño de la carga útil
Intenta mantener el tamaño total en bytes por debajo de 1,600 KiB. Este objetivo se basa en la cantidad de datos que, en teoría, se pueden descargar en una conexión 3G y, al mismo tiempo, alcanzar un tiempo de carga de 10 segundos o menos.
Estas son algunas formas de reducir el tamaño de la carga útil:
- Aplaza las solicitudes hasta que sean necesarias. Consulta el patrón de PRPL para obtener un enfoque posible.
- Optimiza las solicitudes para que sean lo más pequeñas posible. Estas son algunas técnicas posibles:
- Almacenar las solicitudes en caché para que la página no vuelva a descargar los recursos en visitas repetidas (consulta la página de destino de confiabilidad de red para obtener información sobre cómo funciona el almacenamiento en caché y cómo implementarlo).
Orientación específica para pilas
Angular
Aplica la división de código a nivel de ruta para minimizar el tamaño de los paquetes de JavaScript. Además, considera almacenar previamente en caché los recursos con el service worker de Angular.
Drupal
Considera usar estilos de imágenes responsivos para reducir el tamaño de las imágenes que se cargan en tu página. Si usas Views para mostrar varios elementos de contenido en una página, considera implementar la paginación para limitar la cantidad de elementos de contenido que se muestran en una página determinada.
Joomla
Considera mostrar extractos en las categorías de tus artículos (una solución popular es un vínculo para obtener más información), reducir la cantidad de artículos que se muestran en una página determinada, dividir tus publicaciones largas en varias páginas o usar un complemento para cargar de forma diferida los comentarios.
WordPress
Considera mostrar extractos en tus listas de entradas (puedes usar la etiqueta "más"), reducir la cantidad de publicaciones que se muestran en una página determinada, dividir tus entradas largas en varias páginas o usar un complemento para hacer una carga diferida de comentarios.
Recursos
Código fuente para la auditoría de evitar cargas útiles de red de gran tamaño