Renderizado web: ¿cómo afecta al SEO?

Poco se habla de lo que significa el renderizado en el proceso de carga de todo sitio web. Sabemos que nuestra página debe responder rapidísimo para que nuestros usuarios no se duerman, pero ¿sabes lo que es y qué implicaciones tiene en SEO? En este artículo, vamos a desvelar los secretos detrás de los bastidores de toda página web.

¿Qué es el renderizado de una web?

El renderizado de una página web se refiere al proceso en el cual el navegador interpreta el código HTML, CSS y JavaScript de una página web y lo convierte en la representación visual que vemos en la pantalla.

Cuando visitas un sitio web, el navegador descarga el código HTML que define la estructura y el contenido de la página, los estilos CSS que determinan cómo se ve la página y los scripts de JavaScript que agregan interactividad y funcionalidad. Luego, el navegador analiza y procesa estos archivos para generar una representación visual de la página.

Veamos el siguiente ejemplo:

Como puedes ver en este gráfico, una vez que un usuario entra en nuestra web ocurren diferentes procesos que a simple vista son imperceptibles para el usuario y tienen que ver con los micro procesos internos en donde participa el servidor, los archivos de la web y los navegadores.

He ahí que el proceso de renderizado sea tan importante para el rendimiento y para el posicionamiento SEO.

Tipos de renderizado web:

Si bien el proceso general es el similar, esto puede hacerse del lado del servidor, o del lado del cliente de manera estática o dinámica según cada arquitectura web. 

Renderizado del lado del cliente CSR : 

En este renderizado, el navegador descarga una página web mínima o una versión reducida de la misma, que generalmente contiene solo la estructura básica (HTML) y los archivos de estilo (CSS), junto con el código JavaScript necesario para cargar y renderizar el contenido adicional. 

El navegador toma este código JavaScript y lo ejecuta para generar la representación visual completa de la página web.

Este tipo de renderizado favorece el TTFB, uno de los Core Webs Vitals, por razones evidentes, ya que la respuesta del servidor será inferior al no depender íntegramente de este.

Renderizado del lado del servidor SSR:

En este caso, el servidor es responsable de generar la representación HTML completa de una página web y enviarla al navegador. En este enfoque, el navegador recibe una página web ya renderizada y lista para mostrarse. 

Este tipo de renderizado es muy positivo para el rendimiento ya que no se depende de los recursos del cliente y esto puede favorecer el rastreo e indexación de la página. 

No obstante, hay que tener en cuenta que es un sistema menos flexible ya que si el servidor no es lo suficientemente potente, podría generar problemas de tiempos de respuesta.

Existen otros sistemas híbridos que utilizan ambas versiones. Lo mejor es analizar posibles cuellos de botella de tu sitio web y actuar en consecuencia. 

¿Cómo actúa el Javascript en el renderizado? 

Javascript es un lenguaje de programación que permite aportar dinamismo y ejecutar funciones muy importantes en un sitio web.

Algunas de las acciones que lleva a cabo Javascript en la web son:

1. Se carga el contenido HTML y el navegador construye la estructura DOM que será posteriormente modificada por Javascript.

2. A través de métodos como getElementById o querySelector, Javascript modifica los elementos dándoles estilo.

3. Añade elementos de interactividad como por ejemplo clic a un botón, enviar formularios, etc.

4. Realiza peticiones al servidor de manera asíncrona.

5. Aporta efectos visuales como animaciones, añade bibliotecas, amplía el dinamismo a CSS.

¿Es importante el renderizado en el SEO de mi web?

Si el proceso de renderizado es lento, va a provocar que el rendimiento sea inferior y que a Google le cueste rastrear e indexar esa url. Además de estos problemas, también tenemos:

• Posible aumento del porcentaje de salida o rebote de usuarios.
• Bloqueos en archivos prioritarios: no se pueden ver elementos o ejecutar acciones por parte del usuario.
• Afectación en las conversiones.
• Menor tiempo de permanencia.

¿Qué dice Google sobre el renderizado Javascript?

Según declaraciones de Martin Split (desarrollador en Google) en junio del 2023, en la actualidad el procesamiento de Javascript es mucho más amigable de lo que era hace algunos años. Esto se debe principalmente a que Google es cada vez más capaz de comprender los micro procesos que ocurren y se centra especialmente, en WRS.

El WRS (Web Rendering Service) es lo que ocurre después de que el HTML y los recursos han sido leídos, pero antes de la generación del árbol DOM que es lo que Google finalmente analizará como la página “final”. Es cierto que este proceso existe independientemente de que haya o no código Javascript, pero cuando este está presente, hace que sea todo más interesante.

En resumen: Google tiene en cuenta el DOM final para la indexación, pero, si el proceso para alcanzar esos datos es muy largo, consecuentemente afectará al rastreo de la web. Es esto lo que finalmente debemos analizar con las distintas herramientas de rendimiento para ver el punto en el que falla el renderizado.

Bloqueos masivos desde el robots.txt que afectan al renderizado:

Hay que tener cuidado con nuestro amigo fiel, el robots.txt. Este archivo, aunque simple, es en realidad muy efectivo cuando se trata de autorizar o desautorizar directivas de rastreo. Si en él se encuentran bloqueos a archivos prioritarios como CSS y JS, puede afectar de forma directa el renderizado y por tanto, el rendimiento. 

Es muy frecuente encontrarnos con archivos robots creados de manera predeterminada por WordPress, Prestashop o Magento, pero lo cierto es que es necesario adaptarlos a nuestro contexto, como comenta nuestra especialista en SEO, Natascha Fher, al hablar de las afectaciones de rendimiento por bloqueos en robots. 

Caso práctico real:

En referencia a los bloqueos de robots, hace unos días recibimos el caso de un cliente cuyo desarrollo en WordPress estaba afectado por el rendimiento. Al utilizar nuestras herramientas, detectamos un grave problema de bloqueo de recursos, como se puede ver a continuación:

Gracias a la vista Waterfall de GTMetrix hemos podido comprobar la gran cantidad de tiempo que algunos recursos pasaban bloqueados. Estos archivos se trataban nada más y nada menos que de imágenes en formato Webp (el recomendado por Google).

Esto ocurría ya que el plugin utilizado para convertir las imágenes las almacenaba en un directorio de WordPress que se encontraba bloqueado en el robots.txt . Además de las imágenes, muchos archivos de estilo CSS y Javascript prioritarios para el renderizado de la web, también sufrían este problema. 

Realizamos la comprobación de cuáles eran los archivos y junto con el cliente determinamos que estos formaban parte importante de la carga. Directorios como “wp-content” o “wp-includes” en el caso de un WordPress, son tremendamente importantes ya que almacenan una gran cantidad de información. 

Si bien no todo es prioritario, nuestra recomendación es evitar bloqueos masivos a este directorio y asegurarse de que, ante cualquier implementación nueva, las directivas de robots no estén evitando el acceso de los buscadores a contenido que te interesa. 

Consejos finales de SEO para mejorar el rendimiento de tu web:

A continuación te contamos 4 tips que puedes seguir para evitar problemas de renderizado en tu web:

• Analiza diferentes urls de tu dominio:

Con herramientas como GTmetrix y Page Speed. Si posees un e-commerce, te recomendamos analizar la url principal, una categoría y un producto.

• Utiliza herramientas de renderizado:

Por ejemplo, Fetch & Render para comprobar qué leen los robots al entrar a tu sitio durante los primeros segundos de carga. Así podrás saber qué archivos son los afectados e identificar si provienen de un plugin o son externos. 

• Modifica tu robots.txt ante cada cambio:

Si has detectado bloqueos de archivos importantes o bien has implementado cambios en tu web, revisa el robots.txt para detectar qué tipo de directivas puedes añadir o quitar. Si no sabes cuáles son archivos prioritarios, te dejamos aquí un pequeño listado de casos comunes:

Archivos importantes:

-CSS de plugins de caché, velocidad, etc.

-JS de plugins de diseño como Elementor.

-Imágenes y formatos nuevos como webp. 

• No escatimes en recursos de calidad:

Al inicio de todo proyecto es habitual contratar servicios básicos de servidor y desarrollo, pero a medida que la web crece, se vuelve cada vez más necesario ampliar, actualizar y adaptarse a las nuevas circunstancias. 

Esperamos que este post te haya servido de ayuda para entender el concepto de renderizado SEO y qué acciones puedes realizar para detectar problemas y solucionarlos. 

Si tienes dudas sobre si tu web está optimizada para SEO o no sabes cómo abordar problemas de rendimiento, contacta con nosotros.