Martin Splitt de Google participó en un seminario web sobre la representación de páginas web y cómo afecta al SEO. La renderización es lo que sucede cuando un navegador solicita una página web, es una parte clave de Elementos fundamentales de la Web puntuaciones. 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 renderizado eficiente da como resultado puntajes altos 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 respondió con una analogía entre cocinar una comida a partir de una receta y hacer una página web.
Anuncio publicitario
Continuar leyendo a continuación
HTML significa lenguaje de marcado de hipertexto. Es un formato para crear documentos a los que se puede aceptar con un navegador a través del proceso de renderizado.
Martin Splitt explicó el renderizado:
“Si piensa en HTML como una receta y tiene todos los ingredientes allí:
Tienes un montón de texto
Tienes un montón de imágenes
Tienes un montón de cosas
Pero realmente no lo tienes en la receta. La receta es una hoja de papel con todas estas instrucciones sobre cómo hacer una cosa «.
La primera parte de la explicación de Martin es que HTML es como una receta, las 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 recursos de un sitio web son los ingredientes, como el CSS, los archivos JavaScript, así como las imágenes, los videos, todo eso que cargas para que la página se vea como se ve después.
Y el sitio web que conoces y usas en tu navegador que ves en tu navegador, ese es el plato final «.
Anuncio publicitario
Continuar leyendo a continuación
Captura de pantalla de Jason Barnard
Renderizar es como el proceso de cocinar
A continuación, Martin 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 más o menos el proceso de cocción o preparación de eso».
Rastreo y renderizado de Googlebot
A continuación, Martin explica qué es el renderizado para Googlebot.
Martin explicó el robot de Google y el renderizado:
“Así que gatear fundamentalmente solo entra en un gran libro de recetas y simplemente saca una página con una receta y la pone en nuestro reino, nuestro alcance, como si básicamente estuviéramos aquí en la mesa de la cocina … y esperamos a que comience la cocción y gatear básicamente nos dará una receta.
Y luego el renderizado es el proceso donde, el renderizado va, ¡Ajá! ¡Interesante! Rastreador de allí, ¿puedes conseguirme estos diez ingredientes?
Y el rastreador estará convenientemente, sí, te conseguí estos diez ingredientes que necesitas.
¡Muchos gracias!
Y luego comenzamos a cocinar.
Eso es lo que es el renderizado «.
Relacionado: Cómo (y por qué) los motores de búsqueda procesan las páginas
Analizar el HTML para el ensamblaje de páginas web
La siguiente parte presenta una palabra de programación, parse. Analizar es simplemente 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.
HTML fundamentalmente, cuando se trata de rastreo, es solo un montón de texto, convenientemente formateado pero… ¡Texto!
Para convertir eso en una representación visual, que es realmente el sitio web, necesitamos renderizarlo, lo que significa que necesitamos buscar todos los recursos, necesitamos entender fundamentalmente cómo nos dice el texto que seamos:
Aquí hay un encabezado, está bien.
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 algo más de 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, eso es renderizado «.
Anuncio publicitario
Continuar leyendo a continuación
El papel de JavaScript en el renderizado
Algunos JavaScript es fundamental para renderizar (crear) la página web. Bastante 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 en 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 hacer que la página sea visible e interactiva y algunos que no son importantes todavía o en completo.
Martin explicó:
“Y como parte del renderizado, en la primera etapa, ejecutamos JavaScript porque JavaScript es básicamente una receta dentro de la receta.
Entonces JavaScript puede ser como, ¡ahora corta esas cebollas!
Así que ahora tienes las cebollas como ingrediente crudo, pero no pones las cebollas enteras en tu plato, las cortas.
Y para eso se necesita JavaScript, ¿verdad?
… La ejecución de JavaScript es solo una parte del procesamiento «.
Anuncio publicitario
Continuar leyendo a continuación
Captura de pantalla de Bartosz Goralewicz
Relacionado: Representación del manifiesto de SEO: por qué necesitamos ir más allá del SEO de JavaScript
El árbol de diseño
A continuación, Martin comienza a hablar sobre Layout Tree. Está haciendo una 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.
Los diferentes «fragmentos» de una página web son como las hojas de un árbol. En HTML, esas hojas de lo que Martin llama Layout Tree se denominan nodos.
Anuncio publicitario
Continuar leyendo a continuación
Martin explica el árbol de diseño:
“Pero cuando la ejecución de JavaScript ha finalizado o si no hubo ejecución de JavaScript, eso también está bien.
Pero lo que sucede entonces es que estamos ensamblando, como si estuviéramos averiguando estas partes y piezas y cómo necesitamos ensamblarlas en la página y eso nos lleva a algo llamado Layout Tree.
Y el árbol de diseño nos dice qué tan grandes son las cosas, en qué parte de la página están las cosas.
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 el JavaScript puede cambiar, eliminar o agregar contenido que no estaba en el HTML inicial, ya que fue entregado por el servidor.
Entonces eso es renderizado en pocas palabras.
Desde que tenemos algo de HTML hasta que potencialmente tenemos un montón de píxeles en la pantalla. Eso es renderizado «.
El renderizado costoso puede afectar la experiencia del usuario
A continuación, Martin presenta la información útil sobre el impacto de JavaScript en el consumo de energía. Utiliza la palabra «caro» para describir lo costoso en tiempo y energía que puede resultar algo de JavaScript.
Anuncio publicitario
Continuar 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 los resultados de los editores y las tiendas de comercio electrónico.
Martin Splitt explica el costoso renderizado
Martin explica el impacto del renderizado costoso:
“La Búsqueda de Google tiene exactamente la misma dificultad 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, fantástico y costoso, más ejecución también siempre, siempre, significa más consumo de energía.
Eso es lo que pasa. Y… ha habido gente que llamó a JavaScript el CO2 de Internet y no creo que eso sea del todo 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 hacemos muchas optimizaciones para asegurarnos de que estamos desperdiciando la menor cantidad de energía y tiempo posible.
Pero obviamente, si está optimizando eso, un efecto secundario apacible y realmente apacible 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 coloque allí y podrán hacerlo. consumen 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 como el mismo problema o el mismo desafío y todos lo enfrentamos, incluida la Búsqueda de Google «.
Anuncio publicitario
Continuar leyendo a continuación
Captura de pantalla de Martin Splitt de Google
Información sobre la importancia del renderizado
Core Web Vitals puede ser algo abstracto y misterioso, especialmente cuando los técnicos hablan de modelos de objetos de documento, á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 la representación.
Otro beneficio de su discusión es crear conciencia sobre el concepto de renderizado costoso y cómo eso podría afectar a los visitantes del sitio cuyos teléfonos podrían ser más antiguos y tener problemas para renderizar la página. Y no se trata solo de teléfonos más antiguos, sino que 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 publicitario
Continuar leyendo a continuación
Por último, desmitificó el concepto de renderizado. Eso 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 pocas cosas, como la jerga técnica, para ralentizar o detener el progreso en la comprensión de algo importante.
Citación
Mire a Martin Splitt explicar el renderizado desde aproximadamente el minuto 15:36
Consultar el artículo en la publicación original
