Guia 05 · Entenda a web

Do clique à tela.

Entre tocar num link e ver o site, acontece uma viagem de várias etapas. Esta página mede cada uma delas agora, no seu aparelho, e mostra o que deixa um site rápido ou lento.

01
A viagem

Seis etapas, medidas agora no seu aparelho.

Seu navegador anota quanto tempo levou cada parte do carregamento desta página. Os números abaixo são os seus: mudam com a sua internet, o seu aparelho e a distância até o servidor.

medido neste aparelho

–até a página ficar pronta para você

01–

Endereço

O navegador descobre em que servidor o site mora, como achar um nome na agenda.

02–

Conexão segura

Abre um canal criptografado com o servidor. É o cadeado na barra de endereço.

03–

Espera do servidor

O servidor recebe o pedido e prepara a resposta. Pesa a distância e a hospedagem.

04–

Download

A página viaja até você em pacotes. Quanto mais leve, mais rápido.

05–

Montagem

O navegador lê o HTML, aplica o visual e roda os scripts para desenhar a tela.

06–

Acabamento

Fontes e imagens terminam de chegar e a página fica completa.

Viu algum 0 ms? Quer dizer que o navegador reaproveitou algo que já tinha, como o endereço guardado ou uma conexão aberta. Esses números são medidos pelo seu navegador e não saem dele.

02
Arquivos

Uma página é feita de vários arquivos.

Para abrir esta página, o navegador buscou textos, estilos, scripts, fontes e imagens. Cada um tem um peso. Somados, dizem quanto da sua internet o site usa.

–KB no total

Arquivos
–
Vieram do cache
–
Uma foto de celular
~ 3.000 KB

    Comprimido é o tamanho que viaja pela rede. Cache é a cópia que o navegador guarda: na segunda visita, quase nada precisa ser baixado de novo.

    03
    Core Web Vitals

    Três números que o Google usa para medir experiência.

    O Google mede, em visitas reais, quanto um site demora para mostrar o principal, para reagir a um toque e o quanto ele pula enquanto carrega. Aqui estão os seus, desta visita.

    LCP–

    –

    Quando o principal aparece

    Tempo até o maior elemento da tela, como o título ou uma imagem, ser desenhado.

    Bom até 2,5 sRuim acima de 4 s

    INP–

    –

    Quanto demora para reagir

    Tempo entre um toque ou clique e a tela responder. Toque nos botões abaixo para medir.

    Bom até 200 msRuim acima de 500 ms

    CLS–

    –

    O quanto a página pula

    Soma dos saltos de layout inesperados, quando um texto muda de lugar enquanto você lê.

    Bom até 0,1Ruim acima de 0,25

    Teste a reação

    Compare um clique normal com um clique num site travado, que ocupa o processador por 350 ms antes de responder.

    Último toque: –

    O Google usa os dados de visitas reais de quem usa o Chrome, somados ao longo de 28 dias. Uma medição só, como esta, dá uma ideia, não a nota oficial. Alguns navegadores, como o Safari, ainda não medem todos esses números.

    04
    Por que é lento

    Seis motivos, quase sempre os mesmos.

    Site lento perde visita: muita gente desiste se a página demora a aparecer no celular. A boa notícia é que as causas se repetem e têm solução.

    01 · Imagens

    Fotos pesadas demais

    Uma foto direto do celular tem de 3 a 5 MB. Redimensionada e em WebP ou AVIF, cai para menos de 200 KB, sem diferença visível.

    02 · Scripts

    JavaScript demais

    Cada script precisa ser baixado, lido e executado. Em celulares mais simples, isso trava a tela e piora o INP.

    03 · Servidor

    Servidor longe ou lento

    Se o servidor demora para responder, nada mais começa. Cache e servidores perto de quem visita encurtam a espera.

    04 · Terceiros

    Coisas de fora

    Chat, pixels de anúncio, mapas e vídeos incorporados somam segundos. Carregue só quando forem usados.

    05 · Cache

    Nada fica guardado

    Sem regras de cache, o navegador baixa tudo de novo a cada visita, até o que não mudou desde ontem.

    06 · Layout

    Página que pula

    Imagens e anúncios sem espaço reservado empurram o texto enquanto carregam. É o que o CLS mede.

    Este siteFeito em HTML, CSS e JavaScript puros, sem framework, com fontes próprias e animações que pausam fora da tela. Os números lá em cima são a prova.

    +
    Entenda a IA

    Nove guias curtos, sem jargão.

    Cada guia explica uma parte da IA e da web com algo para você testar. Tudo roda no seu navegador.

    1. 01Como uma IA respondeDa pergunta à resposta, peça por peça, com a sua própria frase.
    2. 02Anatomia de um bom promptComo pedir para a IA e receber respostas melhores.
    3. 03Glossário de IA25 termos de IA em uma frase e um exemplo do dia a dia.
    4. 04IA com segurançaO que não colar numa IA e como perceber quando ela inventa.
    5. 05Do clique à telaO que acontece ao abrir um site, medido no seu aparelho.
    6. 06Agentes de IAComo uma IA planeja, usa ferramentas e confere o próprio trabalho.
    7. 07Golpes com IAVoz clonada, vídeo falso e os sinais que entregam o golpe.
    8. 08Como a IA cria imagensDo ruído à imagem, e como reconhecer uma imagem gerada.
    9. 09Como o Google acha um siteRastrear, indexar e aparecer no resultado da busca.
    Feito por Mateus Paiva · Head of AI no Notazz

    Um site rápido é respeito por quem visita.

    Volte ao começo da série ou veja como eu construo sites e sistemas assim.

    Próximo guia: agentes LinkedIn Ver o portfólio