Si alguna vez ha ejecutado su sitio de WordPress a través de Google PageSpeed Insights, Google probablemente le ha dicho que necesita eliminar los recursos de bloqueo de renderizado en su sitio de WordPress. De hecho, puede que sea por eso por lo que está leyendo este mismo post ahora mismo.
Eso probablemente plantea dos preguntas en su mente:
- ¿Qué son los recursos de bloqueo de la reproducción en primer lugar?
- ¿Cómo puede eliminar los recursos de bloqueo de renderizado en WordPress?
En este post, vamos a responder a ambas preguntas para usted. Aquí está todo lo que cubriremos en este artículo:
- ¿Qué son los recursos de bloqueo y por qué son un problema?
- ¿Cómo arreglar los recursos de bloqueo de renderizado en general?
- ¿Cómo usar los plugins gratuitos o de pago para arreglar el problema en WordPress?
¿Qué significa «Eliminar los recursos que bloquean el renderizado»?
Para entender qué son los recursos de bloqueo de renderizado y por qué perjudican los tiempos de carga de su sitio, necesitamos empezar con una mirada básica a cómo un navegador web renderiza una página web.
Cuando un visitante aterriza en su sitio, su navegador web básicamente comienza en la parte superior del código de su sitio y lee hacia abajo. De arriba a abajo, ¿bien?
Si en ese proceso, se encuentra con un archivo CSS o JavaScript, necesita dejar de «leer» mientras espera para descargar y procesar ese archivo. El tiempo que pasa «en pausa» para descargar y analizar esos recursos podría dedicarse a algo mucho más productivo, como cargar la parte del contenido de su sitio web que es visible inmediatamente cuando alguien aterriza en la página.
Veamos un ejemplo extremo para mostrar por qué esto puede ser un problema.
Digamos que tiene este genial efecto de JavaScript en el pie de página de su sitio. Está potenciado por «coolfooter.js», que es un script al que se hace referencia en la parte superior del código de su sitio (aunque el efecto está en el pie de página, por lo que los visitantes no lo verán hasta que se desplacen al pie de página).
Así que un diseño muy aproximado para el código de su sitio podría ser algo así como:
- Meta de cabecera
- Coolfooter.js
- HTML para su contenido de arriba. Este es todo el contenido que un visitante ve de inmediato (antes de que empiece a interactuar con la página)
Y aquí está la razón por la que esto es un problema:
Cuando un visitante llega a su sitio, su navegador comienza a leer de arriba a abajo. Así que antes de que pueda analizar y mostrar el HTML para el contenido de su sitio, necesita esperar para descargar y analizar el archivo coolfooter.js.
¿Resultado final? Se tarda más tiempo en mostrar el HTML para el contenido de arriba, lo que significa que sus visitantes percibirán que su sitio es más lento.
Cuando Google le dice que elimine los recursos de bloqueo de renderizado, está diciendo esencialmente, «oiga, no cargue recursos innecesarios en la parte superior del código de su sitio porque va a hacer que los navegadores de los visitantes tarden más en descargar la parte visible de su contenido».
Con los consejos de este post, podrá esperar a cargar ciertos recursos CSS y JavaScript hasta que la parte visible de su página ya se haya cargado.
¿Qué son los recursos para bloquear el renderizado?
Cuando nos referimos a los recursos de bloqueo de renderizado, normalmente hablamos de:
- CSS
- JavaScript
Es importante entender que no todos los archivos CSS y JavaScript bloquean el renderizado.
Por ejemplo, es importante cargar su CSS crítico cerca de la parte superior, de lo contrario sus visitantes podrían experimentar lo que se conoce como un flash de contenido sin estilo (FOUC).
¿Las imágenes son recursos que bloquean el renderizado?
No, las imágenes no bloquean el renderizado. Sigue siendo importante optimizar las imágenes para reducir el tamaño de los archivos, pero no hay que preocuparse por optimizar la ruta de entrega de las imágenes.
¿Cómo probar si su sitio web tiene recursos para bloquear el renderizado?
Para evaluar si su sitio de WordPress dispone actualmente de recursos de bloqueo de renderizado, puede utilizar Google PageSpeed Insights.
Todo lo que tiene que hacer es introducir la URL que quiere probar. Entonces, si tiene un problema con los recursos que bloquean el renderizado, PageSpeed Insights listará cada recurso individual en la sección Eliminar recursos que bloquean el renderizado en Oportunidades:
¿Cómo se eliminan los recursos que bloquean el renderizado?
No se preocupe, no tiene que hacer esto manualmente. Hablaremos de los plugins de WordPress que pueden ayudarle a eliminar los recursos de bloqueo de renderizado en la siguiente sección.
Sin embargo, es útil entender lo que estos plugins están haciendo entre bastidores para eliminar los recursos de bloqueo del renderizado.
¿Cómo eliminar los recursos de bloqueo del renderizado de JavaScript?
Hay unas cuantas estrategias diferentes para eliminar los recursos de bloqueo de renderizado de JavaScript. Cubrimos esto en detalle en nuestro artículo sobre cómo diferir el análisis de JavaScript, pero aquí están los principales métodos:
- Async – permite al analizador de HTML (por ejemplo, el navegador de un visitante) descargar el JavaScript mientras sigue analizando el resto del HTML. Es decir, no deja completamente de analizar mientras el archivo se descarga. Sin embargo, hará una pausa en el analizador de HTML para ejecutar el script una vez que se descargue.
- Defer – deja que el analizador HTML descargue el JavaScript mientras analiza el resto del HTML y espera a ejecutar el script hasta que el análisis HTML termine.
Esta ilustración de «Creciendo con la Web» hace un gran trabajo para mostrar la diferencia:
El beneficio de usar el defer es que sus guiones están garantizados para ejecutarse en el orden en que aparecen en el código.
Async no utiliza este enfoque, lo que a veces puede causar problemas si se aplica a todos los recursos de JavaScript porque a menudo puede romper los recursos que dependen de los recursos que aparecen antes en el documento. El problema más común que produce async es la rotura de los recursos de jQuery que tratan de cargarse antes de que se haya añadido jquery.js al documento.
¿Cómo eliminar el bloqueador de renderizado CSS?
Eliminar el bloqueo de renderizado CSS puede ser un poco más complicado porque hay que tener cuidado de no retrasar el CSS que se necesita para renderizar el contenido por encima de la página. El arreglo ideal es:
- Identificar los estilos que se requieren para renderizar el contenido por encima de la página y entregar esos estilos en línea con el HTML.
- Utilice el atributo de medios en los elementos de enlace que tiran de los archivos CSS para identificar los recursos CSS que son condicionales, es decir, que sólo se necesitan para dispositivos o situaciones específicas.
- Los recursos CSS restantes deben ser cargados asincrónicamente, un movimiento que se hace típicamente agregándolos con JavaScript diferido o asincrónico. Para ser honesto, nos estamos metiendo en un lío, ¿no? Esto es definitivamente territorio de ingenieros de primera línea. Lo cual es genial si es un ingeniero de primera línea, pero la mayoría de nosotros no lo somos. La buena noticia es que se trata de un artículo sobre WordPress, y puede eliminar o al menos reducir significativamente el número de recursos de JS y CSS que bloquean el renderizado y que afectan a su sitio con el(los) plugin(s) adecuado(s).
Otra forma rápida y sencilla de mejorar la optimización general es minificar el código. Kinsta ha incorporado una función de minificación de código en el panel de control de MyKinsta, lo que permite a los clientes activar la minificación automática de CSS y JavaScript con un simple clic.
Si no puedes localizar la función en tu panel de control, simplemente consulta nuestro vídeo Cómo Activar la Minificación en MyKinsta.
¿Cómo eliminar los recursos CSS y JavaScript que bloquean el renderizado con los plugins de WordPress?
Para demostrar cómo eliminar los recursos que bloquean el renderizado en WordPress, hemos creado un sencillo sitio de prueba que incluye CSS y JavaScript que bloquean el renderizado y luego le explicaremos cómo utilizar dos soluciones de plugin diferentes para eliminar el CSS y el JavaScript que bloquean el renderizado:
- Autoptimize + Async JavaScript (gratis)
- WP Rocket (pagado)
Como referencia, aquí está el aspecto de nuestro sitio de prueba antes de optimizar la entrega de CSS y JavaScript:
Si está probando la efectividad de sus cambios con Google PageSpeed Insights, tenga en cuenta que Google almacena sus resultados en caché durante varios minutos. Esencialmente, esto significa que si rápidamente…
- Pruebe su sitio no optimizado
- Activar uno de los plugins de esta sección
- Vuelva a probar su sitio
…entonces seguirá viendo los resultados de su sitio no optimizado hasta que Google restablezca su caché. Así que asegúrese de esperar unos minutos para que Google limpie su caché antes de que piense que el plugin no funciona.
¿Cómo eliminar los recursos de bloqueo de renderizado con el plugin JavaScript de Autoptimize + Async?
Autoptimize y Async JavaScript son dos plugins independientes y gratuitos del mismo desarrollador. Juntos, le ayudan a optimizar la entrega de su CSS y JavaScript.
Una vez que haya instalado ambos plugins, ve a Settings → Async JavaScript y:
- Marque la casilla para activar el JavaScript Async en la parte superior.
- Elija entre Aplicar sincronización y Aplicar defer en el cuadro de configuración rápida.
Si la opción Async causa problemas en su sitio, le recomendamos que pruebe Defer o que excluya jQuery, para lo cual el plugin le da una opción.
Una vez que haya configurado el plugin de JavaScript Async, vaya a Settings → Autoptimize y:
- Marque la casilla para optimizar el código JavaScript
- Marque la casilla para optimizar el código CSS
Si es un usuario avanzado, puede jugar con los ajustes adicionales de optimización de JavaScript y CSS, pero la mayoría de los sitios estarán bien con los valores predeterminados.
Después de configurar tanto Autoptimize como Async JavaScript, nuestro sitio de prueba pasó la auditoría de PageSpeed Insights «Eliminar recursos de bloqueo de renderizado»:
Si quisiera eliminar aún más de esos archivos, podría usar Autoptimize para alinear manualmente su crítico CSS. Sin embargo, esto requiere algunos conocimientos de desarrollo, por lo que no es algo que los no desarrolladores deban intentar.
También puede usar los plugins por separado si lo prefiere. Pero dado que ambos plugins provienen del mismo desarrollador y están construidos para jugar bien entre ellos, el mejor enfoque para la mayoría de los sitios es combinarlos.
¿Cómo eliminar los recursos de bloqueo de renderizado con el WP Rocket?
WP Rocket es un popular plugin de rendimiento y cacheo de WordPress.
Normalmente, no permitimos los plugins de cacheo en los sitios de WordPress alojados en Kinsta porque ya manejamos el cacheo a nivel de servidor a través del rápido cacheo Nginx FastCGI.
Sin embargo, WP Rocket tiene una integración especial con Kinsta que permite a WP Rocket jugar bien con su caché Kinsta. Eso es genial porque WP Rocket hace mucho más por el rendimiento de WordPress que sólo el almacenamiento en caché, incluyendo la ayuda para eliminar los recursos CSS y JavaScript que bloquean el renderizado en su sitio de WordPress.
Una vez que instale y active WP Rocket, vaya a la pestaña de Optimización de Archivos. Entonces, habilite estas dos opciones:
- Optimizar la entrega de CSS en la sección de archivos CSS
- Cargar JavaScript diferido en la sección de archivos de JavaScript. Puede experimentar con el apagado del modo seguro para jQuery. Pero si nota problemas en el front-end de su sitio, querrá volver a activar el modo seguro para jQuery ya que es el probable culpable.
Después de activar estas dos características, nuestro sitio de prueba también pasó la auditoría de «eliminar los recursos de bloqueo de renderizado» en PageSpeed Insights. WP Rocket también se las arregló para eliminar más recursos de bloqueo de renderizado que la configuración de JavaScript de Autoptimize/Async:
¡Y así es como se eliminan los recursos de bloqueo de renderizado en su sitio web de WordPress!
Resumen
Los recursos de bloqueo de renderización disminuyen los tiempos de carga de las páginas de su sitio WordPress, obligando a los navegadores de los visitantes a retrasar la renderización de los contenidos por encima de la página mientras el navegador descarga los archivos que no se necesitan de inmediato.
Para ayudar a los visitantes a cargar la parte visible de su página más rápidamente, debería retrasar la carga de los recursos que no se requieren inmediatamente.
Para eliminar los recursos que bloquean el renderizado en WordPress, puede usar plugins off-the-rack.
Para una solución gratuita, puede usar la combinación de Autoptimize y Async JavaScript, dos plugins del mismo desarrollador.
Si está dispuesto a pagar, puedes usar WP Rocket, que ofrece una integración especial con Kinsta y puede ayudar con muchos otros ajustes de rendimiento de WordPress.
¿Tiene alguna pregunta adicional sobre cómo eliminar los recursos de bloqueo de renderizado en WordPress? ¡Háganoslo saber en los comentarios!
Jon es el Director de Operaciones de Kinsta y colabora a diario con los equipos de ventas, atención al cliente y soporte técnico de Kinsta. Jon es un hombre de familia. Así que cuando no está golpeando frenéticamente las teclas de su portátil, suele estar ayudando a uno de sus hijos a arreglar una bicicleta o configurando Netflix para un niño impaciente en edad preescolar.
Muchísimas gracias me sirvió de mucho esta información, Dios lo bendiga.