Martin Splitt de Google explica el renderizado y cómo afecta al SEO
Martin Splitt de Google participó en un seminario web de Duda sobre la representación de páginas web y su impacto en el SEO El renderizado es lo que sucede cuando un navegador solicita una página web y 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 páginas web
La representación de una 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 puntuaciones altas en 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 crear una página web.
HTML significa lenguaje de marcado de hipertexto Es un formato para crear documentos al que se puede acceder con un navegador durante el proceso de renderizado.
Martin Splitt explicó la representación:
“If you think about HTML as a recipe, and you have all the ingredients in there:
You have a bunch of text
You have a bunch of images
You have a bunch of stuff
But you don’t really have it in the recipe. The recipe is a piece of paper with all these instructions on how to make a thing.”
“Si piensas en HTML como una receta y tienes todos los ingredientes ahí:
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 algo”.
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 los elementos que se utilizan para crear la comida terminada, que es la página web.
Martin continuó con la analogía comparando los recursos de la página web con los ingredientes físicos reales:
“Now, the resources of a website are the ingredients, such as the CSS, the JavaScript files as well as the images, the videos, all that stuff that you load to actually make the page look the way that it looks afterwards.
And the website that you know and use in your browser you see in your browser, that’s the final dish.”
“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 verá después.
Y el sitio web que conoces y utilizas en tu navegador, lo ves en tu navegador, ese es el plato final”.
Captura de pantalla de Jason Barnard
El renderizado 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 cocinarlos.
Él continuó:
“And rendering is pretty much the cooking or the preparation process of that.”
«Y el renderizado es prácticamente el proceso de cocción o preparación de eso».
Rastreo y renderizado del robot de Google
A continuación, Martin explica qué es el renderizado para Googlebot.
Martin explicó el robot de Google y el renderizado:
“So crawling fundamentally just goes into a big book of recipes and just takes out a page with a recipe and puts that into our realm, our reach, like basically we are standing here at a kitchen table …and we wait for the cooking to begin and crawling will basically just hand us a recipe.
And then rendering is the process where, rendering goes, Aha! Interesting! Crawler over there, can you get me these ten ingredients?
And the crawler will be conveniently, yes, I got you these ten ingredients that you need.
Thank you very much!
And then we start cooking.
That’s what rendering is.”
“Así que, fundamentalmente, gatear simplemente va a un gran libro de recetas y simplemente saca una página con una receta y la pone en nuestro ámbito, a nuestro alcance, como si básicamente estuviéramos parados aquí en la mesa de la cocina… y esperamos a que comience la cocción.
Y luego el renderizado es el proceso en el que continúa el renderizado, ¡Ajá!
Y el rastreador será conveniente, sí, te compré estos diez ingredientes que necesitas.
¡Muchas gracias!
Y luego empezamos a cocinar.
Eso es lo que es el renderizado”.
Relacionado: Cómo (y por qué) los motores de búsqueda representan páginas
Análisis del HTML para el ensamblaje de páginas web
La siguiente parte presenta una palabra de programación, analizar El análisis consiste simplemente 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 renderización:
“So rendering parses the HTML.
HTML fundamentally, when it comes from crawling, is just a bunch of text, conveniently formatted but …Text!
In order to make that into a visual representation, which is the website really, we need to render it, which means we need to fetch all the resources, we need to fundamentally understand what the text tells us to be like:
There’s a header here, okay.
Then there’s an image there and next to the image there’s a bunch of text and then under the image there’s another heading, it’s a smaller heading, it’s a lower level heading …and then there’s a video and then below that video there’s some more text and in this text there’s three links going to here, here and here.
And all this assembly process, this understanding what it is and then this assembling it into a visual representation that you can interact with in your browser window, that is rendering.”
“Entonces el renderizado analiza el HTML.
Básicamente, HTML, 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 recuperar todos los recursos, necesitamos entender fundamentalmente cómo nos dice el texto que debemos ser:
Hay un encabezado aquí, 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 título, es un título más pequeño, es un título de nivel inferior… y luego hay un video y luego debajo de ese video hay más texto y
Y todo este proceso de ensamblaje, comprender qué es y luego ensamblarlo en una representación visual con la que puedes interactuar en la ventana de tu navegador, eso es renderizar”.
El papel de JavaScript en el renderizado
Algo de JavaScript es fundamental para representar (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 la representación de la página web (y mejorar Core Web Vitals), algunos JavaScript no críticos se pueden retrasar o excluir por completo si no son necesarios 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 son importantes o no son importantes en absoluto.
Martín explicó:
“And as part of rendering, at the very first stage, we execute the JavaScript because JavaScript happens to be basically a recipe within the recipe.
So JavaScript can be like, now go chop those onions!
So now you have the onions as a raw ingredient but you don’t put the onions as a whole into your dish, you cut them up.
And that’s what the JavaScript is needed for, right?
…The JavaScript execution is just a part of rendering.”
“Y como parte del renderizado, en la primera etapa, ejecutamos JavaScript porque resulta que 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 las pones enteras en tu plato, sino que las cortas.
Y para eso se necesita JavaScript, ¿verdad?
…La ejecución de JavaScript es sólo una parte del renderizado”.
Captura de pantalla de Bartosz Goralewicz
Relacionado: Manifiesto de SEO de renderizado: por qué necesitamos ir más allá del SEO de JavaScript
El árbol de diseño
A continuación, Martin 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.
Los distintos “trozos” de una página web son como las hojas de un árbol En HTML, esas hojas en lo que Martin llama Árbol de diseño se denominan nodos.
Martin explica el árbol de diseño:
“But then when the JavaScript execution has finished or if there was no JavaScript execution that is fine, too.
But what then happens is we are assembling, like we are figuring out these bits and pieces and how we need to like assemble them on the page and that leads to something called, Layout Tree.
And the Layout Tree tells us how big things are, where on the page things are.
If they are visible or if they are not visible, if one thing is behind another thing.
This information is important for us as well, just as much as executing the JavaScript because the JavaScript might change, delete or add content that wasn’t in the initial HTML as it has been delivered by the server.
So that’s rendering in a nutshell.
From we have some HTML to we have potentially a bunch of pixels on the screen. That’s rendering.”
“Pero luego, cuando la ejecución de JavaScript haya finalizado o si no hubo ejecución de JavaScript, eso también está bien.
Pero lo que luego sucede es que estamos ensamblando, como si estuviéramos descubriendo estos fragmentos y cómo necesitamos ensamblarlos en la página y eso conduce a algo llamado Árbol de diseño.
Y el árbol de diseño nos dice qué tan grandes son las cosas, en qué parte de la página están.
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 puede cambiar, eliminar o agregar contenido que no estaba en el HTML inicial tal como fue entregado por el servidor.
Eso es renderizar en pocas palabras.
Desde que tenemos algo de HTML hasta que potencialmente tenemos un montón de píxeles en la pantalla. Eso es renderizar”.
La renderización costosa puede afectar la experiencia del usuario
A continuación, Martin presenta información útil sobre el impacto de JavaScript en el consumo de energía. Utiliza la palabra «caro» para describir lo costoso que puede ser algo de JavaScript en tiempo y energía.
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 costoso renderizado:
“Google Search has the exact same struggle as a real-world user in this case.
Because, for a real-world user, even if you are on a modern phone and a really fast and fantastic and expensive phone as well, more execution also always, always, means more power consumption.
That’s just the thing. And …there have been people who called JavaScript the CO2 of the Internet and I don’t think that’s completely wrong.
…The more expensive you make it the worse it is for us as an experience.
Google Search doesn’t really care. We just have to invest in the resources that we need and we do a lot of optimizations to make sure that we are wasting as few energy and time as possible.
But obviously, if you are optimizing that, a nice and really nice side effect is that your users will probably also be happier because they need less battery, their old phone will still work fine with what you put out there and they will be able to consume your web content and maybe not your competitors because your competitors don’t care and actually produce something that is less convenient to use on their phones.
So this is not something where you would pit Google versus user experience.
This is kind of like the same problem or the same challenge and we are all facing it, including Google Search.”
“En este caso, la Búsqueda de Google tiene exactamente la misma lucha que un usuario del mundo real.
Porque, para un usuario del mundo real, incluso si tiene un teléfono moderno y también un teléfono realmente rápido, fantástico y costoso, una mayor ejecución siempre, siempre, significa más consumo de energía.
Esa es la cosa Y… ha habido personas que llamaron a JavaScript el CO2 de Internet y no creo que eso esté completamente equivocado.
…Cuanto más caro lo hagas, peor será la experiencia para nosotros.
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ás optimizando eso, un efecto secundario agradable y realmente agradable es que tus usuarios probablemente también estarán más contentos porque necesitarán menos batería, su viejo teléfono seguirá funcionando bien con lo que tú pones ahí y podrán
Así que esto no es algo en lo que se enfrente 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”.
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 documentos, á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: el renderizado.
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 pueden ser más antiguos y tener problemas para renderizar la página. Y no se trata solo de los 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 activa durante días y la RAM está distribuida en varias ventanas abiertas del navegador.
Por último, desmitificó el concepto de renderizado. Eso ayuda a avanzar la conversación sobre cómo mejorar la velocidad de la página web y el rendimiento de Core Web Vitals porque hay pocas cosas, como la jerga técnica, que ralentizan o detienen el progreso en la comprensión de algo importante.
Citas
Página original del seminario web de Duda sobre renderizado esencial Original Duda Webinar Page for Essential Rendering
Mire a Martin Splitt explicar el renderizado aproximadamente en el minuto 15:36
Leer el articulo original en Search Engine Journal.
