Optimiza tu página web WordPress.
¿Cómo evitar enormes cargas útiles de red (error de velocidad) en WordPress? Programador web Freelance

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

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.

Revisa el artículo: Cómo comprimir mis imágenes para la web: 5 herramientas alucinantes.

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.

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 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:

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 ).

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:

Theme	PSI Mobile Score	PSI LCP	Page Size (WPT)	HTTP Requests (WPT)
GeneratePress	100%	1.2 s	26 KB	7
Astra	100%	1.4 s	44 KB	9
EcoCoded	93%	2.6 s	118 KB	15
Neve	100%	1.2 s	32 KB	8
Zakra	99%	1.7 s	40 KB	12
Sydney	96%	2.4 s	88 KB	10
Kadence	100%	1.4 s	40 KB	10
Arke	100%	1.2 s	20 KB	6
Blocksy	99%	1.6 s	86 KB	10
Page Builder Framework	97%	2.1 s	69 KB	12
Hello	100%	1.3 s	20 KB	7
OceanWP	88%	2.9 s	166 KB	18
BuddyX	82%	3.1 s	230 KB	34

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)

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