Martin Splitt, do Google, participou de um Duda Webinar sobre renderização de páginas da web e como isso afeta o SEO.
Só para você entender o processo de Renderização é o que acontece quando um navegador solicita uma página da web, é uma parte importante das pontuações do Core Web Vitals. Entender isso ajuda a desvendar um pouco do mistério do Core Web Vitals.
O que você vai ler neste artigo
Renderização de página da web
A renderização da página da web é o que acontece entre o navegador e a página da web, o processo de construção de uma página da web. Um processo de renderização eficiente resulta em altas pontuações do Core Web Vitals.
A renderização menos eficiente pode afetar as vendas, os ganhos com publicidade e até mesmo o rastreamento de páginas da web até certo ponto.
Martin Splitt do Google foi solicitado a definir o que é renderização.
Martin respondeu com uma analogia entre cozinhar uma refeição a partir de uma receita e fazer uma página da web.
HTML significa linguagem de marcação de hipertexto. É um formato de criação de documentos que podem ser acessados com um navegador por meio do processo de renderização.
Martin Splitt explicou a renderização:
“Se você pensar em HTML como uma receita e tiver todos os ingredientes lá:
Você tem um monte de texto
Você tem um monte de imagens
Você tem um monte de coisas
Mas você realmente não tem isso na receita. A receita é um pedaço de papel com todas essas instruções de como fazer uma coisa. ”
A primeira parte da explicação de Martin é que HTML é como uma receita, as instruções. O texto e as imagens são as coisas usadas para criar a refeição acabada, que é a página da web.
Martin continuou a analogia comparando os recursos da página da web com os ingredientes físicos reais:
“Agora, os recursos de um site são os ingredientes, como o CSS, os arquivos JavaScript, bem como as imagens, os vídeos, tudo que você carrega para realmente fazer a página ficar com a aparência que ficou depois.
E o site que você conhece e usa em seu navegador você vê em seu navegador, esse é o prato final. ”
Renderizar é como o processo de cozinhar
Em seguida, Martin comparou a renderização ao processo real de pegar os ingredientes (recursos como imagens, CSS etc.) e cozinhar.
Ele continuou:
“E a renderização é basicamente o cozimento ou o processo de preparação disso.”
Rastreamento e renderização do Googlebot
Em seguida, Martin explica o que é renderização para o Googlebot.
Martin explicou o Googlebot e a renderização:
“Então, rastejar fundamentalmente apenas vai para um grande livro de receitas e simplesmente pega uma página com uma receita e a coloca em nosso reino, nosso alcance, como se estivéssemos basicamente aqui em uma mesa de cozinha … e esperamos que o cozimento comece e o rastreamento basicamente nos fornecerá uma receita.
E então a renderização é o processo onde, a renderização vai, Aha! Interessante! Crawler ali, você pode me dar esses dez ingredientes?
E o rastreador ficará convenientemente, sim, trouxe para você esses dez ingredientes de que você precisa.
Muito obrigado!
E então começamos a cozinhar.
Isso é renderização. ”
Analisando o HTML para montagem de página da web
A próxima parte apresenta uma palavra de programação, parse. A análise é apenas pegar todas as partes do documento HTML (JavaScript, CSS, elementos HTML) e seguir as instruções para criar a página da web.
Martin continuou sua discussão sobre renderização:
“Portanto, a renderização analisa o HTML.
O HTML fundamentalmente, quando se trata de rastreamento, é apenas um monte de texto, convenientemente formatado, mas … Texto!
Para transformar isso em uma representação visual, que é o site na verdade, precisamos renderizá-lo, o que significa que precisamos buscar todos os recursos, precisamos entender fundamentalmente como o texto nos diz para sermos:
Há um cabeçalho aqui, ok.
Então há uma imagem ali e ao lado da imagem há um monte de texto e, sob a imagem, há outro título, é um título menor, é um título de nível inferior … e então há um vídeo e abaixo desse vídeo há mais algum texto e neste texto, há três links para aqui, aqui e aqui.
E todo esse processo de montagem, essa compreensão do que é e, em seguida, essa montagem em uma representação visual com a qual você pode interagir na janela do seu navegador, que é a renderização. ”
O papel do JavaScript na renderização
Algum JavaScript é crítico para renderizar (criar) a página da web. Um pouco de JavaScript, como os scripts associados a um formulário de contato, não é realmente necessário na criação inicial de uma página da web interativa que um visitante do site possa rolar, ler e clicar em um menu de navegação.
Para acelerar a renderização da página da web (e melhorar o Core Web Vitals), alguns JavaScript não críticos podem ser atrasados ou excluídos por completo, se não for necessário para a página da web.
Existem alguns JavaScript que são importantes para tornar a página visível e interativa e alguns que ainda não são importantes.
Martin explicou:
“E como parte da renderização, logo no primeiro estágio, executamos o JavaScript porque o JavaScript é basicamente uma receita dentro da receita.
Então JavaScript pode ser tipo, agora vá picar aquelas cebolas!
Agora você tem as cebolas como ingrediente cru, mas não as coloca inteiras no prato, você as corta.
E é para isso que o JavaScript é necessário, certo?
… A execução do JavaScript é apenas uma parte da renderização. ”
A Árvore de Layout
Em seguida, Martin começa a falar sobre a Árvore de Layout. Ele está fazendo uma referência ao Document Object Model, que é uma organização de todas as partes da página da web em uma representação hierárquica.
Os diferentes “pedaços” de uma página da web são como as folhas de uma árvore. Em HTML, essas folhas no que Martin chama de Árvore de Layout são chamadas de nós.
Martin explica a árvore de layout:
“Mas então, quando a execução do JavaScript terminar ou se não houver execução do JavaScript, tudo bem também.
Mas o que acontece é que estamos montando, como se estivéssemos descobrindo esses pedaços e peças e como precisamos gostar de montá-los na página, e isso leva a algo chamado Layout Tree.
E a Árvore de Layout nos diz o quão grande as coisas são, onde as coisas estão na página.
Se são visíveis ou se não são, se uma coisa está atrás de outra.
Essas informações também são importantes para nós, tanto quanto para executar o JavaScript, porque o JavaScript pode alterar, excluir ou adicionar conteúdo que não estava no HTML inicial, pois foi entregue pelo servidor.
Então, isso é renderização em poucas palavras.
De nós temos um pouco de HTML a temos potencialmente um monte de pixels na tela. Isso é renderização. ”
A renderização cara pode afetar a experiência do usuário
Em seguida, Martin apresenta uma visão útil sobre o impacto do JavaScript no consumo de energia. Ele usa a palavra “caro” para descrever o quão caro em tempo e energia algum JavaScript pode ser.
Ele menciona como o JavaScript foi comparado ao dióxido de carbono, um gás de efeito estufa, e como isso afeta os usuários e, em última análise, os resultados financeiros das editoras e das lojas de comércio eletrônico.
Martin explica o impacto da renderização cara:
“A Pesquisa Google enfrenta exatamente a mesma dificuldade de um usuário do mundo real neste caso.
Porque, para um usuário do mundo real, mesmo se você estiver em um telefone moderno e um telefone realmente rápido, fantástico e caro também, mais execução também sempre, sempre, significa mais consumo de energia.
É exatamente isso. E… tem havido pessoas que chamam o JavaScript de CO2 da Internet e não acho que isso esteja completamente errado.
… Quanto mais caro você torna, pior é para nós como uma experiência.
A Pesquisa Google realmente não se importa. Só temos que investir nos recursos de que precisamos e fazemos muitas otimizações para garantir que estamos desperdiçando o mínimo de energia e tempo possível.
Mas, obviamente, se você estiver otimizando isso, um efeito colateral bom e realmente bom é que seus usuários provavelmente também ficarão mais felizes porque precisam de menos bateria, o telefone antigo deles ainda funcionará bem com o que você colocou lá fora e eles serão capazes de consuma seu conteúdo da web e talvez não seus concorrentes, porque seus concorrentes não se importam e, na verdade, produzem algo que é menos conveniente para usar em seus telefones.
Portanto, isso não é algo em que você colocaria o Google contra a experiência do usuário.
É como se fosse o mesmo problema ou o mesmo desafio e todos nós estamos enfrentando isso, incluindo a Pesquisa Google. ”
Insights sobre a importância da renderização
Core Web Vitals pode ser um tanto abstrato e misterioso, especialmente quando os técnicos falam sobre Modelos de Objetos de Documento, árvores DOM e renderização.
As analogias de Martin Splitt ajudaram a desvendar um pouco desse mistério uma parte importante do entendimento das pontuações do Core Web Vitals, que é a renderização.
Outro benefício de sua discussão é criar consciência sobre o conceito de renderização cara e como isso pode afetar os visitantes do site cujos telefones podem ser mais antigos e têm problemas para renderizar a página. E não são apenas os telefones mais antigos, mas os telefones mais novos podem ter problemas para baixar uma página da web se ela estiver ligada por dias e a RAM estiver espalhada por várias janelas abertas do navegador.
Por fim, ele desmistificou o conceito de renderização. Isso ajuda a levar a conversa adiante sobre como melhorar a velocidade da página da web e o desempenho do Core Web Vitals porque há poucas coisas como jargão técnico para desacelerar ou interromper o progresso na compreensão de algo importante.
Veja Martin Splitt explicar a renderização a partir da marca de 15:36 minutos
