Una introducción al renderizado para SEO

Si su contenido no se puede representar, entonces no contribuye a cómo Google entiende su sitio. Aprenda cómo puede hacer que el renderizado sea más efectivo.

Comencemos esto con una explosión.

Googlebot no es lo que piensas.

Los profesionales de SEO se refieren a Googlebot con una extraña forma de reverencia reservada en generaciones anteriores para deidades omniscientes y poderes invisibles.

Es dramático, le da estilo a una historia, pero simplifica demasiado la verdadera identidad de Googlebot.

Googlebot es simplemente un agente de usuario Es el identificador de una solicitud, una versión elegante del identificador de llamadas.

Una vez que la solicitud recibe una respuesta, el trabajo de Googlebot finaliza y comienza a solicitar el siguiente URI. La respuesta recopilada pasa por una serie de servicios y procesos antes de aparecer en SERP.

El agente de usuario rudimentario se lleva toda la gloria, pero debemos hablar sobre el peso pesado, la construcción oculta que construye su sitio para que Google lo experimente como lo haría un ser humano: el renderizado.

¿Qué es la representación?

La representación es el proceso en el que Googlebot recupera sus páginas, ejecuta su código y evalúa su contenido para comprender el diseño o la estructura de su sitio.

Toda la información que Google recopila durante el proceso de renderizado se usa para clasificar la calidad y el valor del contenido de su sitio en comparación con otros sitios y lo que las personas buscan con la Búsqueda de Google.

Cada página web tiene dos estados: la representación ocurre entre ellos

Cada página web tiene dos estados:

• El HTML inicial.
• El HTML renderizado.

Un sitio web puede ser muy diferente entre los dos estados.

El HTML inicial ocurre primero Es la respuesta del servidor. Contiene HTML y enlaces a recursos como JavaScript, CSS e imágenes que se necesitan para crear la página. Para ver el código HTML inicial por sí mismo, consulte el código fuente de la página.

El HTML renderizado es más conocido como DOM, una abreviatura de Document Object Model. Cada página web tiene un DOM Representa el HTML inicial más cualquier cambio realizado por JavaScript al que HTML llamó Para ver el DOM, abra las herramientas de desarrollo del navegador en su navegador y haga clic en la pestaña de la consola.

Si está buscando detectar fácilmente la diferencia entre los dos, las herramientas como la extensión de Chrome View Rendered Source resaltarán las líneas que cambian de un estado a otro. View Rendered Source

Saber la diferencia entre HTML y DOM es la clave para solucionar problemas de JS SEO

Cuando el contenido cambia entre HTML inicial y DOM, es la página de cambio de JavaScript del lado del cliente (JavaScript se puede ejecutar en otro lugar, pero lo abordaremos más adelante).

Estos cambios indican que se está ejecutando JavaScript en el navegador del usuario Cuando JavaScript se ejecuta en el navegador del usuario, lo llamamos Representación del lado del cliente (CSR).

Esto pone en riesgo tu página web Si algo sale mal durante la ejecución, es posible que esos cambios de JavaScript nunca sucedan JavaScript es un proceso complejo y el recurso más costoso en su sitio.

Suena como un problema de desarrollo, ¿verdad?

no lo es

El profesional de SEO tiene una piel sustancial en el juego.

Google no puede indexar lo que no puede renderizar

Para clasificar, tenemos que estar indexados. Para ser indexados, tenemos que ser renderizados.

Si el contenido no se puede representar, entonces no contribuye a cómo Google entiende o eleva su sitio.

Veamos un sitio con JavaScript feliz y saludable.

Todo parece en orden Este parece ser un sitio de comercio electrónico autorizado que sabe mucho sobre su tema.

Ahora quitemos el contenido generado por JavaScript Puede hacer esto en cualquier sitio bloqueando JavaScript en Configuración del sitio.

Uf.

Todos los productos que destacaban la autoridad del sitio se han ido.

Es la diferencia entre decir que conocemos libros y mostrarle a la audiencia que su sitio realmente sabe.

Imagínese si ese fuera el contenido en el que trabajó duro para optimizar y desea clasificar.

Este es uno de los mejores escenarios de caso.

Incluso sin JavaScript, todavía tenemos una idea básica de la intención que esta página está tratando de cumplir. Conocemos el nombre de la marca y todavía podemos encontrar enlaces útiles a otras páginas del sitio.

Vamos a jugar un juego.

Abrir una página y ver la fuente de la página ¿Puedes decir de qué se trata el sitio?

Si no puede identificar de qué se trata una página y qué tipo de intención de búsqueda coincide según el HTML inicial, tampoco lo puede hacer un motor de búsqueda.

La página tendrá que pasar por el proceso de renderizado para ser entendida.

Cómo renderiza Google (un bosquejo aproximado)

La representación no es Hellmouth o algún vacío lovecraftiano es un super mario bros nivel.

Tan difícil como puede ser, hay pasos claros y puntos de control.

¡Aquí está el proceso con útiles pasos prácticos para que pueda seguirlo!

1. Se extrae una URL de la cola de rastreo
2. Siga adelante: elija una página, cualquier página.
3. Googlebot solicita la URL y descarga el HTML inicial
4. Seguir a lo largo: ver la fuente de la página
5. El HTML inicial se pasa a la etapa de procesamiento (primera ola de procesamiento por parte del servicio de indexación de Google)
6. Sígueme: ¿Puedes decir de qué se trata esta página?
7. La etapa de procesamiento extrae enlaces del HTML inicial Cada una de estas solicitudes cuenta para su presupuesto de rastreo.
8. Seguimiento: abra la pestaña de red en las herramientas para desarrolladores de Chrome y observe el número total de solicitudes Cada una de estas solicitudes cuenta para su presupuesto de rastreo.
9. Estos enlaces vuelven a la cola de rastreo Uno a uno sin trampas Pregúntese cómo ese recurso aporta valor Alrededor de 20 recursos en, te molestarás 50 recursos, comience a preguntarse cómo estas cosas contribuyen de alguna manera significativa 80 recursos, comience a comprender las tonterías innecesarias que el sitio está enviando Consejo profesional: Mantenga cada pestaña nueva para cada uno y observe cómo se le va la cordura lentamente.
10. Siga adelante: abra cada recurso Uno a uno sin trampas Pregúntese cómo ese recurso aporta valor Alrededor de 20 recursos en, te molestarás 50 recursos, comience a preguntarse cómo estas cosas contribuyen de alguna manera significativa 80 recursos, comience a comprender las tonterías innecesarias que el sitio está enviando Consejo profesional: Mantenga cada pestaña nueva para cada uno y observe cómo se le va la cordura lentamente.
11. Una vez que se rastrean los recursos, la página se pone en cola para renderizar Puede que hayas olvidado cómo hacerlo.
12. Seguir a lo largo: parpadeo Puede que hayas olvidado cómo hacerlo.
13. Cuando los recursos están disponibles, la solicitud pasa de la cola de procesamiento al procesador
14. Siga adelante: intente encontrar dónde fue su pestaña original.
15. El servicio de representación ensambla la página usando los enlaces rastreados Alternativamente, si ha perdido su pestaña original: use el Inspector de URL de Google Search Console para representar la página La herramienta ejecuta tanto el rastreo como el renderizado simultáneamente.
16. Siga adelante: vea el DOM abriendo las herramientas del desarrollador y vea los recursos Alternativamente, si ha perdido su pestaña original: use el Inspector de URL de Google Search Console para representar la página La herramienta ejecuta tanto el rastreo como el renderizado simultáneamente.
17. Renderer devuelve el HTML renderizado al procesamiento
18. Seguimiento: vea el HTML renderizado disponible en GSC.
19. Segunda ola de procesamiento para el índice de Google
20. Sígueme: ¿Puedes decir de qué trata la página?
21. Extrae enlaces del HTML renderizado para ponerlos en la cola de rastreo
22. Siga adelante: busque enlaces disponibles en el HTML renderizado que no estaban disponibles en la respuesta del servidor.
23. Vaya a la siguiente URL de su lista y repita el proceso.

• Siga adelante: elija una página, cualquier página.

• Seguir a lo largo: ver la fuente de la página

• Sígueme: ¿Puedes decir de qué se trata esta página?

• Seguimiento: abra la pestaña de red en las herramientas para desarrolladores de Chrome y observe el número total de solicitudes Cada una de estas solicitudes cuenta para su presupuesto de rastreo.

• Siga adelante: abra cada recurso Uno a uno sin trampas Pregúntese cómo ese recurso aporta valor Alrededor de 20 recursos en, te molestarás 50 recursos, comience a preguntarse cómo estas cosas contribuyen de alguna manera significativa 80 recursos, comience a comprender las tonterías innecesarias que el sitio está enviando Consejo profesional: Mantenga cada pestaña nueva para cada uno y observe cómo se le va la cordura lentamente.

• Seguir a lo largo: parpadeo Puede que hayas olvidado cómo hacerlo.

• Siga adelante: intente encontrar dónde fue su pestaña original.

• Siga adelante: vea el DOM abriendo las herramientas del desarrollador y vea los recursos Alternativamente, si ha perdido su pestaña original: use el Inspector de URL de Google Search Console para representar la página La herramienta ejecuta tanto el rastreo como el renderizado simultáneamente.

• Seguimiento: vea el HTML renderizado disponible en GSC.

• Sígueme: ¿Puedes decir de qué trata la página?

• Siga adelante: busque enlaces disponibles en el HTML renderizado que no estaban disponibles en la respuesta del servidor.

¡Trabajo fantástico!

Cómo hacer que el renderizado sea más efectivo y menos doloroso

Ahora que ha experimentado el proceso de renderizado de forma práctica (lo siento y de nada), hablemos sobre cómo hacer que la experiencia sea menos dolorosa.

1 Sea consciente de cómo entrega el contenido

Cuantos más recursos del lado del cliente utilice, más lugares habrá para que las cosas salgan mal.

Imagina que realmente eres Googlebot.

¿Alguno de esos recursos dio un error cuando se solicitó?

Cualquier contenido creado por ese recurso se pierde ahora en el sofá de Internet.

Espero que no haya sido importante.

2 Omita la cola de procesamiento y entregue contenido crítico en la respuesta del servidor

JavaScript tiene que ejecutarse en alguna parte En su mayor parte, está en su servidor o en el navegador del usuario.

Cuando ejecutamos JavaScript en el lado del servidor, podemos enviar el resultado (el contenido renderizado) al usuario en el HTML inicial.

Muchos marcos de JavaScript como Angular y React tienen estas funcionalidades disponibles de forma nativa.

Obtener su contenido renderizado del lado del servidor implica trabajar con sus desarrolladores y aprender sobre su base de código.

Es importante entender que no tiene que ser 100% del lado del cliente o 100% del lado del servidor En su lugar, concéntrese en enviar lo que importa cuando importa.

Crítico aquí significa por qué el usuario vino a la página Deberá definir para su sitio por plantilla de página.

Los elementos como el contenido complementario, el pie de página del sitio y los elementos fuera de pantalla pueden esperar.

JSON-LD en su HTML inicial es una excelente manera de pasarle a Googlebot una hoja de trucos, pero asegúrese de tener el contenido que le interesa al usuario también.

3 Envíe solo los guiones que necesita

En 2019, los costos dominantes de los scripts ahora son la descarga y el tiempo de ejecución de la CPU. dominant costs

Cada script llamado debe descargarse, analizarse, compilarse y ejecutarse, independientemente de si contribuye al contenido de la página.

Google Chrome tiene una funcionalidad integrada para ayudarlo a ver cuánto de su código se usa.

Cómo detectar guiones derrochadores

• Abra las herramientas del desarrollador.
• Haga clic en los 3 puntos en la esquina superior derecha.
• Seleccione más herramientas, Cobertura.
• Vuelva a cargar la página.

Como objetivo, una página saludable y efectiva debe tener menos de 1 MB.

Lo más probable es que la página de destino corpulenta y de bajo rendimiento pueda eliminar algunos guiones. Si encuentra scripts excesivos, trabaje con su equipo de desarrollo para dividir el código. code split

4 Priorice la experiencia humana sobre las características brillantes

Es probable que su bandeja de entrada esté llena de ofertas para probar nuevas herramientas impulsadas por IA con métricas patentadas que clasifican la visibilidad de su sitio en unicornios.

Si ya mide el rendimiento con otros 15 píxeles de seguimiento, tal vez no sea necesaria una nueva puntuación de cubo de narval.

Los scripts de terceros pueden afectar negativamente el rendimiento, la representación, la seguridad y la privacidad del usuario.

Piense en cargar un script de terceros como si le diera a alguien la llave de su casa.

5 Imágenes y secuencias de comandos perezosas sin bloquear la representación

Una imagen vale más que mil palabras, ¿verdad?

Aquí está la cosa 1,000 palabras son aproximadamente 2kb.

Según HTTPArchive, las imágenes son el activo más solicitado y tienen un promedio de 900 kbs de solicitudes. 900kbs

La carga diferida se admite de forma nativa a partir de Chrome 76 Simplemente agregue el atributo loading=»lazy» para ofrecer el valor máximo con el ticket de desarrollo más pequeño posible. Lazy loading

Del mismo modo, también puede cargar scripts de forma asíncrona agregando un atributo simple:

6 Mantenga pequeños los paquetes de guiones

Si su secuencia de comandos tiene más de 50 a 100 kB, divídala en paquetes separados más pequeños.

Múltiples paquetes más pequeños son más efectivos que un solo paquete de secuencias de comandos grande.

Si su sitio utiliza multiplexación HTTP/2, varias solicitudes y respuestas pueden estar activas al mismo tiempo.

7 Caché, caché, caché

¿Recuerdas el ejercicio de seguimiento anterior? Ese paso adicional se puede evitar fácilmente almacenando en caché los recursos el mayor tiempo posible.

Si divide su JS en paquetes más pequeños dedicados a una función específica, será más fácil almacenarlos en caché durante largos períodos de tiempo.

Lea los Fundamentos web de Google y luego siéntese con sus ingenieros para obtener información sobre cómo y qué almacena actualmente en caché. Google’s Web Fundamentals

8 El rendimiento y la representación están directamente relacionados

Google usa Chromium para renderizar por varias razones Uno de los cuales es que puede capturar tiempos críticos, desde el tiempo hasta el primer byte (TTFB) hasta el tiempo hasta el interactivo (TTI).

Los datos que captura al cargar su página ayudan a informar todo, desde qué tan apto para dispositivos móviles es su diseño hasta qué tan rápido Ambos son factores para la clasificación.

Cuanto más eficientes y eficaces sean sus recursos, más eficaz será la representación de la página.

Lighthouse es una herramienta de prueba gratuita que puede ayudarlo a identificar cuellos de botella en el rendimiento. Lighthouse

Si desea profundizar en las métricas de rendimiento de Lighthouse, esta guía desglosa la métrica y sus componentes.

9 Recuerde que ninguna pieza de tecnología es inherentemente buena o mala

JavaScript es una herramienta y tiene una aplicación efectiva que crea ricas experiencias interactivas y personalizadas. Un martillo es también una herramienta.

Los martillos son excelentes para colgar cuadros, los martillos son excelentes para trabajar con clavos, pero eso no hace que un martillo sea ideal para la pedicura en el hogar.

Conoce la diferencia entre tus uñas No culpes a la herramienta.

¿Cuál es la mejor manera de renderizar?

Depende de las tecnologías que utilice Depende de cuáles sean tus objetivos comerciales.

Depende no es una respuesta de cancelación para una pregunta que Google no quiere responder.

La tecnología se matiza La renderización es uno de los muchos procesos que ocurren en los espacios intermedios.

Los comportamientos que no vemos pueden tener un mayor impacto en nuestro sitio que toda la optimización en la página que puede usar con palabras clave.

Esta es tu llamada a la acción Ser ferozmente curioso Hacer preguntas.

Estar en reuniones incómodas con equipos que no entiendes Haz preguntas tontas.

Quedarse como un tonto frente a expertos en la materia Demuestra que estás dispuesto a aprender.

Más recursos:

Créditos de imagen

Todas las capturas de pantalla tomadas por el autor, noviembre de 2019

Leer el articulo original en Search Engine Journal.