Conecta con nosotros

WPO Optimización del rendimiento web

Cómo eliminar los recursos que bloquean el renderizado en WordPress

Seguramente cuando has hecho un test de velocidad en tu sitio web te has encontrado con este mensaje «Elimina los recursos que bloqueen el renderizado» o en ingles «Eliminate render-blocking resources» En este post te explicamos como resolverlo

Publicado

on

Cómo eliminar los recursos que bloquean el renderizado en WordPress

Te pongo en situación, tengo una web a la que debo mejorar su velocidad de carga. Es un elefante. Por lo que me parece una buena idea documentar todo el proceso en esta categoría que he llamado WPO. De modo que en este primer post te voy a explicar como eliminar los recursos que bloquean el renderizado en WordPress, si en WordPress, si tienes otro CMS o web hecha a mano, puedes aplicar le mismo principio, usando los recursos que el CMS te ofrece o que tus conocimientos de programación te dan.

Dicho esto, empecemos. La web en cuestión es eymascursos.info, ahí hablo de temas relacionados a WordPress y algunos planes de formación interesantes. El resultado inicial es este:

eliminar los recursos que bloquean el renderizado en WordPress
Cómo eliminar los recursos que bloquean el renderizado en WordPress

Como puedes ver, los recursos que bloquean el renderizado están afectando significativamente a la web, de hecho, es algo que también se señala en GTmetrix.

Cómo eliminar los recursos que bloquean el renderizado en WordPress

Si no es por el Hosting que tengo, que es una autentica maquina del futuro, esta web estaría tirada, ya que no tiene cache, esta cargando todo lo que Elemento genera, en fin y las fotos están sin optimizar. Así que es un buen ejemplo para aplicar todo lo que sé sobre WPO.

Donde vemos o como encontramos los recursos que bloquean el renderizado

¿De dónde se cargan los recursos que bloquean el renderizado? ¿Cuál es el tiempo de transferencia y el ahorro potencial? Reduce los tipos de archivos que causan problemas para saber en qué centrarte.

Los resultados del PageSpeed de Google ya no los dice:

Cómo eliminar los recursos que bloquean el renderizado en WordPress
Como eliminar los recursos que bloquean el renderizado en WordPress -Donde encontramos los recursos que bloquean el renderizado

GTmetrix también nos suma más recursos a lista, que en algunas ocasiones coincide con los que nos ha dado el PageSpeed-

Cómo eliminar los recursos que bloquean el renderizado en WordPress
Como eliminar los recursos que bloquean el renderizado en WordPress -Donde encontramos los recursos que bloquean el renderizado

En este caso, solo un recurso no coincide con los que me ha aportado el PageSpeed, por lo que lo sumo a la lista. Este, concretamente.


https://eymascursos.info/wp-content/uploads/elementor/css/post-2631.css?ver=1609290059

Como veras, los recursos comunes para el bloqueo de la renderización son estos:

  • Archivos CSS
  • Archivos JavaScript
  • Código de terceros
  • Plugins
  • jQuery
  • Fuentes
  • Animaciones
  • Creadores de páginas
  • WooCommerce

Aplazar JavaScript

El aplazamiento de JavaScript puede arreglar muchos recursos que bloquean la renderización en WordPress.

Autoptimize y Async JavaScript suelen hacer un mejor trabajo a la hora de diferir JavaScript que los plugins de caché (por ejemplo, cargar JavaScript diferido en la configuración de WP Rocket).

Este es un trabajo común, que se puede lograra con un plugin de caché como WP Rocket, pero no siempre se puede lograr con este plugin u otro de cache, yo he encontrado alternativas como Autoptimize y Async JavaScript, que además complementan el trabajo de WP Rocket.

La configuración por defecto suele estar bien para ambos plugins. Async JavaScript también le da un mejor control sobre qué archivos específicos aplazar o async.

Cómo eliminar los recursos que bloquean el renderizado en WordPress
Async JavaScript
Cómo eliminar los recursos que bloquean el renderizado en WordPress
Autoptimize

Una vez instalados los buscamos en la sección de Ajustes de nuestro panel de WordPress.

Cómo eliminar los recursos que bloquean el renderizado en WordPress

Con el plugin Autoptimize, optimiza y agrega los archivos CSS y JavaScript como verás en las dos imágenes:

Cómo eliminar los recursos que bloquean el renderizado en WordPress
Optimiza y unifica los archivos JS
Cómo eliminar los recursos que bloquean el renderizado en WordPress
Optimiza y unifica los archivos CSS

Ahora, con el plugin Async JavaScripthacemos clic en «apply defer» en los ajustes rápidos del plugin.

Cómo eliminar los recursos que bloquean el renderizado en WordPress
Aplazamos los archivos

Como ya hemos dicho antes, algunos plugin de cache se encargan de aplazar los archivos JS, pero también hemos dicho que la función de estos plugin es especifica y por eso lo usamos cuando el plugin de cache no cumple como esperamos.

CSS crítico en línea

Muchos plugins de caché tienen una opción para optimizar la entrega de CSS.

Cuando la activas en WP Rocket, generan el CSS crítico y luego «cargan todos los demás archivos CSS de forma asíncrona… sin bloquear la renderización».

En primer lugar, asegúrate de que el CSS crítico está funcionando y no está contribuyendo al cambio de diseño acumulado (CLS) o al FOUT (destello de texto sin estilo cuando abres tu sitio web). Para arreglar esto, es posible que tengas que borrar la caché o regenerar el CSS crítico en WP Rocket, así como tu constructor de páginas, si lo estás utilizando. También es posible que tengas que excluir archivos de la optimización de la entrega de CSS utilizando el plugin de ayuda de WP Rocket.

También es una buena idea establecer un CSS crítico de reserva:

  • Habilita la entrega de CSS optimizado en tu plugin de caché.
  • Analiza tu sitio web con PurifyCSS.
  • Descarga el CSS combinado, purificado y minificado.
  • Pega el código en tu casilla de CSS crítico de reserva.

Aquí tienes las imágenes, de los pasos descritos anteriormente:

Cómo eliminar los recursos que bloquean el renderizado en WordPress
Descarga el CSS combinado, purificado y minificado que obtuvimos de Purify CSS
Cómo eliminar los recursos que bloquean el renderizado en WordPress
Pegamos el codigo en nuestro plugin de cache, en la zona de Ruta crítica CSS alternativa, yo uso WP Rocket

El artículo me ha tomado mucho tiempo, por ahora lo dejo aquí, ya que el trabajo con Asset CleanUp es muy técnico y solo lo necesito para algo especifico. Pero ya los recursos que antes estaban se han ido del informe de Pagespeed, solo me quedan dos, los que se generan por el plugin Autoptimize. En la valoración no se nota tanto, pero sumado a otros problemas que se deben resolver en esta web, los resultados serán muchísimo mejor, dame un día o dos, (debo trabajar) y te lo dejo pepita. Además, tenemos por delante mucho que hacer y escribir sobre WPO.

Elimina el CSS y el JavaScript no utilizados

Probablemente hayas oído hablar de Asset CleanUp y Perfmatters.

Cómo eliminar los recursos que bloquean el renderizado en WordPress
Asset CleanUp – Elimina el CSS y el JavaScript no utilizados

Te permiten eliminar CSS y JavaScript cuando no se utilizan. Recortar el CSS y el JavaScript puede tener un gran impacto en los recursos que bloquean la renderización, así como en sus resultados generales.

  1. Elige un plugin para descargar activos
  2. Habilitar el gestor de scripts y el modo de prueba

Si usas Perfmatters, activa el gestor de scripts en la configuración del plugin. En caso de utilizar Asset CleanUp, activa el modo de prueba que te permite probar la descarga de activos sin romper tu sitio (sólo tú verás si hay cambios visibles). Perfmatters no tiene un modo de prueba, por lo que tendrá que comprobar si hay errores visibles en tu web en vivo durante las pruebas, o crear una web de pruebas.

Soluciones.link , blog de respuestas y soluciones que debería estar fijado en tu barra de favoritos en el navegador. Si no sabes como hacerlo, en nuestra web te lo explicamos.

Publicidad
Click para comentar

You must be logged in to post a comment Login

Salir y deshacer

Destacados