How to Eliminate Render-Blocking Resources on WordPress (CSS + JavaScript)

Hola a todos, soy Mike y hoy voy a mostraros cómo eliminar los recursos de render-blocking en WordPress. (música alegre) Si alguna vez has ejecutado tu sitio de WordPress a través de Google PageSpeed Insights. Probablemente Google te ha dicho que tienes que eliminar los recursos de render-blocking en tu sitio de WordPress. De hecho, me atrevería a suponer que por eso estás viendo este vídeo ahora mismo. Pero antes de empezar, me gustaría invitarte a que te suscribas y toques esa campana para recibir notificaciones de futuros contenidos útiles. Muy bien, eliminemos esos recursos de render-blocking No tendrás que hacerlo manualmente. Hablaremos de los plugins de WordPress que pueden ayudarte a eliminar los recursos render-blocking en un minuto. Sin embargo, es útil entender lo que estos plugins hacen entre bastidores para eliminar los recursos render-blocking Cuando Google te dice que elimines los recursos render-blocking, está diciendo básicamente, "Oye, no cargues recursos innecesarios en la parte superior del código de tu sitio, porque lo hará más largo para los navegadores de tus visitantes para descargar la parte visible de tu contenido". Cuando te refieres a recursos render-blocking, solemos hablar de CSS y JavaScript. Es importante entender que no todo el CSS y JavaScript bloquean la reproducción. Por ejemplo, es importante cargar tu CSS crítico cerca de la parte superior, de lo contrario, tus visitantes podrían experimentar lo que se conoce como un flash de contenido sin estilo. ¿Las imágenes son recursos render-blocking? No, las imágenes no son recursos render-blocking. Sigue siendo importante optimizar tus imágenes para reducir el tamaño de los archivos, pero debes preocuparte de optimizar la ruta de entrega de tus imágenes. Hay algunas estrategias diferentes para eliminar el JavaScript que bloquea la reproducción, pero aquí están los métodos principales. Async. Esto permite que el analizador HTML como el navegador de un visitante descargue el JavaScript mientras sigue analizando el resto del HTML. Es decir, no deja de analizar completamente mientras se descarga el archivo. Sin embargo, se detendrá el analizador HTML para ejecutar el script una vez que se descargue. Defer. Esto permite que el analizador HTML descargue el JavaScript mientras analiza el resto del HTML y espera a ejecutar el script hasta que termine el análisis del HTML. Esta ilustración de Growing con la Web hace un gran trabajo para mostrar la diferencia. La ventaja de utilizar el aplazamiento es que tus scripts están garantizados para ejecutarse en el orden que aparecen en el código. Async no utiliza este enfoque lo que a veces puede causar problemas si aplicas async a todos los recursos 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 son los recursos jQuery rotos que intentan cargar antes de que se haya añadido jQuery.JS al documento. Eliminar el CSS que bloquea la reproducción puede ser un poco más complicado porque tienes que tener cuidado de no retrasar el CSS que se necesita para mostrar el contenido por encima del pliegue. Lo ideal es identificar primero los estilos que se necesitan para representar el contenido por encima del pliegue y entregar esos estilos en línea con el HTML. A continuación, utiliza el atributo media en los elementos de enlace que tiran de los archivos CSS para identificar los recursos CSS que son condicionales, es decir, sólo se necesitan para determinados dispositivos o situaciones. Y por último, los recursos CSS restantes se debe cargar de forma asíncrona, un movimiento que se suele hacer añadiendo con diferido o con JavaScript asíncrono. Para ser honesto, nos estamos metiendo en un buen lío, ¿no? Esto es definitivamente territorio de los ingenieros de primera línea lo que es estupendo si eres un ingeniero de primera línea, pero la mayoría de nosotros no lo somos. La buena noticia es que este vídeo es sobre WordPress y puedes eliminar, o al menos reducir significativamente el número de JavaScript que bloquea la representación y CSS que afectan a tu sitio con los plugins adecuados. Para demostrar cómo eliminar los recursos render-blocking en WordPress con los plugins, creamos un sencillo sitio de pruebas que incluye CSS y JavaScript que bloqueen la reproducción y luego te llevaremos a través de cómo utilizar dos soluciones de plugin diferentes para eliminar el CSS y el JavaScript que bloquean la reproducción. Autoptimize un JavaScript asíncrono, un plugin gratuito de pago y WP Rocket, un plugin de pago. Como referencia, este es el aspecto de nuestro sitio de pruebas antes de optimizar la entrega de CSS y JavaScript. Si estás probando la eficacia de tus cambios con Google PageSpeed Insights, ten en cuenta que Google almacena en caché sus resultados durante varios minutos. Básicamente, esto significa que si pruebas rápidamente tu sitio no optimizado activa uno de los plugins de la sección y reinicia tu sitio, entonces verás los resultados de tu sitio Autoptimized hasta que Google restablezca su caché. Así que asegúrate de esperar unos minutos para que Google borre su caché antes de pasar a la siguiente conclusión de que el plugin no funciona. Autoptimized y JavaScript asíncrono son dos plugins gratuitos distintos del mismo desarrollador. Juntos, te ayudan a optimizar la entrega tanto de tu CSS como de tu JavaScript. Una vez que hayas instalado ambos plugins ve a la configuración y luego al JavaScript asíncrono y marca la casilla para activar el JavaScript asíncrono en la parte superior. A continuación, elige entre aplicar async y aplicar differ en el cuadro de ajustes rápidos. Si la opción async causa problemas en tu sitio, te recomendamos que pruebes a diferir o a excluir jQuery, para lo cual el plugin te da una opción. Una vez que hayas configurado el plugin Async JavaScript, ve a la configuración y luego a la optimización automática y marca la casilla para optimizar el código JavaScript y luego marca la casilla para optimizar el código CSS. Si eres un usuario avanzado, puedes jugar con el JavaScript adicional y los ajustes de optimización de CSS, pero la mayoría de los sitios estarán bien con los valores predeterminados. Después de configurar la Autoptimized y el JavaScript asíncrono, nuestro sitio de prueba pasó por PageSpeed Insights eliminando la auditoría de recursos render-blocking. Si quieres eliminar aún más archivos podrías seguir utilizando la Autoptimize para alinear manualmente tu CSS crítico. Esto requiere algunos conocimientos de desarrollo por lo que no es algo que deban intentar los que no son desarrolladores. También puedes probar los plugins por separado si lo prefieres pero dado que ambos plugins provienen del mismo desarrollador y están construidos para funcionar bien el uno con el otro, el mejor enfoque para la mayoría de los sitios es combinarlos. WP Rocket es un plugin premium popular de rendimiento de WordPress y de caché. Normalmente no permitimos los plugins de caché en los sitios de WordPress alojados en Kinsta porque ya nos encargamos de la caché por ti a nivel de servidor a través de la rápida caché CGI de NGINX. Sin embargo, WP Rocket tiene una integración especial con Kinsta que permite a WP Rocket funcionar bien con tu caché de Kinsta. Eso es genial porque WP Rocket hace mucho más para el rendimiento de WordPress que sólo el almacenamiento en caché incluyendo lo que hemos venido a hacer hoy, ayudándote a eliminar el CSS que bloquea la reproducción y JavaScript en tu sitio de WordPress. Una vez que hayas instalado y activado WP Rocket ve a la pestaña de optimización de archivos y activa estas dos opciones. Optimizar la entrega de CSS en la sección de archivos CSS y baja de JavaScript diferido en la sección de archivos JavaScript. Puedes experimentar girando el modo seguro de jQuery, pero si notas problemas en el front-end de tu sitio, querrás volver a activar el modo seguro para jQuery ya que probablemente sea el culpable. Después de activar estas dos funciones, nuestro sitio de pruebas también pasa la auditoría de eliminación de los recursos render-blocking en PageSpeed Insights. WP Rocket también gestiona eliminar más recursos que bloquean la representación que la configuración de Autoptimize y JavaScript asíncrono. Ahí lo tienes. Así es como se eliminan los recursos render-blocking en tu sitio web de WordPress. ¿Tienes alguna pregunta adicional sobre cómo eliminar los recursos render-blocking en WordPress? Háznoslo saber en los comentarios de abajo. El hosting de Kinsta para WordPress puede acelerar tu sitio web hasta en un 200% y tendrás soporte 24/7 de nuestros ingenieros expertos en WordPress. Deja que te mostremos la diferencia de Kinsta. Prueba una demostración gratuita de nuestro panel de control MyKinsta en demo.kinsta.com. Gracias por tu atención y no olvides suscribirte para recibir más tutoriales y explicaciones y contenidos útiles como éste. (música alegre)