¿Cómo evitar enormes cargas útiles de red (error de velocidad) en WordPress?

Miércoles, 22 Diciembre 2021 18:16

Cuando hacemos un test con Google Spped Insigths o LightHouse a menudo puede aparecer el siguiente aviso “Avoid Enormous Network Payload”. Este elemento indica que tu web es demasiado pesada... Gordita. Te explico cómo hacer adelgazar tu website para evitar las cargas útiles de red en WordPress.

¿Cómo evitar enormes cargas útiles de red (error de velocidad) en WordPress?
 

1. ¿Cómo soluciono la advertencia "Evitar una carga útil de red enorme" en Google Pagespeed Insights?

El mensaje que arroja nuestro análisis de página web de Ligthouse o Google speed insigths de "Evitar una carga útil de red enorme" se produce cuando el tamaño total de la página supera los 1.600 KB (1.6MB). Para aprobar esta prueba de rendimiento debes minimizar el tamaño de la página web. Los tiempos de carga de página prolongados están directamente relacionados con cargas útiles de red enormes (es decir, archivos de gran tamaño). Los archivos más pequeños se pueden descargar más rápido, por lo que reducir la cantidad total de solicitudes de red de su sitio web mejora la experiencia de la página de sus visitantes.

Las imágenes grandes, los vídeos, el código de terceros o los enormes archivos CSS y JavaScript no optimizados suelen ser el motivo de un tamaño de página grande.

El filtro de Google se situa en sitios de menos de 1,6 MB, pero podemos ir aún más lejos, y los nuevos estándares web y tendencias de navegación ya demandan páginas de menos de 1 MB. Si deseas obtener una puntuación de 100 en la prueba de velocidad de la página móvil de Google speed Insights, tu página debe tener un tamaño inferior a 0,5 MB. Debido a que esta prueba utiliza una conexión de 1,6 megabits, que es extremadamente lenta, tu página debe tener un tamaño de 1 megabyte o menos para lograr una puntuación de 50 o 60.

Resumen rápido

2. ¿Cómo reducir la carga útil de la red de su sitio de WordPress?

  • Comprime imágenes y procura que tengan el tamaño en que se van a mostrar en pantalla.
  • Elimina la carga de scripts innecesarios, incluidos los plugins que no uses.
  • Habilite el almacenamiento en caché y la compresión gZip.
  • Entrega tus archivos minificados .js y .css
  • Trata de combinar la entrega de recursos estáticos en uno o dos archivos si es posible
  • Carga el contenido en diferido (defer) cuando no sea necesario de inmediato.

2.1. Plugins que puedes usar:

  • Gonzales (Te permite escoger qué recursos entregas a cada página)
  • Autoptimize (Optimizar imágenes)
  • WP Rocket (Control de cache y entrega de recursos)
  • Caché LiteSpeed (Control de cache y entrega de recursos)

3. ¿Cuál debería ser el tamaño de página óptimo?

Depende la conexión el el dispositivo, pero podríamos considerar un tamaño de página optimo en rangos de peso de 500Kb-1MB, lo cual es un muy buen comienzo.

Hay desarrolladores que opinan que en términos generales, debes apuntar a 200k para tu tamaño de página total. También es importante el número total de objetos (o solicitudes http totales). Una página que tiene solo 100k pero tiene 92 solicitudes http probablemente esté peor que una página de 200k con solo 21 solicitudes http.

El tamaño medio de una página web en 2010 fue de 467,7 kb en comparación con 2038,4 kb en 2021, según los datos recopilados por HTTP Archive

4. Encuentra la causa raíz de los tamaños de página grandes

Hay varios aspectos en los que debes reparar para evaluar el sobre-tamaño de tu página web en wordpress.

Si partimos de la base que has eliminado todos los plugins innecesarios, revisiones y tablas obsoletas de la base de datos y que el contenido que muestras en pantalla es "imprescindible" (piensa en si debes cambiar algún plugin pesado o que genere demasiado codigo o alguna imagen que no aporte información relevante) deberías:

4.1. Preocuparte por las imágenes, evaluar su peso individual

Sí, las imágenes constituyen la mayor parte de la página promedio, y definitivamente debes asegurarte de no ofrecer grandes imágenes no optimizadas a tus usuarios. Comprime tus imágenes (fotografías) a jpg 40%-60% y utiliza el formato png sólo para gráficos, considera utilizar svg para el logo y ojo, no hagas carga diferida con tus imágenes de cabecera.

4.2. Revisa a fondo la entrega de CSS y JavaScript

Si tu WordPress entrega versiones asincrónicas de sus hojas de estilo y scripts, necesitas saber que estos tienen el potencial de bloquear sus páginas por completo, porque son los principales acaparadores de CPU.

Utiliza scripts asincrónicos en los casos que puedas, ya que son mejores que los síncronos, pero tiene que haber una razón para aplazarlos, si no, romperemos elementos en pantalla que esperan utilizar estas librerías. Piensa también el el consumo de CPU de tu máquina y si soporta estas cargas.

5. ¿Cómo reduzco el CSS y JavaScript que no se usa?

Lo primero que tienes que hacer es determinar si lo estás usando o no. Yo suelo hacer esto con el inspector de código de Chrome. El mismo navegador te muestra el percentaje de uso o "coverage". Selecciona los que no uses o que estén al 0% y elimínalos de la carga de tu web.

detectar scripts y css que no se usan en una web en wordpress

6. Recuerda que el tamaño de todas las páginas es importante

Hay muchos websites con sus páginas de aterrizaje bastante bien optimizadas pero que han descuidado otras páginas internas con gran flujo de entrada de visitas, como el blog o las categorías de servicios. Hemos de auditar cada principal fuente de entrada de nuestra web, prestando atención especial a:

  • Página de inicio
  • Página de entradas (blog)
  • Categorías del blog
  • Resto de Páginas del menú ppal
  • Etiquetas
  • Página de contacto

Ten presente que un usuario pueda pasar de una página de inicio que ha cargado como se esperaba a una página de servicios donde se explique la información que el usuario está buscando, pero que no carga correctamente por algún descuido. Nuestro trabajo de optimización web no acaba en la homepage.

7. ¿Cómo evito cargas útiles de red enormes con WP Rocket?

WP Rocket

WP Rocket es un plugin muy extendido en la comunidad Wordpress y si se utiliza con conocimiento, puede ahorrar grandes tiempos de carga y convertirse en una herramienta esencial de optimización web, no le tengas miedo y haz tus pruebas, ( claro que primero has de comprarlo ;) )

Entre las características básicas encontramos las siguientes opciones que nos pueden ayudar a evitar esos Tiempos de cargas útiles de red:

  • Caché para todos (mobile, escritorio y usuarios logueados)
  • Precarga de caché por página
  • Reducción de solicitudes HTTP
  • Utiliza Gzip, si tu servidor lo soporta
  • Optimiza las cabeceras del caché del navegador (expires)
  • Minifica y combina archivos JavaScript y CSS
  • Elimina CSS que no se usa (está en versión Beta y es un poco peligroso)
  • Carga diferida de imágenes (LazyLoad)
  • Compatible con WebP
  • Carga diferida de archivos JavaScript
  • Retrasa la ejecución JavaScript
  • Genera ruta crítica para CSS y difiere la carga de archivos CSS
  • Optimización básica de base de datos
  • Controla el Heartbeat API de WordPress
  • Hace DNS prefetch
  • Puedes integrar tu CDN, como Cloudflare

7.1. Vídeo explicativo

Aquí te enlazo un video realizado por el equipo de WP Rocket que explica cómo configurar WP rocket de forma básica.

7.2. Imágenes y carga diferida, Lazy Load

LazyLoad retrasa la carga de imágenes en tu sitio web conforme el usuario se desplaza hacia abajo y va haciendo scroll en la página. Así sólo enviamos las imágenes cuando el usuario realmente necesita verlas.

También podrás encontrar el aviso de Google PageSpeed Insight o LightHouse de "diferir las imágenes fuera de la pantalla".

7.2.1. ¿Cómo ayuda a tus tiempos de carga?

"Cuando cargamos imágenes y videos de forma diferida, reducimos el tiempo de carga inicial de la página, el peso inicial de la página y el uso de recursos del sistema, todo lo cual tiene un impacto positivo en el rendimiento".
Mira lo que dicen en el proyecto web.dev de google sobre la carga perezosa de imágenes.

Si tienes 10 imágenes en tu página, con un total de 1.8 MB. Si los 1.8 MB de imágenes tienen que descargarse a la vez, eso afectará el tiempo de carga general y el rendimiento percibido. Esto afectará especialmente a los dispositivos móviles que tienen una potencia de procesamiento más limitada y, a menudo, tienen conexiones a Internet más lentas y con menor ancho de banda.

7.2.2. Cómo activo lazy load en WP Rocket

Es muy sencillo, ve al menú de WP Rocket y pulsa sobre optimización de imágenes Lazy Load. Verás un cuado de diálogo como el de la imagen de abajo. Puedes activarlo ahí mismo y un poco más abajo añadir algunas imágenes que quieres excluir. Te recomiendo que excluyas las que ya se abarca la pantalla en su parte superior, como logo y fondo de cabecera ( Esto reduce significativamente tu FCP, First Contentful Paint ).

activa lazy load en WP

7.3. Eliminar CSS + JavaScript no utilizado

Te lo explico en la parte inicial del artículo, ¿recuerdas el apartado coverage del inspector de código de chrome? si no quieres tocar nada de código lo mejor es que utilices un plugn como Asset Clean Up o Gonzales.

Si tienes un plantilla o tema poco optimizado seguramente estará cargando un montón de scripts tipo slideshow, carousel, accordion... y demás elementos de demostración que quizá no uses en tu homepage. Prueba a revisar el archivo functions.php del tema y elimina las declaraciones innecesarias.

WP Rocket también tiene una opción para remover el CSS que no se usa y hacer un envío únicamente del css crítico. puedes probar esta opción.

7.4. Retrasar la ejecución de JavaScript

La ejecución con retraso de JavaScript puede mejorar el rendimiento de tu website al retrasar la carga de todos los archivos JavaScript y scripts en línea hasta que haya una interacción del usuario (por ejemplo, mover el mouse sobre la página, tocar la pantalla, desplazarse, presionar una tecla, desplazarse con la rueda del mouse).

Es como LazyLoad, pero para archivos JavaScript. Retrasa JavaScript hasta la interacción del usuario

Puedes activar esta oción en WP rocket para los scripts que necesites y aprovecharte de su exclusión en la primera instancia de carga de la página. Pr ejemplo, si tienes un formulario en el pie de página... ¿por qué cargar un script de validación de formulario al comienzo de la cabecera?

8. Utiliza herramientas de medición

Para medir el rendimiento de tu página web te recomiendo utilizar:

  • Google Spped Insigths o mi herramienta de analisis SEO (utilizan la misma API)
  • GT Metrics

9. Utilice un complemento de almacenamiento en caché eficiente

Si WP Rocket está fuera de tu presupuesto, considera utilizar LSCache, que es gratuíto y te brinda acceso a un amplio abanico de opciones para optimizar la velocidad de carga de tu sitio web en wordpress.

10. No uses constructores de páginas lentos

Una tendencia a la hora de abordar un proyecto de diseño web es utilizar constructores de páginas para simplificar la creación de layouts o estructuras de página.

Hay miles de Temas de WordPress en el mercado. Y todos trotan como caballos salvajes clamando ser los mejores... muy habitual en los marketplaces de WP como Envato. Algunos de ellos, pese a que tienen una interfaz muy atractiva y son realmente fáciles de usar, generan muchas líneas de codigo innecesarias y cargan nuestra página con demasiados recursos y archivos innecesarios. Pueden hacer que tu ratio texto/html decaiga considerablemente.

Aqui te paso una lista con los Temas más livianos para wordpress testeada por el equipo de WP Rocket:

ThemePSI Mobile ScorePSI LCPPage Size
(WPT)
HTTP Requests
(WPT)
GeneratePress100%1.2 s26 KB7
Astra100%1.4 s44 KB9
EcoCoded93%2.6 s118 KB15
Neve100%1.2 s32 KB8
Zakra99%1.7 s40 KB12
Sydney96%2.4 s88 KB10
Kadence100%1.4 s40 KB10
Arke100%1.2 s20 KB6
Blocksy99%1.6 s86 KB10
Page Builder Framework97%2.1 s69 KB12
Hello100%1.3 s20 KB7
OceanWP88%2.9 s166 KB18
BuddyX82%3.1 s230 KB34

11. Identifica tus plugins más lentos

Para comprobar qué plugins utilizan más recursos y cómo se comporta su ejecución, puedes instalar Query monitor y conocer mejor el comportamiento de tu Wordpress.

El plugin incluye algunas funciones avanzadas como la depuración de llamadas Ajax, llamadas API REST y comprobaciones de capacidad del usuario, evalua la entrega de recursos al navegador por plugins o tema, lo que le permite determinar rápidamente los plugins, temas o funciones de bajo rendimiento.

12. Publica imágenes con formatos de próxima generación (NextGen)

optimización de imagen NextGen o nueva generación

Los formatos Next Gen: JPEG 2000, JPEG XR y WebP, presentan características de compresión y calidad (ratios) superiores a JPEG y PNG. Si tu sitio web se aprovecha de esta tecnología, probablemente cargará más rápido que otros que no lo hacen, especialmente si tienen muchas imágenes.Si convertimos nuestras imágenes en esos formatos obtendremos imágenes de mayor calidad y con un menor peso, por lo que nuestra web cargará más rápido. Lo correcto sería tener una copia en cada uno de esos formatos ya que JPEG 2000 es el formato utilizado por safari, JPEG XR es el de Microsoft Edge y WebP es usado en Chrome, Firefox y Opera. Debido a que esto implicaría tener la imagen por cuatriplicado, un buen punto de partida es tener como mínimo el formato WebP, ya que es el consentido de los navegadores y la comunidad de desarrolladores

Aprovecha la caché del lado del servidor Utilice el formato de imagen correcto: JPG sobre PNG la mayor parte del tiempo Use imágenes estáticas en lugar de Slideshows

13. Demasiado JavaScript y herramientas pesadas de terceros

Uno se encuentra a veces websites en wordpress que parecen La fiesta del plugin!

Optimizar el código de terceros Utilice un CDN

Utilizar en CDN para servir tus recursos estáticos puede ayudar significativamente a mejorar el rendimiento de tu página web y especialme

Si este artículo te pareció interesante, compártelo en las redes sociales!     

L. Javier Gil

Programador web Freelance.
Ingeniero en Telecomunicaciones.
Comparto curiosidades y noticias del mundo digital desde el corazón de Chapinero, en la lluviosa Bogotá, o desde un rinconcito de la vieja España llamado Benavente.
Blog de Este Gráfico

https://www.estegrafico.com
Contáctame por WhatsApp y coméntame tu idea.

Construiremos el mejor soporte web entre la competencia.

Mi trabajo

Diseño páginas web para clientes de todo el mundo.

Mis clientes opinan

Ver opiniones de Google
Reseña de Google Review de mis clientes

 Un gran Profesional. Ha completado decenas de trabajos web con éxito para nuestra empresa. 
J. M. Torres Jordi
CEO Ediciones Mayo
Reseña de Google de clientes satisfechos

 Excelente servicio, dedicación de tiempo completo a las necesidades del cliente, amplio conocimiento en desarrollar páginas web, muy recomendado!!. 
César Cabana Fonseca
CEO Cabana & Carreño Abogados.
Opinión de Google Business de mis clientes

 Javier es un gran programador, además cuenta con grandes facultades para plasmar la idea del cliente en pantalla. 
Luis Tejerina
CEO 360 Asesores

Trabajemos juntos; comienza tu proyecto web profesional.

Rellena este pequeño formulario y me pondré en contacto contigo con la mayor brevedad posible.