Pular para o conteúdo
murad.guide

A Web Aberta

Capítulo 36

Desempenho

7 min de leitura 1.265 palavras 2 gravuras

Esta é o capítulo 36 de 52 do volume Aprenda a Web. O projeto-fio é a Oficina Costeira, um coletivo fictício de design em João Pessoa. O exemplo está em exemplos/36-desempenho/. Em cada capítulo: leia, copie, mude uma coisa, preveja, recarregue e confira.

O que você vai aprender

Espera é desenho

Página lenta perde gente. No telefone a rede oscila. A Oficina Costeira é fictícia, mas o hábito vale: cada arquivo a mais é um pedido. Cada megabyte é tempo.

Antes de um efeito, pergunte se o HTML sozinho já conta a história. CSS no head. Script, quando existir neste volume, no fim do body e só se precisar. Este volume ainda é página estática.

Não publique o exercício. Meça na sua máquina. Ferramentas online de “Page Speed” pedem URL pública; aqui o laboratório é local.

Medir no navegador

Sirva a pasta curso:

python -m http.server 8769 --bind 127.0.0.1 --directory curso

Abra http://127.0.0.1:8769/exemplos/36-desempenho/. F12, aba Rede. Recarregue com cache desligado. Some o peso transferido e o número de pedidos.

Simule uma rede lenta no próprio painel. A marca SVG deve chegar rápido. Um JPG enorme trava o recorte da orla.

Copie o total em KB. Tire uma imagem que não aparece na página. Preveja menos um pedido. Recarregue e confira.

Erro comum: medir com file:// e achar que “está rápido”. Caminhos e cache mentem. Use 127.0.0.1.

Resumo dos conceitos: peso, imagem, wireframe

Orçamento do exercício

Um teto escrito evita “só mais um banner”. Exemplo honesto para este site de estudo:

Se estourar, corte. Não suba a qualidade do JPG “porque no desktop fica lindo”. O telefone na orla de João Pessoa (mesmo fictício) não baixa 4 MB de cartaz.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Início — Oficina Costeira</title>
    <link rel="stylesheet" href="assets/stylesheets/main.css">
  </head>
  <body>
    <main>
      <h1>Oficina Costeira</h1>
      <p>Coletivo fictício de design em João Pessoa.</p>
    </main>
  </body>
</html>

Esse HTML já é rápido. O peso entra nas fotos e nas fontes.

Técnicas básicas

Imagem certa no formato certo (capítulos 31 a 33). width e height no img para não empurrar o texto depois. SVG na marca. JPG na foto. CSS sem regras mortas. Sem arquivo main.css duplicado. Sem link quebrado: 404 também custa tempo.

img,
video,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

Não carregue a folha de um framework inteiro para três cartões. A Oficina usa main.css próprio.

Fonte da Web: cada peso (400, 700, itálico) é um arquivo. Segoe UI no body do exemplo já cobre o estudo.

Script no head sem defer trava a pintura. Este volume não pede JavaScript. Se um arquivo infografico.js existir no exemplo por herança do projeto-fio, confira se a home atual precisa dele. Pedido a menos é desempenho.

Links quebrados: cada 404 é tempo e ruído no Rede. Clique em todos os itens do menu depois de medir.

Do wireframe à página

O percurso curto:

  1. Wireframe: blocos e ordem, papel e HTML.
  2. Conteúdo real (fictício, mas completo) nas tags certas.
  3. CSS do fluxo: tipo, espaço, Flexbox ou Grid.
  4. Imagens só onde o conteúdo pede, já comprimidas.
  5. Efeito (hover, animação) por último, com redução de movimento.
  6. Medir, validar, teclado.

Pular para o visual “final” no editor gráfico e exportar dez PNGs de UI infla o pacote. Botão é CSS. Selo pode ser SVG. Foto é foto.

Mude um PNG de ícone por um ::before com content. Preveja um pedido a menos. Recarregue a Rede.

O que fica para depois

Minificar CSS, juntar arquivos e CDN ajudam em site publicado. Não são o primeiro passo e não exigem conta paga. Gzip no servidor de produção é papel de quem hospeda, não deste zip.

Não suba o exemplo para a nuvem “só para testar PageSpeed”. O painel Rede local já mostra o problema. Cloudflare e similares saem do recorte do aluno.

Do wireframe ao HTML: primeiro as regiões (header, main, footer). Depois o texto fictício completo. Depois a folha. Exportar dez fatias de um mockup e montar com img é o caminho inverso: peso sobe, semântica cai.

Um CSS de 200 linhas indentado é melhor, neste volume, que um arquivo minificado de 2000 regras copiadas. Tire o que a página não usa. Não “otimize” juntando tudo num único arquivo ilegível.

Confira: CSS no head, imagens com tamanho declarado, zero vídeo com autoplay. O vídeo de estudo da orla, se estiver na página, tem controls e não começa sozinho.

Mude um img sem width e height. Preveja o pulo do texto quando a marca carrega. Recarregue. Devolva os atributos.

Resumo dos conceitos: wireframe, imagem, peso

Erro comum: comprimir o HTML na mão até ficar ilegível. No volume o código permanece indentado. Minificação é etapa de publicação, não de aprendizagem.

Ordem do wireframe

No papel, a home da Oficina é três faixas: cabeçalho, recado, rodapé. No HTML, essas faixas nascem nesta ordem. CSS depois empurra visualmente, mas o Tab segue o arquivo.

  1. Escreva o HTML completo, lang="pt-BR", skip-link, main com id.
  2. Ligue main.css vazio o bastante para ler.
  3. Tipografia e espaço. Sem imagem ainda.
  4. Marca em SVG. Foto só se o texto pedir.
  5. Grid ou Flexbox. Media query no capítulo 38.
  6. Meça no Rede. Corte o que passou do orçamento.

Pular o passo 1 e “desenhar no Figma até ficar pronto” gera PNG de botão. Botão é CSS. A origem deste tópico era um walk-through longo em vídeo; aqui o percurso cabe numa lista que o aluno executa.

<header>…</header>
<main id="conteudo">
  <h1>Oficina Costeira</h1>
  <p>Coletivo fictício em João Pessoa.</p>
</main>
<footer>…</footer>

Copie só essa ossatura. Preveja uma página feia e rápida. Recarregue o Rede: poucos pedidos. Depois vista o CSS.

Fonte variável ou cinco arquivos WOFF2 matam o orçamento de 800 KB sem nenhuma foto. O exemplo usa fonte do sistema. Se um dia entrar uma família da Web, limite a um peso.

Vídeo autoplay e GIF em loop também estouram memória. O recorte da orla, se existir, espera o clique em controls.

Orçamento escrito no README do exemplo ajuda o eu do futuro. Uma linha basta: “home abaixo de 800 KB”. Quando a foto nova estourar, você sabe o que cortar.

O painel Rede mostra “transferido” e “tamanho do recurso”. Cache ligado mente. Desmarque cache enquanto medir. Recarregue duas vezes se o número parecer magia.

Atividades

  1. Por que medir desempenho em 127.0.0.1 e não em file://?
  2. Cite dois itens de um orçamento mínimo para a home da Oficina.
  3. Qual formato deve ter a marca em traço, pensando em peso e nitidez?
  4. Em que momento do percurso entram as animações?
  5. CDN paga é obrigatória neste volume?
  6. Por que declarar width e height no img ajuda o desempenho percebido?

Respostas comentadas

  1. O servidor local revela pedidos, caminhos e tamanhos como a Web. file:// mascara 404 e cache.
  2. Por exemplo: até 15 pedidos e até 800 KB; ou nenhuma imagem acima de 300 KB.
  3. SVG. Poucos bytes, escala em tela densa.
  4. Depois de conteúdo, layout e imagens. Efeito não segura a página.
  5. Não. O exercício roda na pasta e em 127.0.0.1.
  6. O navegador reserva o espaço. O texto não pula quando a marca chega. Isso é deslocamento de layout.

Referências

O arquivo completo

Referência do exemplo 36-desempenho, reproduzida aqui para que você possa conferir sem sair da página.

assets/javascript/simulacao.js

const form=document.querySelector("#simulacao");if(form){form.querySelector("button[type=submit]").disabled=false;form.addEventListener("submit",event=>{event.preventDefault();document.querySelector("#retorno").textContent="Simulação concluída. Nada foi enviado ou guardado.";});}