Como o DCL e o FCP afetam a SEO? | Métricas de performance da web

O que é DCL?

DCL, abreviação de DOMContentLoaded, é uma importante métrica de performance de página web. O DCL mede o ponto em que um navegador está pronto para implementar qualquer script do lado do cliente. Em termos mais técnicos, DCL é o tempo durante o processo de carregamento de uma página web quando o DOM (Document Object Model) foi montado pelo navegador e nenhuma folha de estilo está impedindo a execução do JavaScript. (Para obter ajuda na compreensão desses termos, consulte "Observação rápida sobre como funcionam as páginas web" abaixo.)

O que é o DOM (Modelo de Objeto de Documento)?

DOM é uma sigla que significa Document Object Model (Modelo de Objeto de Documento). O Modelo de Objeto de Documento é uma representação da estrutura de uma página web, não diferente de um esboço de um trabalho de pesquisa, com pontos e subpontos. Outra forma de imaginar o DOM é como uma árvore, com a própria página como a raiz, ramificando-se nos diferentes elementos HTML da página.

DOMContentLoaded significa que o navegador gerou este modelo da página a partir do código HTML que recebeu. Isto também significa que ele está pronto para realizar scripts e exibir conteúdo dinâmico.

O que é FCP?

A Primeira Exibição de Conteúdo, ou FCP, é outra métrica de performance essencial. A FCP mede o momento em que o primeiro conteúdo do DOM é renderizado – o que significa que o primeiro elemento HTML é exibido. Podem ser textos, imagens ou qualquer coisa que o usuário reconheça como parte da página web. A Primeira Exibição de Conteúdo é diferente da Primeira Exibição (FP), que mede quando qualquer elemento da página é renderizado.

Há várias outras métricas de performance que medem a "primeira" coisa a ocorrer. Por exemplo, o tempo decorrido até o primeiro byte (TTFB) mede quando o primeiro byte de um servidor web chega ao navegador. Entretanto, a FCP mede o primeiro ponto em que um usuário pode ver que uma página está começando a ser carregada com sucesso. Como a percepção do usuário sobre a performance da web é o que é importante para manter os usuários envolvidos em um site, o TTFB é quase irrelevante da perspectiva de um usuário.

Como o DCL e a FCP afetam a SEO?

A velocidade do site é uma parte crucial de uma sólida estratégia de SEO (Search Engine Optimization [otimização de mecanismo de pesquisa]). A performance é um fator especialmente importante para as classificações dos mecanismos de pesquisa do Google. O DCL e a FCP são duas métricas que o Google enfatiza em sua avaliação de performance e o Google PageSpeed Insights ajuda os desenvolvedores a medi-las. (Embora o Google não compartilhe exatamente o quanto essas duas métricas de performance influenciam em suas classificações de pesquisa, ele certamente as leva em consideração.)

Os desenvolvedores podem seguir várias etapas para melhorar essas métricas de performance de um site. Tirar vantagem de armazenamento em cache e aproveitar a CDN são duas etapas essenciais para melhorar os tempos de DCL e FCP.

Como a Cloudflare melhora o DCL e a FCP?

A CDN da Cloudflare acelera muito os sites armazenando conteúdo em cache em locais ao redor do mundo, para que as solicitações HTTP sejam respondidas com muito mais rapidez. Como resultado, os navegadores recebem a página HTML mais rapidamente, melhorando ambas as métricas.

Observação rápida sobre como funcionam as páginas web

Uma página web é composta de uma combinação de códigos HTML, CSS e JavaScript. Quando um navegador faz uma solicitação de uma página web, o servidor web relevante envia um arquivo HTML que contém, entre outras coisas, uma lista de todos os CSS, JavaScript e outros ativos que o navegador deve solicitar separadamente.

• HTML (Hypertext Markup Language [Linguagem de Marcação de Hipertexto]) é um código que fornece instruções aos navegadores sobre como exibir conteúdo e solicitar outros ativos.
• CSS (Cascading Style Sheets) é um código que fornece instruções adicionais sobre como o conteúdo HTML deve aparecer e como as páginas web são dispostas.
• JavaScript é uma linguagem de programação que pode pegar o conteúdo HTML e alterá-lo quando certas condições específicas são atendidas. Além disso, o JavaScript pode ser usado para tarefas mais complexas como renderização 3D, jogos ou outras atividades tecnicamente complexas.

O arquivo HTML contém o conteúdo que aparece na página, instruções sobre como exibir esse conteúdo e instruções para carregar outros conteúdos, tais como imagens, de outras fontes. Ele se vincula a arquivos CSS (folhas de estilo) e a bibliotecas JavaScript com instruções adicionais. O navegador pega esse código, interpreta-o e exibe a página web resultante.

Na maioria dos navegadores, é possível visualizar o arquivo HTML que o navegador está interpretando clicando com o botão direito do mouse em qualquer página web e selecionando "Exibir código fonte da página" no menu suspenso. O arquivo HTML será então aberto em uma nova aba. O texto do arquivo começará quase sempre com "<!DOCTYPE html>".