Cómo eliminar el Javascript que bloquea el renderizado del contenido de tu...

Cómo eliminar el Javascript que bloquea el renderizado del contenido de tu sitio web

0

By Michelle Villalobos

Seguro alguna vez creaste un sitio web y te encantó su resultado final, hasta que comenzaste a odiarlo cuando quisiste verlo en línea y tardó muchísimo tiempo en cargarse. Todos sabemos cuáles son las causas más comunes de este problema, pero existe una que suele pasarse por alto: el JavaScript que bloquea el renderizado del contenido.

¿Qué es el JavaScript que bloquea el renderizado del contenido? Las palabras clave de la frase son “renderizar” (cargar) y “bloquear” (evitar), por lo que podemos inferir que se trata de un JavaScript que evita que una página se cargue.

<>

JavaScript es sencillamente increíble; te ayuda a agregar elementos visualmente atractivos para mejorar la experiencia del usuario y el diseño de tu sitio web, pero también puede consumir mucho 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.

1. Identificar

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 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 no bien el visitante carga la página. En el paso 2 abordaremos este tema.

Haz clic en el enlace Mostrar cómo corregirlo 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.

Captura de pantalla PageSpeed 2

2. Elegir el mejor método

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 luego.

3. Decidir hacia dónde desplazarlo

Ya estás listo para aplicar la técnica que elegiste al 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 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.

Vale la pena destacar 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:

vista de plantillas

Ahora abordaremos cómo trasladar todo el script al cuerpo de HTML, a un archivo php relevante (WordPress,) un módulo HTML personalizado (HubSpot) o al pie de página para retrasar el renderizado.

Encabezado de JavaSscript

Cuerpo de HTML

Aquí se incluye todo el contenido de las páginas. Lo encontrarás donde está todo el texto del contenido. Si utilizas WordPress, puedes agregar el script directamente a la página introduciéndolo junto al 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.

captura de pantalla modulo html personalizado


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 de la edición de la página.
captura de pantalla editar pagina
captura de pantalla editar script de pie de pagina

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. Desplazar el script

El paso siguiente es muy simple: agrega el script a la ubicación que desees.

captura de pantalla html personalizado

captura de pantalla publicar edicion pie de pagina

5. Probar

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. Publicar

Cuando hayas confirmado que no se produjeron errores en la página tras aplicar los cambios, estarás listo para publicarla.

Tras eliminar el JavaScript que bloquea el renderizado del contenido, debes seguir optimizando la velocidad de tu sitio web analizando otras características que disminuyen el rendimiento.

Te recomendamos 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.

Puedes leer el artículo completo en: : Cómo eliminar el Javascript que bloquea el renderizado del contenido de tu sitio web

COMENTARIOS

Leave a Reply