E1 · Celular e reduzir
5 minRode "verificar no celular e com reduzir movimento".
Pronto quando: celular: frames-v (filme vertical), reduzir movimento: parado e duas vezes saída: 0.
Aula 7 · 16 min
Celular, peso e "reduzir movimento": o site que abre rápido
Muita gente abre a página no celular em pé, com rede de celular, e algumas pessoas pediram ao sistema menos movimento. Um filme horizontal cortado na tela vertical perde o assunto; um filme que anda à força incomoda quem pediu para parar. Você confere a página no celular de 390 px, com reduzir movimento, e corta o peso do filme vertical.
Começar a aula
Nesta aula você vai
- 1Filme vertical (frames-v/) e encaixe por fração de corte, em vez de cobrir sempre
- 2prefers-reduced-motion e a chave Parado / Ligado / Raio-X
- 3Cortar o peso do celular sem tirar quadros
- 4O que é deste curso e o que é da Formação inemaSEO
Objetivo: conferir no celular de 390 px, com reduzir movimento e no primeiro carregamento, que a página abre rápido e não força o movimento.
01O que muda no celular
Clique em cada etapa.
Clique em cada bloco do diagrama para ver o que ele faz.
Velocidade medida em rede real, Core Web Vitals e PageSpeed são da Formação inemaSEO. Aqui: o peso do filme e o movimento.
02Celular e reduzir movimento
Os dois modos do verificador na página do kit.
Terminal · verificar no celular e com reduzir movimento
K=~/projetos/formacao-cinema-ia-sites-v72/kit
E=${TMPDIR:-/tmp}/ensaio-sites/a7; rm -rf "$E"; mkdir -p "$E"
node "$K/scripts/servir.mjs" "$K/site" > "$E/url.txt" & S=$!
until U=$(cat "$E/url.txt") && [ -n "$U" ] && curl -s -o /dev/null "$U"; do sleep 0.3; done
node "$K/scripts/verificar.mjs" "$U" --celular; echo "saída: $?"
node "$K/scripts/verificar.mjs" "$U" --reduzir | tail -2; echo "saída: ${PIPESTATUS[0]}"
kill $STrecho · kit/site/site.css
html.parado .filme { height: auto; }
html.parado .palco { position: relative; height: auto; padding: 62vh 0 48px; background-size: 100% 60vh; background-position: top center; }
html.parado #tela { height: 60vh; bottom: auto; }
html.parado .batida { position: static; opacity: 1 !important; transform: none !important; max-width: 680px; padding: 24px clamp(16px, 6vw, 80px) 0; }Terminal · erro comum: ignorar reduzir movimento
K=~/projetos/formacao-cinema-ia-sites-v72/kit
E=${TMPDIR:-/tmp}/ensaio-sites/a7; mkdir -p "$E"
node "$K/scripts/servir.mjs" "$K/site" > "$E/url.txt" & S=$!
until U=$(cat "$E/url.txt") && [ -n "$U" ] && curl -s -o /dev/null "$U"; do sleep 0.3; done
node "$K/scripts/verificar.mjs" "${U}erro-sem-reduzir.html" --reduzir | tail -1; echo "saída: ${PIPESTATUS[0]}"
kill $SExemplo do repositório
Chromium 156.0.8078.4 (Playwright 1.64.0) · 390×844 quadros: 144 (frames-v/) rolagem 0% → quadro 0 · tela pintada rolagem 50% → quadro 72 · tela pintada rolagem 100% → quadro 143 · tela pintada transbordo horizontal: não celular: frames-v (filme vertical) · 390×844 OK: 3 de 3 posições saída: 0 reduzir movimento: parado (quadro 0 em 0%, 50% e 100%) OK: 3 de 3 posições saída: 0
No celular, a página escolheu frames-v; com reduzir movimento, o quadro ficou em 0 nas três posições.
FALHA: com reduzir movimento o filme ainda anda (quadro 0 → 72 → 143) saída: 1
A cópia erro-sem-reduzir.html desliga a opção reduzir: o filme anda mesmo com o sistema pedindo menos movimento.
03O celular pesava mais que o computador
Na aula 1, o celular baixava 3,52 MB e o computador 1,54 MB. Refazer só o filme vertical com 600 px e -q:v 8 resolve, sem tirar quadros.
Terminal · refazer o filme vertical mais leve
K=~/projetos/formacao-cinema-ia-sites-v72/kit
E=${TMPDIR:-/tmp}/ensaio-sites/a7; rm -rf "$E/site"; cp -r "$K/site" "$E/site"
python3 "$K/scripts/peso.py" "$E/site" --orcamento 3 | grep -E "^celular|orçamento"
# o filme vertical de novo: 600 px de largura e JPEG -q:v 8 (era 720 px e 6)
bash "$K/scripts/clipe.sh" "$K/exemplos/lente.jpg" "$E/v.mp4" 6 1.0 1.35 1080x1920
bash "$K/scripts/quadros.sh" "$E/v.mp4" "$E/site/frames-v" 600 8
python3 "$K/scripts/peso.py" "$E/site" --orcamento 3 --inicial 0.5 | grep -E "^celular|orçamento|teto"; echo "saída: ${PIPESTATUS[0]}"Exemplo do repositório
celular: tudo 3,52 MB · primeira pintura 0,06 MB · rascunho (1 em 8) 0,47 MB visitante mais pesado 3,52 MB · orçamento 3,0 MB: ACIMA do orçamento v.mp4: 6,0 s · 24 fps · 1080×1920 QUADROS: 144 · 600×1066 · 2,2 MB · 24 fps celular: tudo 2,28 MB · primeira pintura 0,05 MB · rascunho (1 em 8) 0,32 MB primeira pintura 0,05 MB · teto 0,5 MB: DENTRO visitante mais pesado 2,28 MB · orçamento 3,0 MB: DENTRO do orçamento saída: 0
Os mesmos 144 quadros, de 3,52 para 2,28 MB no celular. Olhe o resultado no celular antes de aceitar: -q:v 8 é o limite que o curso usa.
04Três regras do celular
Das duas skills e do que o verificador mede.
1. Filme próprio
Celular em pé ganha filme vertical: clipe 9:16 do gerador ou, no ensaio, o clipe.sh com 1080x1920.
Sem frames-v/, o kit cai no horizontal cobrindo a tela.
2. Peso próprio
Meça o celular separado (peso.py já faz) e dê a ele o orçamento mais apertado.
Corte em largura e -q:v antes de tirar quadros.
3. Movimento opcional
Reduzir movimento ligado = filme parado e texto legível, sem rolagem presa.
A chave na tela deixa a escolha também para quem não mexeu no sistema.
05Prática
Celular, reduzir e peso, conferidos.
E2 · O erro
5 minRode o verificador com --reduzir em erro-sem-reduzir.html (bloco "erro comum: ignorar reduzir movimento"). No navegador do computador, ligue "reduzir movimento" do sistema e abra a página do kit e a cópia com erro.
Pronto quando: FALHA: com reduzir movimento o filme ainda anda e saída: 1.
E3 · Celular leve
10 minRode "refazer o filme vertical mais leve". Depois tente 540 px com -q:v 7 e compare.
Pronto quando: visitante mais pesado 2,28 MB · orçamento 3,0 MB: DENTRO do orçamento e saída: 0.
06Teste da aula
A explicação aparece depois da sua resposta.
Pergunta 1 de 4
Um filme 16:9 cobrindo a tela de um celular em pé (390×844). O que acontece?
Correto
Cobrir uma tela vertical com um quadro largo corta os lados. Por isso o filme vertical (frames-v/) e o encaixe por fração de corte.Não é essa
Cobrir uma tela vertical com um quadro largo corta os lados. Por isso o filme vertical (frames-v/) e o encaixe por fração de corte.Rever: O que muda no celularPergunta 2 de 4
A pessoa ligou "reduzir movimento" no sistema. O que a página do kit faz?
Correto
Um filme preso à rolagem é movimento disparado pela pessoa, e quem pediu menos movimento recebe a versão parada. O verificador confere o mesmo quadro em 0%, 50% e 100%.Não é essa
Um filme preso à rolagem é movimento disparado pela pessoa, e quem pediu menos movimento recebe a versão parada. O verificador confere o mesmo quadro em 0%, 50% e 100%.Rever: O que muda no celularPergunta 3 de 4
O celular está 1,2 MB acima do orçamento. Qual é o primeiro ajuste?
Correto
Largura e -q:v tiram peso sem virar apresentação de slides. No ensaio: 720 px e -q:v 6 = 3,52 MB; 600 px e -q:v 8 = 2,28 MB, os mesmos 144 quadros.Não é essa
Largura e -q:v tiram peso sem virar apresentação de slides. No ensaio: 720 px e -q:v 6 = 3,52 MB; 600 px e -q:v 8 = 2,28 MB, os mesmos 144 quadros.Rever: Celular e reduzir movimentoPergunta 4 de 4
Onde aprender a medir Core Web Vitals e a velocidade do site para busca?
Correto
Este curso mede o peso do filme e o movimento. Desempenho para busca tem dono: a Formação inemaSEO.Não é essa
Este curso mede o peso do filme e o movimento. Desempenho para busca tem dono: a Formação inemaSEO.Rever: O que muda no celularTeste concluído
Você acertou {a} de {n}. Acertando todas, a aula é marcada como concluída.Escolha uma alternativa. A explicação aparece depois da sua tentativa.
07Em três frases
VerticalCelular em pé ganha frames-v/ e encaixe por fração de corte.
ReduzirFilme parado, texto legível, chave na tela.
PesoCelular medido à parte; largura e -q:v antes de tirar quadros.