Cómo Eliminar los Bloqueadores de Visualización JavaScript y CSS

Actualizado October 27, 2017

Cuando se trata de la velocidad de su sitio web, es importante pensar en la velocidad como una característica necesaria, no un lujo y tratarla en consecuencia. Hay un montón de cosas que van dentro de la ecuación que determina la rapidez con la que los visitantes del sitio comienzan a ver el contenido cuando visitan su sitio web. Algunas de estas cosas usted no puede controlar: la velocidad de su conexión a internet, su ubicación geográfica, la congestión de la red, y así sucesivamente. Sin embargo, hay otras cosas que puede y debe controlar como los bloqueadores de visualización JavaScript y CSS.

Una herramienta que puede utilizar para identificar problemas de reducción de velocidad que se encuentran bajo su control es Google PageSpeed Insights. Seguramente ha usado PageSpeed Insights antes (si no lo ha hecho, debería hacerlo antes de leer el resto de este artículo). Es gratis y se identifican los problemas que frenan la entrega de sus sitios web, tales como los bloqueadores de visualización JavaScript y CSS.

Problema Común: Los Bloqueadores de Visualización JavaScript y CSS

Hay diez reglas de velocidad utilizadas para analizar sitios dirigidos a través de PageSpeed Insights. Dos de estas reglas tienen que ver con recursos JavaScript y CSS bloqueadores del contenido en la zona “above-de-fold”. Falle cualquiera de estas dos reglas y muchos, muchos sitios fallan uno o ambos – y verá un mensaje de “debería arreglar” dejándole saber que usted debe: Eliminar los bloqueadores de visualización JavaScript y CSS en el contenido “above-the-fold”.

Eliminar los bloqueadores de visualización JavaScript y CSS en el contenido “above-the-fold”

Eliminar los bloqueadores de visualización JavaScript y CSS en el contenido “above-the-fold”

¿Qué significa eso realmente?

Cuando un navegador carga una página web, los recursos JavaScript y CSS suelen impedir que la página web se muestre hasta que se descarguen y procesen por el navegador. En algunos casos, esta es una buena cosa. Por ejemplo, entregar HTML puro antes de que cualquier CSS sea descargado y obtendrá un flash de contenido sin estilo (FOUC) que es probablemente peor experiencia para sus usuarios que esperar unas centésimas de segundo más para que aparezca el contenido.

Algunos de los recursos necesitan ser descargados y procesados antes de mostrar algo. Sin embargo, muchos recursos de CSS y JavaScript son condicionales es decir, sólo se aplican en casos específicos o simplemente no son necesarios para mostrar el contenido que ven los visitantes. Para producir la mejor experiencia posible para los usuarios, debe tratar de eliminar cualquier bloqueador de visualización que no sea necesario para mostrar contenido para los visitantes.

Quiero ser claro en un punto: quizás sea demasiado esfuerzo o simplemente sea imposible extraer todos los recursos de bloqueo. El hacerlo puede incluso producir la temida FOUC (arriba) mencionado hace apenas un minuto. Sólo recuerde que nuestro objetivo no es alcanzar una perfecta puntuación de PageSpeed. En su lugar, nuestro objetivo es ofrecer la mejor experiencia de usuario posible, y eso significa un sitio web que cargue tan rápido como sea posible sin mostrar contenido sin estilo.

En otras palabras, use PageSpeed Insights para identificar los archivos de los bloqueadores de visualización que puede intentar eliminar, pero deje que UX sea su directriz fundamental. Tal vez vea el mismo mensaje en otros instrumentos de test de velocidad. GTmetrix por ejemplo muestra “Defer Parsing / Aplazar la Carga JavaScipt”.

Cómo eliminar los bloqueadores de visualización JavaScript y CSS

Hay un plugin para eso, ¿verdad? Bueno, seguro pero usted necesita entender lo que está sucediendo antes de iniciar a enchufar plugins. Muchos plugins son altamente configurables, y sabiendo cómo los bloqueadores de visualización se eliminan le ayudarán a trabajar de forma más eficaz con el plugin de su elección.

Borrar JS de la Ruta de Visualización Crítica

En primer lugar, hablemos de JavaScript. La idea básica es mover recursos de JavaScript y jQuery innecesarios fuera de la ruta de visualización crítica. Normalmente, esto se hace agregando el atributo DEFER o el atributo ASYNC a los elementos HTML script que llaman a recursos de JavaScript.

Los atributos defer y async no son iguales, y la diferencia puede ser importante para entender.

  • El atributo async indica al navegador para empezar a descargar el recurso de inmediato sin ralentizar análisis HTML. Una vez que el recurso esté disponible, el análisis HTML está en pausa así el recurso puede ser cargado.
  • El atributo defer indica al navegador a frenar la descarga del recurso hasta que se complete el análisis de HTML. Una vez que el navegador haya finalizado con el código HTML esté después descargará y procesará todos los scripts diferidos en el orden en que aparecen en el documento.

La gran diferencia entre los dos es que defer asegura que los scripts se descarguen y se apliquen a la página web en el orden en que aparecen en el documento HTML, mientras async no. El resultado es que si async se utiliza en todos los recursos de JavaScript a menudo puede romper los recursos que dependen de los recursos que aparecen anteriormente en este documento. El problema más común que produce  async es recursos de jQuery rotos que trata de cargar antes de que jquery.js se haya agregado al documento.

Optimizar la Entrega de Recursos CSS

Eliminar totalmente a los bloqueadores de visualización CSS también puede ser difícil, si no imposible. El acuerdo ideal es:

  • Identificar los estilos que se requieren para entregar “above-the-fold” y entregar esos estilos en línea con el código HTML.
  • Utilice el atributo  media sobre los elementos  link que jalan archivos CSS para identificar recursos CSS condicionales es decir, son necesarios sólo para dispositivos o situaciones específicas.
  • Los recursos CSS restantes deben cargarse de forma asincrónica, una maniobra que se realiza normalmente es añadirlos con JavaScript diferido o asincrónico. Para ser honestos, nos estamos confundiendo aquí, ¿no es cierto? Definitivamente esto es territorio de un ingeniero de front-end. Lo cual es estupendo si usted es un ingeniero de front-end, pero la mayoría de nosotros no lo somos. La buena noticia es que este es un artículo sobre WordPress, y puede eliminar o al menos reducir significativamente el número de recursos JS y CSS bloqueadores de visualización que afecten a su sitio web mediante plugin(s) adecuado(s).

Plugins para reducir JavaScript y CSS bloqueadores de visualización

En preparación para este artículo, revisé una docena de populares plugins de WordPress diseñados para reducir y eliminar el número de los bloqueadores de visualización JS y CSS y nos asentamos en cinco que produjeron una reducción mensurable.

También debo decir que yo no usé ningún cache plugin durante este proceso. Mi sitio de prueba se configuró en un plan de Kinsta que viene cache integrada en el nivel de servidor. Si usted no es cliente Kinsta, establecer un buen plugin de cache mejorará aún más el rendimiento de su sitio.

Sin embargo, antes de llegar a los plugins, necesitamos una calificación de punto de referencia. Lo que yo he hecho es configurar un simple sitio de prueba en Kinsta e instalado un tema popular gratis, enamorado de jQuery de WordPress.org: Sydney. Sin hacer nada más, aquí es donde nos encontramos.

PageSpeed Insights sin plugins

PageSpeed Insights sin plugins

No está demasiado mal, pero ciertamente hay margen de mejora. Hay dos recursos de Javascript y cinco de CSS en una posición de bloquear la visualización.

Otra prueba que utilizaremos como punto de referencia es el Pingdom Website Speed Test. En particular, queremos tomar nota del número de solicitudes que se requieren para cargar la página web y ver cómo ese número cambia con diferentes plugins activados. Cada solicitud adicional supone un viaje de ida y vuelta al servidor, de modo que tantos plugins combinarán recursos de CSS y JavaScript en menos archivos para acelerar el rendimiento de su sitio web.

Debido a que mi sitio de prueba está alojado en Kinsta, el sitio es increíblemente rápido inmediatamente y requirió 24 solicitudes para cargar la página.

Prueba de velocidad sin plugins

Prueba de velocidad sin plugins

Veamos cómo podemos mejorar este rendimiento probando algunos plugins.

Speed Booster Pack.

El primero es el Speed Booster Pack. Este plugin está activo en más de 40,000 sitios de WordPress y obtiene un 3.6 de 5 estrellas en WordPress.org.

speed booster pack plugin

Speed Booster pack plugin

Los parámetros del plugin se encuentran en Ajustes > Speed Booster Pack y el menú es razonablemente simple mientras que simultáneamente ofrece bastantes opciones de configuración.

El menú de opciones generales puede mover scripts al pie de página y aplazar el análisis de los archivos Javascript. La combinación de estas dos opciones deben quitar los bloqueadores de visualización JavaScript totalmente. Otro menú llamado ¿aún necesita más velocidad? Permite la carga de CSS de forma asincrónica. Si bien esto debería haber eliminado todos los os bloqueadores de visualización CSS, habilitar esta opción produce el temido FOUC, así que no la deje activada.

Con el plugin configurado, aquí es cómo el sitio funcionó en PageSpeed Insights.

PageSpeed Insights con Speed Booster plugin

PageSpeed Insights con Speed Booster plugin

Como se preveía, no quedan recursos JavaScript bloqueando la visualización. Sin embargo, debido a que la carga CSS asíncrona produjo un FOUC y ha de quedar inhabilitada, los cinco recursos CSS anteriores siguen bloqueando el contenido above-the-fold.

screenshot of pingdom test with speed booster plugin

Prueba de velocidad con Speed Booster plugin

Curiosamente, el número de solicitudes aumentó. Si bien no hay nada que sugiera que el número debería haber disminuido, aumentar el número de solicitudes es una sorpresa. El grado de rendimiento global mejoró un poco, así que no tengo que llamar a Speed Booster Pack un fraude. Sin embargo, hay opciones más eficaces disponibles.

JCH Optimize

JCH Optimize plugin

JCH Optimize plugin

Ahora, echemos un vistazo a JCH Optimize. Mientras que el plugin tiene menos instalaciones activas que Speed Booster Pack, cuenta con una impresionante calificación de 4.6 estrellas de 5.

Este plugin combina y minifica JavaScript y CSS, y junto con muchas otras funciones, está diseñado para acelerar la carga de páginas. Mientras elimina los bloqueadores de visualización no es mencionado específicamente en ningún lugar, la combinación de archivos JavaScript y CSS debería significar que hay menos recursos necesarios para cargar la página y menos recursos JS y CSS en una posición de bloquear la visualización.

El plugin añade un menú de ajustes en Ajustes > JCH Optimize. El menú de ajustes tiene varias páginas con muchas opciones de configuración diferentes. Para hacer las cosas relativamente simples he seleccionado el promedio de configuración automática en el menú de opciones básicas.

Los resultados fueron un poco sorprendentes.

PageSpeed Insights con JCH plugin

PageSpeed Insights con JCH plugin

Todos los recursos de JavaScript se han combinado, lo que significa que sólo un recurso JS está bloqueando la visualización de contenido above-the-fold. Hasta ahora, todo bien. Los resultados CSS son donde tenemos un poco de confusión. Todavía hay cinco recursos de CSS en una posición de bloquear la visualización. Parece que el plugin ha combinado y minificado el contenido de archivos CSS. Sin embargo, archivos de fuentes han sido excluidos, y JCH ha cargado tres diferentes archivos CSS en lugar de combinar los tres en un solo archivo CSS.

Eso no es lo que yo esperaba ver. Veamos lo que Pingdom piensa de los cambios.

Prueba de velocidad con JCH plugin

Prueba de velocidad con JCH plugin

Como se preveía, el número de solicitudes ha sido reducida por uno debido a que dos recursos de JavaScript se han combinado. Aparte de eso, la prueba muestra que el rendimiento es prácticamente igual.

Yo esperaba una mejora mensurable de JCH. Esperaba que todos los archivos CSS se combinen y sólo queden dos bloqueadores de visualización: un archivo JavaScript combinado y un archivo CSS combinado. No estoy seguro de por qué eso no sucedió. Una versión premium de JCH Optimizar está disponible. Así que es posible que algunas de las características avanzadas harían posible combinar los archivos CSS y reducir el número de los bloqueadores de visualización.

Tal como están las cosas, JCH Optimize no es muy útil para la optimización de este particular sitio de prueba.

Autoptimize

Con más de 300,000 instalaciones activas y un 4.7 de 5 estrellas, Autoptimize es uno de los plugins más populares de optimización de la velocidad en el directorio de plugins de WordPress. También gana puntos fuertes justo al instalarse gracias a la actitud generosa y caritativa del autor del plugin.

autoptimize plugin

Autoptimize plugin

Este plugin está diseñado para ser fácil de usar y cumple con esa promesa. Mientras muchas de las otras opciones que miré tenían menús muy complejos, Autoptimize es muy simple. Todo lo que hice fue ir a Fuerte > Autoptimize y seleccionar las tres principales opciones de casilla de verificación que aparecen en esa página.

Ajustes de Autoptimize plugin

Ajustes de Autoptimize plugin

Aquí es cómo mi sitio de prueba funcionó en PageSpeed Insights tras esa simple optimización de 30 segundos o más rápida.

PageSpeed Insights con Autoptimize plugin

PageSpeed Insights con Autoptimize plugin

Hemos conseguido reducir el número de los bloqueadores de visualización de un total de siete a cuatro. Muy bien. Ahora para ver cómo el número de solicitudes ha cambiado.

Prueba de velocidad con Autoptimize plugin

Prueba de velocidad con Autoptimize plugin

El número total de solicitudes ha disminuido considerablemente de 24 a 17, y el grado de rendimiento ha saltado a un impresionante 92. Parece que Autoptimize es popular por una muy buena razón. Debo mencionar que Kinsta ha notado una tendencia de incompatibilidad de Autoptimize con algunos sitios de CSS personalizado en línea en header.php. Por ejemplo, si usted tiene CSS personalizado codificado en el archivo header.php de su archivo sea usted más precavido si prueba Autoptimize.

Javascript Asíncrono

El siguiente en la lista es Async Javascript. No es tremendamente popular, con sólo 4,000 instalaciones activas, pero tiene una muy fuerte clasificación: 4.4 de 5 estrellas. Este es otro plugin demasiado sencillo. Sólo tiene que instalar y activarlo. Ir a la opción de Async Javascript agregada al menú de Admin. Seleccionar la casilla junto a Activar Async JavaScript. Seleccione el botón de radio tanto para el método Defer como para Async. Después, guarde los cambios y vea cómo su sitio se desempeña.

En el caso de mi sitio de prueba, async terminó cargando algunos archivos antes de jQuery jquery.js lo que acabó por romper el sitio. Así que me fui con el método defer. Con esas opciones seleccionadas, he aquí cómo funcionaron las pruebas. En primer lugar, PageSpeed Insights.

PageSpeed Insights con Async plugin

PageSpeed Insights con Async plugin

Como se preveía, se han borrado todos los JavaScript, pero la CSS no ha sido tocada. Esto está bien porque este plugin está diseñado para abordar sólo JavaScript.

Prueba de velocidad con Async plugin

Prueba de velocidad con Async plugin

El rendimiento del sitio según Pingdom fue prácticamente invariable con el plugin instalado. Una vez más, esto sólo confirma que este plugin hace exactamente lo que dice que hará: eliminar los bloqueadores de visualización JavaScript.

Combinando Async JS y Autoptimize

El menú de Async Javascript llama atención al hecho de que está diseñado para funcionar a la perfección con Autoptimize. Como ya tenía Autoptimize instalado le di una prueba. Tras la activación de Autoptimize una casilla nueva apareció en el menú Configuración de Async Javascript para habilitar Soporte de Autoptimize. Con la casilla de verificación activada, aquí es cómo el sitio se desempeñó.

PageSpeed Insights con Async y Autoptimize plugins

PageSpeed Insights con Async y Autoptimize plugins

Excelente. Con ambos plugins configurados, nos las hemos conseguido recortar el número total de los bloqueadores de visualización a sólo tres recursos de CSS. ¿Cómo hemos afectado el número de solicitudes?

Prueba de velocidad con Async y Autoptimize plugins

Prueba de velocidad con Async y Autoptimize plugins

El sitio es veloz y envía 17 solamente peticiones

No llegué a ser un gran aficionado de Async Javascript. Se dedica más lugar en el menú de ajustes para promover la versión premium del plugin que para el mismo plugin. Añade un elemento al menú del Admin en vez de añadirlo en el menú de Ajustes adonde en realidad pertenece. JavaScript está mal escrito: Javascript. Bien, admito que este último no es gran cosa pero si la P en WordPress sí es importante entonces la S en JavaScript también.

Actualización: El autor del plugin abordó estas preocupaciones después de que nuestra entrada fue publicada reduciendo el tamaño del anuncio, moviendo la ubicación del plugin en el menú Admin, e incluso arreglar la ortografía de JavaScript. Dejándonos impresionados. No importan mis pensamientos sobre Async solo porque emparejado con Autoptimize los dos juntos hacen un trabajo genial, al eliminar completamente el JavaScirpt que bloquea la visualización y reducir la cantidad de los bloqueadores de visualización CSS.

Hummingbird

El último plugin que he probado fue Hummingbird por WPMU DEV. Este es un excelente plugin que utilizo en algunos de mis propios sitios web. No hay ninguna versión gratuita del plugin disponible, lo que significa que está comenzando una huelga contra él. No obstante, proporcionó la reducción más significativa de los bloqueadores de visualización, por lo que cabe mencionarlo.

Hummingbird plugin

Hummingbird plugin

Hummingbird es un plugin complejo, pero también bastante amigable considerando lo mucho que ofrece. Para mover recursos de bloqueo de visualización vaya a a Hummingbird > Minificación y seleccione la Chequeo de archivos. Desde la pantalla resultante puede seleccionar los archivos CSS y JavaScript para mover al pie de página o al encabezado, así como los archivos para combinar y minificar.

He combinado y minificado todos los archivos y he trasladado a todos ellos al pie de página con dos excepciones: el archivo principal del tema style.css y jquery.js. He descubierto que ambos archivos deben aparecer en su ubicación original para evitar romper el sitio o producir una FOUC. Con esos ajustes, aquí es cómo el sitio se desempeñó en PageSpeed Insights.

PageSpeed Insights con Hummingbird plugin

PageSpeed Insights con Hummingbird plugin

Como era de esperar, quedamos con sólo dos bloqueadores de visualización: Style.css y jquery.js. Genial. Veamos qué Pingdom nos puede decir.

Prueba de velocidad con Hummingbird plugin

Prueba de velocidad con Hummingbird plugin

Mientras el grado de rendimiento global no es tan alto como lo fue con Autoptimize, hemos conseguido recortar el número total de solicitudes al valor más bajo que hemos visto hasta ahora: 16.

Async JS Funciona Bien con Hummingbird

Mientras las cosas se están viendo realmente bien, se me ocurre que Async Javascript podría ayudarnos a mover jquery.js sin romper nada. Tras la activación de Async Javascript y volver a ejecutar PageSpeed Insights, veo que prácticamente hemos eliminado todos los bloqueadores de visualización.

Eliminar los Bloqueadores de Visualización JavaScript y CSS

Eliminar los Bloqueadores de Visualización JavaScript y CSS

Todo lo que queda en el camino es style.css. El último paso para eliminar completamente todos los bloqueadores de visualización sería poner en línea style.css. Sin embargo, hemos logrado pasar de ver un mensaje Debería Corregir a un mensaje Considere Corregir en PageSpeed Insights. De momento no hay que preocuparse por el mensaje de Considere Corregir, así lo que hemos conseguido hasta ahora es un éxito rotundo.

Conclusión

No todos los plugins que pretenden abordar y eliminar los problemas de los bloqueadores de visualización JavaScript y CSS son creados iguales. Autoptimize utilizado en combinación con Async Javascript es la mejor opción gratuita que encontré para mi sitio de prueba. Sin embargo, usando el plugin premium Hummingbird junto con Async Javascript produjo resultados que finalmente dieron satisfacción a PageSpeed Insights.

Este artículo está lejos de ser exhaustivo, y hay un montón de plugins adicionales que puede utilizar para abordar los bloqueadores de visualización. ¿Qué plugins utiliza y recomienda para eliminar os bloqueadores de visualización JavaScript y CSS?

Este artículo fue escrito por Jon Penland

Jon es un experto y campeón de atención al cliente. Aplica su conocimiento formidable de nuestro CMS favorito para arreglar problemas relacionados con los sitios web. Su formación en ventas significa que hará todo lo posible para que los clientes estén satisfechos. Jon tiene familia, cuando no toca el teclado de su laptop está ayudando arreglar la bicicleta de uno de los niños o configurando Netflix para el otro joven.

Artículos relacionados

Deja un comentario

kinsta newsletter

¿Utilizas WordPress?

¡Únete a más de 20.000 lectores que ya reciben nuestro newsletter semanal GRATUITO con consejos de WordPress sobre cómo generar más tráfico e ingresos para tu negocio!

You have Successfully Subscribed!

Send this to a friend