Martin Splitt, de Google, participó en un seminario web en el que se habló sobre la representación de páginas web y cómo estas interferían en el SEO. En esta charla también se tuvo muy en cuenta el renderizado y cómo este impacta en el posicionamiento.
¿Qué es el renderizado de una página web?
Este término es un anglicismo que proviene de rendering y que se aplica en el ámbito informático en aquellos casos en los que el ordenador dibuja, pinta o representa algo en la pantalla. En una página web el renderizado de la misma surge cuando se visita y su contenido aparece en la pantalla.
Hay que tener en cuenta que un proceso de renderización eficiente da lugar a una alta puntuación de Core Web Vitals. En cambio, un renderizado menos eficiente puede afectar al tráfico, a las ventas e incluso al rastreo de la página web en cuestión.
Martin Splitt, de Google, definió así la renderización: “Si piensas en el HTML como una receta, y tienes todos los ingredientes ahí, tienes un montón de texto, tienes un montón de imágenes y otras cosas, pero en realidad no tienes la receta. La receta es un trozo de papel con todas estas instrucciones sobre cómo hacer una cosa».
Martin continuó la analogía comparando los recursos de la página web con los ingredientes físicos: «Los recursos de una página web son los ingredientes, como el CSS, los archivos JavaScript y las imágenes, los vídeos, todo lo que se carga para que la página tenga el aspecto que tiene después. Y el sitio web que conoces y utilizas en tu navegador lo ves en tu navegador, ese es el plato”.
A continuación, comparó la renderización con el proceso de cocinar. Coger cada ingrediente (recursos como imágenes, CSS, etc.) y cocinarlos. «Y el renderizado es más o menos el proceso de cocción o de preparación de eso».
La importancia del renderizado para el SEO
El renderizado es importante a nivel SEO ya que podemos observar cómo el robot de Google representa de forma gráfica una página y así podemos detectar archivos CSS o JavaScript bloqueados por el archivo robots.txt o encontrar otros inconvenientes que puedan generar problemas con el renderizado. Todo esto es fundamental para Google, porque si hay partes ocultas dentro de una web, les dará menos importancia a la hora de posicionarla. Por ejemplo, parte del JavaScript es clave a la hora de renderizar (crear) una web. Pero otra parte del JavaScript no es realmente necesaria a la hora de crear una página web interactiva. Para acelerar la renderización, y también para mejorar las Core Web Vitas, algunos JavaScript pueden ser retrasados u omitidos por completo ya que no son necesarios para la web.
Así renderiza un navegador una página
Resumiendo, el renderizado se da por una carga de una página o por un cambio del JavaScript que hace que el navegador ejecute diferentes algoritmos para mostrar dicha página al usuario. Estos son los algoritmos que se ejecutan:
En primer lugar, se calculan los estilos que correspondan a cada elemento HTML, teniendo en cuenta qué reglas del CSS encajan con cada elemento.
Después cada elemento HTML se representa de forma interna ya sea como un rectángulo o como una capa. A continuación, se rellenan en memoria los diferentes píxeles con los textos, imágenes, colores… de cada una de las capas. Y, por último, cada una de las capas se llevan a la pantalla, sin olvidar el orden correcto de estas ya que se pueden solapar.
Es posible ver el seminario web en este enlace.