“Render” significa cargar, y si un JavaScript está bloqueando la carga de una página (render-blocking) significa que el JavaScript mantiene a la página cargando y por esta razón hay que quitar el JavaScript que bloquea la visualización del contenido.

Google recomienda eliminar el JavaScript que interfiere con la carga del contenido superior de tus páginas web (above the fold). El contenido superior es lo que un usuario ve inicialmente en su pantalla. Esa pantalla puede ser un teléfono, ipad, ordenador sobremesa o lo que el usuario esté utilizando para ver tu página web.

JavaScript bloquea la visualización del contenido de una página.
JavaScript bloquea la visualización del contenido de una página.
Esta práctica ha sido utilizada por muchas personas que usan PageSpeed Insights pero es algo nuevo para la mayoría de los webmasters y diseñadores y puede ser un poco confuso e incluso puede parecer imposible de hacer. Esto no sólo es posible sino que también requiere ser un buen ciudadano en la web y preocuparte tanto por los usuarios con conexiones lentas como por tu posicionamiento en Google. Tu posicionamiento en Google estará por los suelos si no optimizas tus páginas para esto.

En concreto, si Google ve que tu página web no carga bien para ciertos dispositivos (teléfonos, ipads, etc) no te incluirá en los resultados de búsqueda ya que Google no enviará a los usuarios a páginas lentas o a páginas que hacen que el usuario tarde demasiado tiempo para ver su contenido.

¿Cómo identificar JavaScripts que bloquean el contenido?
Siempre deberías saber lo que tu página está cargando. Hay varias maneras de hacer esto. Para conocer específicamente los archivos que actualmente están bloqueando la visualización del contenido, puedes utilizar la herramienta de Google PageSpeed. Esta herramienta te indicará los archivos exactos que están bloqueando el contenido de una página en particular en ese momento.
¿Cómo quitar el JavaScript que bloquea la visualización de contenido?
El archivo JavaScript más comúnmente culpable y un muy buen ejemplo de esto es “jQuery”, que es un archivo JavaScript que se utiliza en un gran porcentaje de páginas web. Es muy probable que lo estés usando en tus páginas.

Este archivo JavaScript es bastante grande, de hecho, puede muy bien ser el archivo más grande de tu página que esté bloqueando la carga del contenido.

jQuery es un archivo JavaScript muy popular y a menudo se utiliza para hacer sencillas animaciones como enviar un formulario sin cargar la página, por ejemplo.

Llama al jQuery a partir de donde sea necesario.

Llama al jQuery a partir de donde sea necesario.

Normalmente no hay ninguna razón para cargar jQuery antes de cargar tu página web. Sin embargo, la gran mayoría de las páginas lo hacen.

Si usas jQuery para algún tipo de aplicación debajo del contenido (below the fold) entonces no hay ninguna razón para que cargue antes del contenido de la página. Si cargas jQuery antes del contenido entonces no sigues esta directriz de PageSpeed y harás que tus usuarios esperen mucho tiempo por el contenido que han buscado.

Para corregir esto debes cambiar de lugar la línea de código desde donde se llama al jQuery. Esto se hace en el código HTML de tu página web. La manera en la que la mayoría de sitios web hacen la llamada al jQuery es en el encabezado del documento, como se muestra a continuación:

<head>
<title>title here</title>
<meta name=description content="description here."/>
<style>styles here</style>
<script src="jquery.js"></script>
</head>
Esa llamada al jQuery (un archivo bastante grande) es hecha, y tiene que ser descargado por el navegador, antes de cualquier otra cosa que se vaya a mostrar en la página. Esto es realmente perjudicial para tus usuarios y para tu posicionamiento si el uso de jQuery no es ni siquiera necesario para el contenido superior de la página (above the fold).

En este caso, la llamada a jQuery se debe quitar de la cabecera del documento y trasladarla a cualquier otro lugar por debajo de la página donde sea necesario.

<!—escribe hasta aquí el contenido que no necesite jQuery -->
<script src="jquery.js"></script>
<!—escribe a partir de aquí el contenido que necesite jQuery -->
Para cumplir esta directriz necesitas saber ¿que está cargando tu página y por qué lo está haciendo?
Todo lo que se carga en tu página web es tiempo de espera para tus usuarios. Si no sabes lo tu página web necesita para cargar entonces deberías empezar a saberlo. jQuery es un buen ejemplo ya que es muy común y es un archivo grande (aproximadamente 100 kb).

Un escenario común puede ser una pequeña página web que sólo tenga 10kb y use jQuery. Está, llama un archivo que es diez veces más grande que la propia página web para hacer alguna tarea “mundana” como un efecto de sombreado en las palabras de la página. Puedes pensar “que bien se vé!” cuando lo has encontrado pero, ¿es lo suficientemente “vistozo” como para que tus usuarios tengan que esperar diez veces más que lo que tarda en cargar tu página?

Ese mismo efecto podrías haberlo hecho con CSS o un archivo JavaScript más pequeño consiguiendo el mismo resultado.

He utilizado jQuery como un ejemplo pero no estoy diciendo que sea malo. Lo mismo se podría decir incluso de un JavaScript como Google Analytics o algún JavaScript de terceros (third party) para mostrar widgets o incluso los botones de Facebook o Twitter que tanto les gusta a la gente.

¿Quieres más?

No te pierdas las actualizaciones del blog y recibe mas información en tu email sobre el correcto “Posicionamiento en Google“.

¡Suscríbete y mantente al día!

Suscríbete…

¿Me Compartes?
Me gustaría conocer tu opinión sobre este artículo en la sección de comentarios que encontrarás a continuación y que lo compartas para que otras personas lo puedan disfrutar. Gracias.
Share on Facebook0Tweet about this on TwitterShare on Google+0

4 comentarios para: Bloqueo del contenido

  1. Aitor

    Hola,
    Descubrí el PageSpeed Insights de Google y me estoy volviendo loco solucionando problemas. Me queda poco.
    En cuanto al script jquery.js entiendo que debe estar en head. Es para un slider de fotos. Lo tengo al final del head pero no puedo ponerlo en body. ¿No es así?

    • Gian Oliveira

      Hola Aitor, es correcto. Todas las llamas a los script en .js deben estar en el head de la página. Incluso si lo puedes colocar entre las etiquetas /body y /html (al final del código) mucho mejor. Un saludo!

  2. Diego Pitiot

    Amigo corri el pagespeed en el index de mi sitio y sigo teniendo algunos problemas. utilizo wordpress! No se en que parte del codigo carga el jquery!

    Donde lo puedo ver ????

    Sigo tu sitio, la verdad q impecable, por fin hay un sitio q explique paso a paso como sulucionarlo!

    Saludos

    diegoo

    • Gian Oliveira

      Hola Diego, normalmente el código .js se declara desde la plantilla de WordPress (se encuentra en wp-content/themes/PLANTILLA) y no es fácil adivinar exactamente en que parte se declaran los scripts. Cada plantilla es diferente y cada desarrollador programa distinto. Lo mejor es que busques en el código fuente de tu plantilla con mucha calma, desde donde se declaran los archivos .js, que normalmente suele ser en la cabecera de la plantilla, y cambiarlos al footer de la plantilla para mejorar la velocidad de carga. Un saludo!

Deja un comentario

Los campos marcados con * son obligatorios.

Borrar formularioEnviar Comentario