More share buttons
Share on Pinterest

Google explica el renderizado y el impacto en SEO


Martin Splitt de Google asistió a un seminario web sobre la representación de páginas web y cómo afecta al SEO. La representación es lo que sucede cuando un navegador solicita una página web, es una parte clave de las puntuaciones de Core Web Vitals. Comprender esto ayuda a eliminar parte del misterio de Core Web Vitals.

Representación de la página web

La representación de la página web es lo que sucede entre el navegador y la página web, el proceso de creación de una página web. Un proceso de representación eficiente da como resultado puntuaciones altas de Core Web Vitals.

Una representación menos eficiente puede afectar las ventas, los ingresos publicitarios e incluso el rastreo de páginas web hasta cierto punto.

Se le pidió a Martin Splitt de Google que definiera qué es el renderizado.

Captura de pantalla de Martin Splitt explicando el renderizado

Martin Splitt de Google explica la representación de páginas web

Martin respondió con una analogía entre cocinar una comida a partir de una receta y crear una página web.

Anuncio

Sigue leyendo a continuación

HTML son las siglas de HyperText Markup Language. Es un formato para crear documentos al que se puede acceder con un navegador a través del proceso de renderizado.

Martin Splitt explicó la representación:

“Si piensa en HTML como una receta y tiene todos los ingredientes ahí:

Tienes mucho texto

Tienes muchas imágenes

Tienes muchas cosas

Pero realmente no lo tienes en la receta. La receta es una hoja de papel con todas estas instrucciones sobre cómo hacer algo “.

La primera parte de la explicación de Martin es que HTML es como una receta, instrucciones. El texto y las imágenes son las cosas que se utilizan para crear la comida terminada, que es la página web.

Martin continuó la analogía comparando los recursos de la página web con los ingredientes físicos reales:

“Ahora, los activos de un sitio web son los ingredientes, como el CSS, los archivos JavaScript, así como las imágenes, los videos, todas esas cosas que subes para que la página se vea como se ve más adelante.

Y el sitio web que conoce y usa en su navegador que ve en su navegador, ese es el plato final “.

Anuncio

Sigue leyendo a continuación

Captura de pantalla de Jason Barnard

Jason Barnard escucha a Martin Splitt de Google

El renderizado es como el proceso de cocción.

Martin luego comparó el renderizado con el proceso real de tomar los ingredientes (recursos como imágenes, CSS, etc.) y cocinar.

Él continuó:

“Y el renderizado es prácticamente el proceso de cocción o preparación”.

Escaneo y renderizado de Googlebot

Martin luego explica qué es el renderizado para Googlebot.

Martin explicó el robot de Google y el renderizado:

“Así que gatear básicamente entra en un gran libro de recetas y saca una página con una receta y la pone en nuestro ámbito, nuestro curso, como si estuviéramos básicamente aquí en la mesa de la cocina … y esperamos a que comience a cocinar y Arrástrese allí. Básicamente, solo entregará una receta.

Y luego la renderización es el proceso donde, la renderización va, ¡Ajá! ¡Interesante! Rastreador de allí, ¿puedes traerme estos diez ingredientes?

Y el rastreador estará convenientemente, sí, te conseguí estos diez ingredientes que necesitas.

¡Mil gracias!

Y luego comenzamos a cocinar.

Esta es la representación “.

Análisis HTML para el montaje de la página web

La siguiente parte presenta una palabra de programación, parse. El análisis simplemente consiste en tomar todas las partes del documento HTML (JavaScript, CSS, elementos HTML) y seguir las instrucciones para crear la página web.

Martin continuó su discusión sobre la interpretación:

“Entonces, el renderizado analiza el HTML.

Básicamente, HTML, cuando se escanea, es solo un montón de texto, con el formato correcto pero … ¡Texto!

Para convertirlo en una representación visual, que en realidad es el sitio web, tenemos que renderizarlo, lo que significa que tenemos que recuperar todos los recursos, tenemos que entender fundamentalmente cómo nos dice el texto:

Aquí hay un encabezado, de acuerdo.

Luego hay una imagen allí y al lado de la imagen hay un montón de texto y luego debajo de la imagen hay otro encabezado, es un encabezado más pequeño, es un encabezado de nivel inferior … y luego hay un video y luego debajo de ese video hay más texto y En este texto hay tres enlaces que van aquí, aquí y aquí.

Y todo este proceso de ensamblaje, esta comprensión de lo que es y luego ensamblarlo en una representación visual con la que puede interactuar en la ventana de su navegador, esto es renderizado “.

Anuncio

Sigue leyendo a continuación

El papel de JavaScript en el renderizado

Algunos JavaScript son esenciales para renderizar (crear) la página web. Algunos JavaScript, como los scripts asociados con un formulario de contacto, no son realmente necesarios en la creación inicial de una página web interactiva por la que un visitante del sitio puede desplazarse, leer y hacer clic en un menú de navegación.

Para acelerar el procesamiento de la página web (y mejorar Core Web Vitals), algunos JavaScript no críticos pueden retrasarse o excluirse por completo si no es necesario para la página web.

Hay algunos JavaScript que son importantes para que la página sea visible e interactiva y otros que aún no lo son o que no lo son en absoluto.

Martin explicó:

“Y como parte del renderizado, en la primera etapa, ejecutamos JavaScript porque JavaScript básicamente parece ser una receta dentro de la receta.

Así que JavaScript puede ser como, ¡ahora pica esas cebollas!

Así que ahora tienes cebollas como ingrediente crudo, pero no pones cebollas enteras en tu plato, las picas.

Y es por eso que se necesita JavaScript, ¿verdad?

… Ejecutar JavaScript es solo una parte del renderizado. “

Anuncio

Sigue leyendo a continuación

Captura de pantalla de Bartosz Goralewicz

Captura de pantalla de Bartosz Goralewicz

El árbol de diseño

Martin luego comienza a hablar sobre el árbol de diseño. Hace referencia al modelo de objetos de documento, que es una disposición de todas las partes de la página web en una representación jerárquica.

Las diferentes “piezas y fragmentos” de una página web son como las hojas de un árbol. En HTML, esas hojas en lo que Martin llama Layout Tree se denominan nodos.

Anuncio

Sigue leyendo a continuación

Martin explica el árbol de diseño:

“Pero incluso cuando la ejecución de JavaScript haya finalizado o si no hubo ninguna ejecución de JavaScript, está bien.

Pero lo que pasa es que estamos ensamblando, como si estuviéramos tratando de entender estas piezas y cómo las vamos a ensamblar en la página y esto nos lleva a algo llamado Layout Tree.

Y el árbol de diseño nos dice qué tan grandes son las cosas, dónde están las cosas en la página.

Si son visibles o si no son visibles, si una cosa está detrás de otra.

Esta información también es importante para nosotros, tanto como ejecutar JavaScript porque JavaScript podría modificar, eliminar o agregar contenido que no estaba en el HTML inicial desde que fue entregado por el servidor.

Así que esto es renderizado en pocas palabras.

Durante un tiempo en HTML, potencialmente hemos tenido un montón de píxeles en la pantalla. Esta es la representación “.

El renderizado costoso puede afectar la experiencia del usuario

Luego, Martin presenta información útil sobre el impacto de JavaScript en el consumo de energía. Utilice la palabra “caro” para describir lo caro y lento que puede ser JavaScript.

Anuncio

Sigue leyendo a continuación

Menciona cómo se ha comparado JavaScript con el dióxido de carbono, un gas de efecto invernadero, y cómo eso afecta a los usuarios y, en última instancia, a las ganancias de los editores y las tiendas de comercio electrónico.

Martin Splitt explica el renderizado caro

Representación cara de Google-Martin-SplittMartin explica el impacto del renderizado costoso:

“La Búsqueda de Google tiene exactamente la misma lucha que un usuario del mundo real en este caso.

Porque, para un usuario del mundo real, incluso si está en un teléfono moderno y también en un teléfono realmente rápido, excelente y costoso, una mayor ejecución siempre, siempre, significa más consumo de energía.

Esto es lo correcto. Y … ha habido personas que han llamado a JavaScript el CO2 de Internet y no creo que eso sea completamente incorrecto.

… Cuanto más caro lo hagas, peor será para nosotros como experiencia.

A la Búsqueda de Google realmente no le importa. Solo tenemos que invertir en los recursos que necesitamos y hacer muchas optimizaciones para asegurarnos de que desperdiciamos la menor cantidad de energía y tiempo posible.

Pero, por supuesto, si lo está modificando, un efecto secundario agradable y realmente agradable es que sus usuarios probablemente también estarán más contentos porque necesitan menos batería, su teléfono anterior seguirá funcionando bien con lo que ha puesto allí y podrán consumir su contenido web y tal vez no sus competidores porque a sus competidores no les importa y en realidad producen algo que es menos conveniente de usar en sus teléfonos.

Así que esto no es algo en lo que compararías a Google con la experiencia del usuario.

Es un poco como el mismo problema o el mismo desafío y todos lo estamos abordando, incluida la Búsqueda de Google “.

Anuncio

Sigue leyendo a continuación

Captura de pantalla de Martin Splitt de Google

Grit de Google Martin

Información sobre la importancia del renderizado

Core Web Vitals puede ser algo abstracto y misterioso, especialmente cuando los técnicos hablan sobre Document Object Model, árboles DOM y renderizado.

Las analogías de Martin Splitt ayudaron a eliminar parte de ese misterio de una parte importante de la comprensión de las puntuaciones de Core Web Vitals, que es el renderizado.

Otro beneficio de su discusión es crear conciencia sobre el concepto de renderizado costoso y cómo esto podría afectar a los visitantes del sitio cuyos teléfonos pueden ser más antiguos y tener problemas para ver la página. Y no se trata solo de teléfonos más antiguos, los teléfonos más nuevos pueden tener problemas para descargar una página web si ha estado encendida durante días y la RAM se distribuye en varias ventanas abiertas del navegador.

Anuncio

Sigue leyendo a continuación

Finalmente, desmitificó el concepto de renderizado. Esto ayuda a hacer avanzar la conversación sobre la mejora de la velocidad de la página web y el rendimiento de Core Web Vitals porque hay poca jerga técnica para ralentizar o detener el progreso en la comprensión de algo importante.

Citación

Vea a Martin Splitt explicar la interpretación aproximadamente a las 3:36 pm





Source link

WhatsApp chat
MArketing

Se ve que quieres mejorar

Regístrate en nuestras consultorIAS GRATIS, Te mandaremos una confirmación