Seguramente alguna vez creaste un sitio web y te encantó el resultado final, hasta que quisiste verlo en línea y tardó mucho tiempo en cargarse. Hay varias causas usuales de este problema, pero existe una que suele pasarse por alto: el JavaScript que bloquea el renderizado del contenido.
Para que este aspecto deje de ser un problema para tu sitio web, te hemos preparado el artículo siguiente.
¿Qué es el JavaScript y por qué afecta el renderizado de tu contenido web?
JavaScript (JS) es un lenguaje de programación que hace posible realizar acciones complejas en un sitio web. Este elemento hace que un sitio sea visualmente más atractivo —con animaciones tridimensionales, por ejemplo. Cuando observas una impresionante animación en una página web puedes apostar que se trata de JavaScript.
JavaScript tiene la cualidad de integrarse a cualquier sitio web, por lo tanto es innecesario instalar otro programa para ejecutarlo.
El código JavaScript lo identificas dentro de las etiquetas <body></body> de tus páginas. Por lo general se inserta entre: <script></script>. También puede estar ubicado en ficheros externos, y se visualiza así:
<script type="text/javascript" src="micodigo.js"></script>
Los navegadores, como Google, se encargan de leer el código para asimilarlo y ejecutar las acciones que el código les indica. Actualmente es el lenguaje coloquial del mundo digital, que crea mecanismos más complicados o integra elementos visualmente más elaborados en un sitio web.
JavaScript te permite impulsar la interacción con tus usuarios, ofreciendo una experiencia de usuario más enriquecida. Ofrece mejoras a tu sitio y una mejor reputación en el ranking de Google.
Pero ¿por qué JavaScript bloquea el renderizado de tu sitio? Lo que ocurre es que si bien el código JS es crucial para el buen funcionamiento de tu sitio web, también puede perjudicar su rendimiento. Cuando un visitante llega a tu sitio, tu navegador comienza a leer de arriba abajo, por lo que el buscador tiene que descargar y analizar el código JS antes de mostrarle al usuario el contenido de tu sitio.
Al pasar por esta acción, el sistema tarda más en mostrar el código para el contenido de arriba, por lo que el público percibe la carga del sitio más lenta.
Cuando Google indica que elimines los recursos de bloqueo de renderizado, prácticamente te está señalando que estás cargando recursos innecesarios en la parte inadecuada del código, ya que el navegador de tus visitantes tardará en desplegar tu contenido.
Ahora que sabes lo que sucede con tu sitio, puedes pasar al siguiente y más importante paso: eliminar el JavaScript que está impidiendo que tu sitio web haga su aparición estelar en poco tiempo.
Esto no solo afecta a tus visitantes, sino que también puede evitar que Google muestre tu sitio de manera orgánica en los resultados de búsqueda. Desde 2010, los algoritmos de Google toman en consideración la velocidad de carga para determinar la clasificación de la página. Como ya existe suficiente información sobre el resto de las causas, hoy abordaremos cómo eliminar el JavaScript que bloquea el renderizado del contenido de tu sitio web.
Cómo eliminar el JavaScript que bloquea el renderizado del contenido de tu sitio web
Lo primero que debes hacer es asegurarte de que el bloqueo JavaScript existe en tu sitio. Luego, debes buscar una forma de corregirlo.
La buena noticia es que no tienes que hacerlo manualmente. Existen plugins que pueden ayudarte a eliminar los JS que bloquean el renderizado. A continuación te explicamos lo que varios de estos complementos hacen tras bambalinas para permitir el correcto renderizado de tu sitio.
- Async: permite al navegador del visitante de tu sitio descargar el JavaScript mientras sigue realizando el análisis en el resto del HTML. Es decir, no interrumpe el análisis mientras el archivo se está descargando; aun así, hará una breve pausa para analizar el HTML y ejecutar el script una vez descargado.
- Defer: permite que el analizador HTML descargue el JavaScript, mientras realiza el análisis en el resto de HTML, y espera a que este termine para ejecutar el script.
En esta imagen de GrowingWithTheWeb puedes apreciar mejor la diferencia.
La ventaja de usar Defer es que tus guiones están garantizados para ejecutarse en el orden en que aparecen originalmente en el código.
Async no lo hace así, por lo tanto en ocasiones puede intervenir en el orden de los recursos, que dependen de otros que aparecen antes del documento.
- Autoptimize: este plugin disminuye el impacto de los scripts en tu página web al momento de cargar tu sitio.
Con ese plugin es posible combinar el código de tus scripts, para evitar que tus visitas carguen demasiados archivos. El plugin minimiza tu código, esto significa que eliminará todos los caracteres vacíos. Esto da como resultado tiempos de carga con mayor velocidad. Este plugin no afecta la funcionalidad de tu sitio sino que optimiza su rendimiento.
Pasos para eliminar el JavaScript que bloquea el renderizado del contenido de tu sitio web
1. Identificar el JavaScript que está afectando el proceso
El primer paso del proceso es identificar el JavaScript que causa el problema. Una de las maneras más simples de hacerlo es utilizar PageSpeed Insights. Esta herramienta de Google muestra rápidamente una lista de los archivos específicos que están bloqueando el renderizado del contenido que se encuentra en la mitad superior de una página en particular. El contenido de la mitad superior de la página refiere al contenido que aparece primero en la pantalla del visitante. Esto significa que no debes incluir un JavaScript en el encabezado del sitio web si no necesitas ejecutarlo. En el paso 2 abordaremos este tema.
Haz clic en el enlace «Mostrar cómo corregirlo» —encerrado en rojo y señalado con una flecha roja en la siguiente imagen— para ver la lista de los recursos de JavaScript que debes evaluar.
El JavaScript más común es JQuery, así que es probable que veas que aparece con mayor frecuencia.
2. Elegir el mejor método para aplicar el JavaScript
Cuando hayas identificado qué scripts quitar, debes decidir cómo arreglarlos. Puedes elegir entre dos métodos principales. El primero es insertar los scripts; es decir, agregar los contenidos del script directamente al HTML de la página para que solo se carguen cuando sea necesario. Esta es la mejor opción si el script es pequeño y se aplica a una sola página.
Otra opción es aplazar el script. Cuando aplazas el JavaScript, retrasas la carga de todos los scripts prescindibles hasta que se hayan cargado las partes más esenciales de la página o tras el primer renderizado. Este es el mejor método cuando el script no es esencial y se puede cargar después.
3. Decidir hacia dónde mover el JavaScript
Ya estás listo para aplicar la técnica que elegiste para el sitio. En ambas opciones eliminarás el JavaScript del encabezado y lo agregarás a secciones individuales del HTML. La ubicación del encabezado de tu sitio web depende del CMS que utilices. Por lo general, se encuentra en la configuración de la página general. En el caso de WordPress, por ejemplo, debes acceder a la página opciones de temas o buscar el archivo header.php en el editor, como se muestra en la siguiente imagen.
Es importante decir que NO debes modificar el archivo header.php a menos que seas un experto; de lo contrario, podrías generar errores innecesarios en tu sitio web.
En HubSpot puedes encontrar el encabezado del HTML en la vista de plantillas y en la pestaña opciones de la edición de la página.
Puedes encontrar la opción editar encabezado en el menú desplegable editar de la vista de plantillas:
Ahora abordaremos cómo trasladar el script al cuerpo de HTML, a un archivo php relevante (WordPress), a un módulo HTML personalizado (HubSpot) o al pie de página para retrasar el renderizado.
Cuerpo de HTML
Aquí se incluye todo el contenido de las páginas. Lo encontrarás donde se encuentra todo el texto del contenido. Si utilizas WordPress, puedes agregar el script directamente a la página introduciéndolo junto con el contenido en la vista «Texto».
Módulo HTML personalizado
Para agregar el script a una página de HubSpot, debes utilizar un módulo HTML personalizado. Puedes acceder a este mediante la vista de plantillas.
Pie de página
Los pasos para encontrar el pie de página del sitio son muy similares a los que mencionamos para el encabezado. Puedes encontrarlo en la configuración de sitio web/página general, en la pestaña pie de página de «Opciones de temas» en WordPress, o también puedes buscar el archivo footer.php en el editor.
Recuerda que no debes modificar este archivo a menos que seas un experto.
En HubSpot, se encuentra en la pestaña opciones del editor de la página.
Para determinar hacia dónde desplazar el script, debes tomar en cuenta si este se debe ejecutar en un momento determinado o si se puede aplazar hasta que finalice el renderizado de la página. En la primera opción, debes colocarlo en el cuerpo de HTML o en el módulo HTML personalizado. En el caso de la segunda opción, desplázalo al pie de página.
4. Agrega el script a la ubicación elegida
5. Prueba que la implementación de tu JavaScript funcione
Este es uno de los pasos más importantes del proceso.
Tras aplicar todas las modificaciones, revisa las vistas previas para asegurarte de que el sitio funcione bien. ¿La página se carga de manera correcta? ¿Todos los elementos lucen bien? Si hay algo que no funciona o no se carga de manera adecuada, debes resolver el problema. Puedes hacerlo con la ayuda de diversas herramientas para desarrolladores. Prueba algunas y elige tus favoritas. Cuando encuentres los errores, revisa el código y asegúrate de que no falten componentes importantes, como punto y coma o llaves.
6. Publica tu página
Cuando hayas confirmado que no se produjeron errores en la página tras aplicar los cambios, estarás listo para publicarla.
Otros factores que afectan el renderizado de tu contenido
Tras eliminar el JavaScript que bloquea el renderizado del contenido, debes seguir optimizando la velocidad de tu sitio web y analizar otras características que disminuyen el rendimiento como las listadas a continuación:
- Usar plugins innecesarios que estén obligando a llamar recursos externos
- No cachear regularmente tu base de datos
- Guardar información en tu base de datos que no utilizas
- Invertir en un hosting barato puede salirte caro. Asegúrate de que no se trate de un sistema reciclado de otro proveedor.
- Insertar URLs de datos en los archivos CSS
- Insertar atributos CSS en elementos HTML
- Utilizar imágenes en archivos BMP o TIFF
- Utilizar imágenes muy grandes y pesadas
Para los últimos dos factores, estas herramientas pueden servirte para minimizar y reducir archivos, en beneficio de la carga de tu sitio web:
Una vez realizados todos estos procesos, solo será necesario que evalúes con frecuencia la velocidad de tu sitio web para obtener los mejores resultados. Es esencial que anticipes cualquier problema potencial para dominar las transformaciones constantes del marketing online y beneficies el tráfico a tu sitio web.
