Uno de los aspectos más críticos de la ejecución de un sitio web moderno es garantizar que siempre se cargue lo más rápido posible. Las estadísticas dicen que las personas son muy impacientes cuando se trata de tiempos de carga, por lo que debes ser proactivo cuando se trata de optimizar tu sitio web.

Hay muchas cosas que puedes hacer para mantener los tiempos de carga optimoz, y una de ellas es aprendiendo cómo lidiar con el JavaScript que bloquea el renderizado y el CSS en el contenido de la mitad superior de la página. Si no estás seguro de qué es eso, no te preocupes: para cuando hayas terminado de leer esta guía, todo estará completamente claro. Además, tu sitio web reducirá algunos de sus tiempos de carga para arrancar.

En esta guía, vamos a hablar sobre qué son JavaScript y CSS. Luego, te enseñaremos cómo eliminar JavaScript y CSS que relentizan el contenido de la mitad superior de WordPress de dos maneras diferentes. ¡Pongámonos a trabajar!

¿Qué es ‘bloqueo de renderizado’ en JavaScript y CSS?

Antes de ir más allá, hay muchos términos que debemos aclarar. Independientemente de si eres un principiante o un experto, puede que no estés familiarizado con algunos de ellos, así que tomemos un minuto para presentar los términos que usaremos a lo largo de esta guia:

  • JavaScript. Este es un lenguaje de programación que puedes usar para agregar funcionalidad avanzada a tu sitio web. La mayoría de los plugins y temas de WordPress usan JavaScript, lo que significa que agregan un código adicional a tu sitio para que todo funcione.
  • Hojas de estilo en cascada (CSS). Si deseas agregar estilos complejos a tu sitio web, necesitarás usar CSS. Cada sitio utiliza HTML como su base, por así decirlo, y puedes pensar en CSS como fondo de pantalla y pintura.
  • Render-bloqueo. Este término se refiere a los elementos que impiden que tus páginas se carguen o «rendericen» lo más rápido posible en los navegadores de tus visitantes. En otras palabras, cualquier JavaScript o CSS adicional que agregue a tu sitio web se considera que bloquea la visualización.
  • Contenido de la mitad superior de la página. Cuando cargas un sitio web usando cualquier navegador, al principio solo puedes ver una parte. Para ver todo el asunto, debes desplazarte hacia abajo hasta el final. La parte de la página que puedse ver tan pronto como se carga es lo que llamamos contenido de la mitad superior de la página.

Ahora que sabes lo que significa cada pieza del rompecabezas, el concepto no debería ser tan complicado. Cuando hablamos de eliminar el JavaScript que bloquea el renderizado y el CSS en el contenido de la mitad superior de la página, nos estamos refiriendo al proceso de optimización de tu sitio web para que esos scripts y archivos no afecten tus tiempos de carga.

Cuanto más rápido se carga tu sitio web, mejor será la experiencia para tus visitantes. La gente no tiene mucha paciencia cuando se trata de sitios web lentos, y un sitio que se arrastra puede alejar a los visitantes de la frustración, lo que puede ser un golpe mortal.

Para que quede claro, hay muchas cosas que puedes hacer para optimizar los tiempos de carga de tu sitio web. Sin embargo, eliminar el JavaScript que bloquea el renderizado y el CSS en el contenido de la mitad superior de la página puede ser particularmente complicado, por lo que es posible que necesites ayuda. Antes de ponernos a trabajar, vamos a hablar sobre cómo controlar el rendimiento de tu sitio web en primer lugar.

Cómo Controlar el Rendimiento de Tu Sitio Web

Cuando se trata del rendimiento de tu sitio web, hay muchas herramientas que puedes usar para indicarle exactamente cuánto tiempo tardan tus páginas en cargarse. GTmetrix, por ejemplo, te ofrece resultados completos de pruebas de velocidad. Simplemente te dice al servicio qué URL analizar y te devolverá un informe en segundos:

Tus resultados en GTMetrix

A la izquierda de la pantalla, verás dos puntuaciones de GTmetrix que da tu sitio en función de cómo se ha optimizado. El sitio web en el que podrías utilizar un bit de trabajo y puedes aprender acerca de cómo optimizarlo si va a desplazarse a la página PageSpeed:

Resultados en la pagina PageSpeed de GTMetrix

Por ahora, nos vamos a enfocar solo en el tiempo total de carga, y menos de dos segundos es un buen objetivo. Sin embargo, siempre hay ganancias, incluso si estás por debajo de esa marca. Para obtener más consejos procesables sobre cómo optimizar su sitio web, consulte Google PageSpeed Insights:

Pagina de Incio de PageSpeed

A diferencia de GTmetrix, esta herramienta simplemente le asigna a tu sitio dos puntajes, tanto para la experiencia móvil como para la del navegador:

Tu puntuacion en PageSepeed Insight

Justo debajo de tu puntaje, hay una sección llamada Should Fix. Si hay algún JavaScript o CSS que impida que tu sitio web se cargue rápidamente, verás un mensaje como este:

Sugerencias para Eliminar Bloqueos

Al hacer clic en el botón Should Fix cómo corregir te dirá exactamente qué guiones están detrás de tus problemas. Una vez que tengas esa información, puedes comenzar a trabajar para eliminarla.

Cómo Eliminar el JavaScript que Bloquea el Procesamiento y el CSS en el Contenido por Encima de la Mitad para WordPress (en 2 formas)

Antes de ponernos a trabajar, no vale la pena que nos vayamos a eliminar las secuencias de comandos de tu sitio web. En cambio, vamos a encontrar las maneras de evitar que el JavaScript y el CSS ralenticen tu sitio sin quitarte tu funcionalidad. Comencemos con el método más simple.

1. Usa el plugin Autoptimize

Cuando se trata de WordPress, casi siempre hay un plugin para solucionar prácticamente cualquier problema. Para nuestras necesidades, el plugin Autoptimize es lo que buscamos. Simplemente te permite disminuir el impacto que tienen los scripts de tu sitio web en sus tiempos de carga:

El Plugin Autoptimize

Con ese plugin podras combinar el código de esos scripts cuando es posible, para que los visitantes no tengan que cargar tantos archivos. También ‘minimiza’ tu código, lo que implica eliminar todos los caracteres vacíos, incluidos saltos de línea, pestañas y retornos. Si bien el código se vuelve difícil de leer, puedes reducir el tamaño del archivo, lo que resulta en tiempos de carga de página más rápidos.

Aparte de eso, el plugin también toma tu JavaScript y CSS y los «difiere». Esto significa que el código solo se cargará una vez que tu página se muestre en la mitad superior de tus visitantes. En la práctica, esto no afecta la funcionalidad de tu sitio, pero puede mejorar tu rendimiento.

Para instalar el plugin, ve a tu panel de WordPress y a la pestaña Plugins. Ahora da clic en el botón Añadir nuevo cerca de la parte superior de la ventana. En la pantalla siguiente, verás una barra de búsqueda donde debes escribir Autoptimizar, luego espera a que aparezca el plugin en los resultados a continuación. Continúa y da clic en el botón Instalar ahora junto al nombre del plugin:

Instalando el plugin Autoptimize

Una vez finalizada la instalación, aparecerá un botón azul Activar al lado del nombre del plugin. Da clic en ese botón, y ahora puedes ir a la nueva pestaña Ajustes > Autoptimizar en tu tablero:

Ajustes en Autoptimize

Encontrarás un puñado de configuraciones, pero las dos que nos importan son ¿Optimizar el código de JavaScript? y ¿Optimizar Código CSS?:

Utilizar Autoptimize para eliminar los bloqueos

Habilita ambas configuraciones ahora y guarda tus cambios. En la mayoría de los casos, esto debería ser suficiente para ocuparse de cualquier JavaScript o CSS que bloquee el procesamiento en tu sitio web. Sin embargo, no está de más comprobarlo, así que regresa a Google PageSpeed Insights y analice tu sitio web una vez más. Si el plugin se hizo cargo de todas las secuencias de comandos culpables, no deberías ver ningún mensaje sobre JavaScript y CSS que bloqueen la visualización en la sección Should Fix corregirlo:

Sin embargo, puede ser que el plugin no haya podido eliminar todas las secuencias de comandos solo con la configuración predeterminada. Si tu sitio web se encuentra en esa categoría, regresa a la pestaña Ajustes > Autoptimize y da clic en el botón Mostrar opciones avanzadas cerca de la parte superior de la pantalla. Ahora, habilita las dos opciones que leen Incluir JS incrustados y también Incluir CSS incrustados y guarda los cambios. Eso debería ser suficiente para eliminar todos los scripts ofensivos de tu sitio web. Si no, necesitarás usar un plugin más completo.

2. Utiliza el plugin W3 Total Cache

Una alternativa a Autoptimize es el complemento W3 Total Cache. Es una solución integral y todo en uno para el almacenamiento en caché y la optimización de WordPress:

Plugin W3 Total Cache

Para los que no saben, el «almacenamiento en caché» almacena algunos de tus archivos en las computadoras de tus visitantes. Hacerlo significa que no tendrán que cargar la mayor cantidad de datos en visitas posteriores, lo que mejora los tiempos de carga.

Además de ser un excelente plugin de almacenamiento en caché, W3 Total Cache también puede ayudarnos a eliminar JavaScript y CSS con bloqueo de representación en el contenido de la mitad superior de la página. Para hacerlo, instala el plugin usando los mismos pasos del primer método.

Elimina el bloqueo de renderizado de JavaScript

Una vez que el plugin esté listo para usar, ve a la pestaña Rendimiento > Ajustes generales dentro de WordPress. Dentro, busca la sección Minificar, marque la configuración Habilitar y elige el modo Manual:

Habilitar minificar manual en los ajustes de W3 Total Cache

Recuerda guardar tu nueva configuración, luego ve a Rendimiento > Minificar y busca la sección JS. Ahora elige la configuración No bloqueo usando «defer» para las configuraciones Antes </head> y Despues <body>:

Definiendo tu archivo JavaScript

Continúa, mira hacia abajo a la sección de administración de archivos JS y asegúrate de seleccionar tu tema activo, luego haga clic en el botón Agregar un Script de comandos justo debajo:

Agregar el archivo JavaSript a la lista

Para completar esta sección, deberás volver a Google PageSpeed Insights y ejecutar otro análisis del sitio web. Cuando recuperes tus resultados, desplázate hacia abajo a la sección Should Fix y da clic en el botón Show how to fix justo debajo. Al hacerlo, te mostrará una lista de los archivos de JavaScript y CSS que bloquean el procesamiento de tu sitio web:

Lista de scripts que bloquean

Ahora, copia la URL completa de cada uno de los archivos de JavaScript y péguela en el campo que se muestra después de hacer clic en el botón Agregar una secuencia de comandos en tu panel:

Elige qeu archivo JavaScript hay que minificar

Deja la configuración predeterminada de Plantilla e Insertar ubicación y repite el proceso para cada archivo JavaScript al que Google te dirija. Cuando hayas terminado, haz clic en el botón Guardar todas las configuraciones, ¡y listo!

Eliminar el CSS de bloqueo de renderizado

Ahora es el momento de cuidar tu CSS de bloqueo de render utilizando un proceso similar. Simplemente desplásate hacia abajo a la sección de administración de archivos CSS y elige tu tema activo de la lista a la derecha:

Seccion de administrar archivos CSS

Ahora, vas a repetir el mismo proceso que usaste con tu JavaScript, que es el siguiente:

  1. Da clic en el botón Agregar una hoja de estilo debajo de la lista desplegable que indica tu tema activo.
  2. Vuelve a tus resultados de Google PageSpeed Insights y ubica la lista de archivos CSS de bloqueo de procesamiento en tu página.
  3. Copia una URL de los archivos y péguela en el campo URL de archivo que apareció después de hacer clic en el botón Agregar una hoja de estilo.
  4. Asegúrate de que la configuración de tu Tema esté configurada en Todas los Temas.
  5. Da clic en el botón Agregar una hoja de estilo nuevamente y repite el proceso para tantos archivos CSS como sea necesario.

Cuando hayas terminado, deberías tener una lista de archivos que se ve así:

Lista de archivos CSS a minificar

Ahora, recuerda guardar tus cambios haciendo clic en el botón Guardar todas las configuraciones. Luego, prueba tu sitio web nuevamente usando Google PageSpeed ​​Insights. Si hiciste todo bien, no deberías haber más scripts de bloqueo de renderizado en tu página. Eliminar esas secuencias de comandos debería haberte dado un impulso a tu puntaje de Google PageSpeed ​​Insights. Si deseas ver exactamente cómo esto afectó tus tiempos de carga, regresa a GTMetrix y ejecute una nueva prueba. Tus tiempos de carga deberían ser más bajos que durante la prueba que realizaste al principio de esta guía, ¡así que date una palmadita en la espalda!

Conclusión

Optimizar tu sitio web para obtener mejores tiempos de carga requiere un poco de trabajo, pero las recompensas valen la pena. Hacerlo facilitará la navegación de tu sitio, y tus visitantes deberían disfrutar aún más de su experiencia. Cuando habla de cómo eliminar JavaScript y CSS con bloqueo de representación en el contenido de la mitad superior de la página, parece complicado. Sin embargo, como acabas de aprender, es un proceso muy sencillo.

Repasemos las dos formas más fáciles de solucionar este problema en WordPress:

  1. Use el plugin Autoptimize.
  2. Use el plugin W3 Total Cache.

¿Tienes alguna pregunta sobre cómo eliminar JavaScript y CSS bloqueador de imágenes en el contenido de la mitad superior de WordPress? ¡Pregunta en la sección de comentarios a continuación!

1 Comentario

  1. Ezequiel

    Hola Diana, estuve tratando se seguir estos pasos y no pude creo que porque cambio los conceptos Google Page Speed. No veo el titulo «should fix», ahora dice «oportunidades» y tampoco dice «archivos de JavaScript y CSS que bloquean el procesamiento de tu sitio web» sino «reducir el tiempo de respuesta inicial del servidor» y «quita los recursos javascript que no se usen»
    Intente agregar esos archivos y el tiempo de carga empeoro. Asi que voy a dejarlo como estaba.
    Me ayudas?
    Gracias

    Responder

Enviar comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

  • php
  • my sql
  • intel
  • cloudlinux
  • nginx
  • cloudflare
  • wordpress