Performance

Trabalhe numa cópia da pasta inicio/ desta etapa. Ela já abre ou executa com as instruções do README. Leia o código, mude uma coisa e anote sua previsão antes de recarregar. Compare com a referência na pasta da etapa. Se nada mudar, confira a extensão do arquivo, o arquivo salvo e o caminho aberto. Blocos adicionais do capítulo são experiências separadas; a pasta de referência contém o programa completo desta etapa.

Servidor já apareceu. Agora a Biblioteca da Ribeira volta ao HTML da página. Performance é o tempo até a pessoa ler. Uma página leve abre antes. Uma pesada faz esperar.

Pasta: exemplos/33-performance/. Abra index.html no navegador ou sirva a pasta curso em 127.0.0.1. Leia, copie, mude uma medida da imagem, preveja, recarregue e confira.

O que você vai aprender

• Dizer o que é performance na web, em linguagem simples.
• Ligar CSS no head para a pintura não “pular”.
• Dar width e height na imagem para o layout não tremer.
• Evitar JavaScript no caminho da primeira pintura.

O que é performance

Performance é quanto a página demora a ficar útil. Não é “parecer moderna”. É a visitante conseguir ler o título da Ribeira sem esperar um arquivo enorme.

Três camadas pesam:

• HTML: o documento precisa chegar inteiro para o navegador saber o que existe.
• CSS: o desenho. Sem a folha, o texto já pode aparecer; com a folha no head, a primeira pintura já vem com estilo.
• JavaScript: só rode o que a página precisa. Um script no head sem cuidado trava a pintura.

A “performance percebida” é a espera que a pessoa sente. Uma imagem sem tamanho faz o texto pular quando a foto chega. Isso irrita mesmo se o arquivo for pequeno.

Este volume não exige ferramenta paga de medição. As ferramentas de rede do próprio navegador bastam. Recarregue e veja o HTML, o CSS e a imagem.

HTML e CSS no head

O exemplo completo:

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Página leve</title>
    <link rel="stylesheet" href="leve.css">
  </head>
  <body>
    <h1>Página leve da Ribeira</h1>
    <p>CSS no <code>head</code>. Imagem com largura definida. Sem JavaScript bloqueando a pintura.</p>
    <img src="ribeira-fachada.png" width="800" height="427" alt="Fachada fictícia da biblioteca">
  </body>
</html>

O link do CSS está no head. O navegador busca leve.css cedo. A primeira pintura já usa Arial, a largura máxima e o fundo.

A folha:

body {
  font-family: Arial, sans-serif;
  max-width: 40rem;
  margin: 1.5rem auto;
  background: #f4f1ea;
  color: #1a1a1a;
}

Pare e experimente. Mova o link para o fim do body. Recarregue. Preveja um flash de texto sem estilo. Depois devolva o link ao head.

Erro comum: colocar um arquivo CSS enorme depois de três scripts no head. A pintura espera. Neste exemplo não há script. Mantenha assim.

Imagem com width e height

width="800" e height="427" avisam o espaço antes da foto baixar. O texto embaixo não sobe nem desce quando a imagem chega.

alt descreve a fachada fictícia. Sem alt, quem não vê a imagem perde o sentido.

Não precisa de imagem 4000 pixels para um cartão na tela. Arquivo menor chega antes.

Pare e experimente. Tire width e height. Recarregue com a rede das ferramentas do navegador (recarregar forçado). Preveja o salto do parágrafo. Recoloque os atributos.

JavaScript não entra nesta página de propósito. Se um dia você ligar um script, coloque no fim do body ou use defer. O capítulo 34 testa comportamento; esta testa espera.

Medir neste computador

Abra as ferramentas do navegador, aba Rede. Recarregue. Você deve ver o HTML, o leve.css e a imagem. Três arquivos. Nenhum script.

Se a imagem pesar muito mais que o HTML, o próximo corte é o arquivo da foto, não “mais framework”. Não precisa de painel pago para ver isso.

Servidor de estudo, se usar, só em 127.0.0.1. Dois cliques no index.html também valem nesta pasta.

Quando o CSS estiver no head e a imagem tiver tamanho e alt, avance.

Atividades

1. O que é performance neste capítulo, em uma frase?
2. Por que o link de leve.css fica no head?
3. O que width e height na img evitam?

Respostas comentadas

1. O tempo até a página ficar legível. HTML, CSS e imagem bem colocados diminuem a espera.
2. Para a primeira pintura já vir com estilo. CSS no fim do body deixa um flash de texto cru.
3. O pulo do layout quando a foto chega. O navegador reserva 800 por 427 antes do arquivo terminar.

O arquivo completo

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

index.html

<!DOCTYPE html>

<html lang="pt-BR">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<title>Página leve</title>
<link href="leve.css" rel="stylesheet"/>
<style>
/* Apoio de leitura, teclado e tela estreita. */
img{max-width:100%;height:auto} html {overflow-wrap:anywhere} main {min-width:0} input,textarea,select,canvas {max-width:100%;box-sizing:border-box} fieldset {min-width:0}
pre {max-width:100%;overflow:auto} :focus-visible {outline:3px solid #0f3d3e;outline-offset:3px}
.skip {position:absolute;top:-5rem;left:1rem;background:#0f3d3e;color:white;padding:.5rem;z-index:9}.skip:focus {top:.5rem}
table {max-width:100%} td,th {overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
</style></head>
<body><a class="skip" href="#conteudo">Pular para o conteúdo</a><main id="conteudo" tabindex="-1">
<h1>Página leve da Ribeira</h1>
<p>CSS no <code>head</code>. Imagem com largura definida. Sem JavaScript bloqueando a pintura.</p>
<img alt="Fachada fictícia da biblioteca" height="427" src="ribeira-fachada.png" width="800"/>
</main></body>
</html>

leve.css

body{font-family:Arial,sans-serif;max-width:40rem;margin:1.5rem auto;background:#f4f1ea;color:#1a1a1a}