Contradas de Martin Splitt de Google

Resumen de video:

https://www.youtube.com/watch?v=f8l2phwalj0

Google ha lanzado un nuevo episodio de sus conversaciones de Lightning Central Search, que se centra en la representación de estrategias, un tema importante para los desarrolladores web.

En este video, Martin Splitt, un defensor del desarrollador en Google, explica las complejidades de los diferentes métodos de representación y cómo estos enfoques afectan el rendimiento del sitio web, la experiencia del usuario y la optimización de los motores de búsqueda (SEO).

Este episodio también se conecta a discusiones recientes sobre el uso excesivo de JavaScript y sus efectos en los rastreadores de búsqueda de IA, un tema abordado previamente por Search Engine Journal.

Las ideas de Splitt ofrecen orientación práctica para los desarrolladores que desean optimizar sus sitios web para motores de búsqueda y usuarios modernos.

¿Qué es la representación?

Splitt comienza explicando lo que significa representación en el contexto de los sitios web.

Explica la representación en términos simples, diciendo:

“Representar en este contexto es el proceso de atraer datos a una plantilla. Hay diferentes estrategias sobre dónde y cuándo sucede esto, así que echemos un vistazo juntos “.

En el pasado, los desarrolladores editarían y cargarían directamente archivos HTML a los servidores.

Sin embargo, los sitios web modernos a menudo usan plantillas para simplificar la creación de páginas con estructuras similares pero contenido variable, como listados de productos o publicaciones de blog.

Splitt clasifica la representación en tres estrategias principales:

1. Preenvención previa (generación de sitios estática)
2. Renderización del lado del servidor (SSR)
3. Renderización del lado del cliente (CSR)

1. Preenvención

La pre-respuesta, también conocida como generación de sitios estática, genera archivos HTML por adelantado y los sirve a los usuarios.

Splitt destaca su simplicidad y seguridad:

“También es muy robusto y muy seguro, ya que no está sucediendo mucha interacción con el servidor, y puede bloquearlo con bastante fuerza”.

Sin embargo, también señala sus limitaciones:

“Tampoco puede responder a las interacciones de sus visitantes. Eso limita lo que puede hacer en su sitio web “.

Herramientas como Jekyll, Hugo y Gatsby automatizan este proceso combinando plantillas y contenido para crear archivos estáticos.

Ventajas:

• Configuración simple con requisitos mínimos del servidor
• Alta seguridad debido a la interacción limitada del servidor
• Rendimiento robusto y confiable

Desventajas:

• Requiere regeneración manual o automatizada siempre que cambie el contenido
• Interactividad limitada, ya que las páginas no pueden responder dinámicamente a las acciones del usuario

2. Renderización del lado del servidor (SSR): flexibilidad con compensaciones

Captura de pantalla de: youtube.com/googlesearchcentral, enero de 2025.

La representación del lado del servidor genera dinámicamente páginas web en el servidor cada vez que un usuario visita un sitio.

Este enfoque permite que los sitios web entreguen contenido personalizado, como paneles específicos del usuario y características interactivas, como secciones de comentarios.

Split dice:

“El programa decide sobre cosas como la URL, el visitante, las cookies y otras cosas: qué contenido de poner en qué plantilla y devolverla al navegador del usuario”.

Splitt también señala su flexibilidad:

“Puede responder a cosas como el estado de inicio de sesión o las acciones de un usuario, como registrarse para un boletín o publicar un comentario”.

Pero él reconoce sus desventajas:

“La configuración es un poco más compleja y requiere más trabajo para mantenerlo seguro, ya que la entrada de los usuarios ahora puede llegar a su servidor y potencialmente causar problemas”.

Ventajas:

• Admite interacciones dinámicas de usuario y contenido personalizado
• Puede acomodar contenido generado por el usuario, como revisiones y comentarios

Desventajas:

• Configuración compleja y mantenimiento continuo
• Un mayor consumo de recursos, a medida que se representan las páginas para cada visitante
• Tiempos de carga potencialmente más lentos debido a retrasos de respuesta del servidor

Para aliviar las demandas de recursos, los desarrolladores pueden usar almacenamiento en caché o representantes para minimizar el procesamiento redundante.

3. Renderización del lado del cliente (RSE): Interactividad con riesgos

Captura de pantalla de: youtube.com/googlesearchcentral, enero de 2025.

La representación del lado del cliente utiliza JavaScript para obtener y mostrar datos en el navegador del usuario.

Este método crea sitios web interactivos y aplicaciones web, especialmente aquellas con actualizaciones en tiempo real o interfaces de usuario complejas.

Splitt destaca su funcionalidad similar a la aplicación:

“Las interacciones parecen estar en una aplicación. Ocurren sin problemas en el fondo sin que la página se vuelva a cargar visiblemente “.

Sin embargo, advierte sobre sus riesgos:

“El principal problema con la RSE generalmente es el riesgo de que, en caso de que algo salga mal durante la transmisión, el usuario no verá ninguno de su contenido. Eso también puede tener implicaciones de SEO “.

Ventajas:

• Los usuarios disfrutan de una experiencia suave y similar a la aplicación sin recargas de página.
• Permite características como el acceso fuera de línea utilizando las aplicaciones web progresivas (PWA).

Desventajas:

• Depende en gran medida del dispositivo y el navegador del usuario.
• Los motores de búsqueda pueden tener problemas para indexar contenido renderizado de JavaScript, lo que lleva a desafíos de SEO.
• Los usuarios pueden ver páginas en blanco si JavaScript no puede cargarse o ejecutarse.

Splitt sugiere un enfoque híbrido llamado “hidratación” para mejorar el SEO.

En este método, el servidor inicialmente representa el contenido, y luego la representación del lado del cliente maneja más interacciones.

Captura de pantalla de: youtube.com/googlesearchcentral, enero de 2025.

Relacionado: Advertencia de JavaScript de Google y cómo se relaciona con la búsqueda de IA

Cómo elegir la estrategia de representación correcta

Splitt señala que no hay una solución única para el desarrollo del sitio web.

Los desarrolladores deben considerar lo que necesita un sitio web al observar factores específicos.

Split dice:

“Al final, eso depende de un montón de factores, como ¿qué hace su sitio web? ¿Con qué frecuencia cambia el contenido? ¿Qué tipo de interacciones quieres apoyar? ¿Y qué tipo de recursos tienes para construir, ejecutar y mantener tu configuración?

Proporciona un resumen visual de los pros y los contras de cada enfoque para ayudar a los desarrolladores a tomar decisiones informadas.

Captura de pantalla de: youtube.com/googlesearchcentral, enero de 2025.

Mirar: Preguntas y respuestas con Martin Splitt de Google: HTML semántico

Conectando los puntos: representación y uso excesivo de JavaScript

Este episodio continúa discusiones anteriores sobre los inconvenientes del uso excesivo de JavaScript, especialmente con respecto al SEO en la era de los rastreadores de búsqueda de IA.

Como se informó anteriormente, los rastreadores de IA como GPTBOT a menudo tienen dificultades para procesar sitios web que dependen en gran medida de JavaScript, lo que puede disminuir su visibilidad en los resultados de búsqueda.

Para abordar este problema, Splitt recomienda utilizar la representación del lado del servidor o la representación previa para garantizar que el contenido esencial sea accesible tanto para los usuarios como para los motores de búsqueda. Se alienta a los desarrolladores a implementar técnicas de mejora progresiva y limitar el uso de JavaScript a situaciones en las que realmente agrega valor.

Vea el video a continuación para obtener más información sobre las estrategias de representación.

https://www.youtube.com/watch?v=xmyrqhdjfxu

Imagen destacada: captura de pantalla de: youtube.com/googlesearchcentral, enero de 2025