Aumentar velocidad de sitio web corrigiendo Remove Render-Blocking JavaScripts

El día de hoy toca un artículo más geek que de costumbre, pues voy a explicar cómo acelerar la carga de tu sitio web arreglando el error "Remove Render-Blocking JavaScripts" que muchas veces nos aparece.

El primer paso, es testear nuestro sitio, para esto hay que ir a la siguiente dirección:

http://developers.google.com/speed/pagespeed/insights/

Ahí, no hace falta más que pegar la URL de nuestro sitio web y esperar a que lo analice, acto seguido, nos dará una puntuación (GTech Mx tiene 74/100 así que estoy corrigiéndolo). Abajo de la calificación vienen las evaluaciones y los resultados obtenidos, y muchas veces arrojará que tenemos el error de "Remove Render-Blocking JavaScripts".

Su solución es muy sencilla, aunque me llevó un rato encontrarla ya que no le entendía muy bien a la explicación que dan en GDevelopers, pero encontré un muy buen sitio llamado feed the bot el cual explica muy sencillo lo que es. El artículo está en inglés, no encontré la información en español así que por eso la publico aquí.

Este error ocurre cuando tenemos un archivo JavaScript muy arriba en el código del sitio lo que entorpece la carga de la primera impresión en pantalla que ve el usuario.

En este caso, el JavaScript estaba dentro de la cabecera y era el primer item que se cargaba

Lo anterior acarrea una demora en el tiempo de carga y por consiguiente, perder lugares ante Google, pues una página lenta no es buena opción para los visitantes. 

---

Reparación de computadoras PC a domicilio en el Distrito Federal, estamos en Tlahuac, seguros para PC, marketing digital y diseño de sitios web. A los mejores precios sólo en GTech Mx.

---

Solución

1. Escanea tu sitio en Google PageSpeed Insights
2. Ubica cual JavaScript es el que está fallando, el diagnóstico de Insights te lo informa (En mi caso era el que llama a jQuery)
3. Ubica el JavaScript en el código de tu sitio web, seguramente lo encontrarás en las primeras líneas
4. Ubica físicamente en tu sitio web en que nivel está el item que funciona gracias a ese script
5. Si NO está en la primera pantalla que ve el usuario cuando abre tu sitio web entonces NO hay necesidad de cargarlo al inicio
6. En ese caso, deberás mover el código exactamente sobre el item que lo requiere para que entonces sea descargado sólo cuando sea necesario

Lo anterior se traduce de la siguiente forma:

<!-- lo que requiere la página para cargar la primera impresión-->

<!-- las cosas que NO requieren el JavaScript (en mi caso jQuery) -->

<script src="jquery.js">

</script>

<!-- lo que SÍ requiere jQuery aquí -->

De esta forma, sólo se cargará el JavaScript cuando sea necesario, lo cual aumenta bastante tu velocidad de carga del sitio, en mi caso sólo aumentó 1 punto la evaluación de Google, pero ya sobre el terreno, aumentó considerablemente la velocidad de carga de mi sitio.

Otra cosa, revisa si de verdad necesitas ese JavaScript, en mi caso lo tenía por un slider que quité hace ya mucho tiempo y ningún otro item del sitio lo requería, por lo que lo encerré como si fuera un comentario para deshabilitarlo.

Espero te haya servido esta información, si necesitas ayuda sólo deja un comentario aquí debajo!