Informações sobre as métricas que medem a experiência de página segundo o Google. Apresentação de ferramentas de monitoramento e plugins WordPress para ajudar na otimização de seus sites.

1. Web Vitals

2. Performance

3. Grupo de trabalho sobre performance para
internet da W3C
● www.w3.org/webperf/
● Discutem métricas relacionadas à experiência do usuário dentro de uma
página;
● As perguntas chaves para ter certeza de que uma métrica é relevante para
usuário são:
1. Está acontecendo? (disponibilidade)
2. É útil? (conteúdo relevante)
3. É usável? (interação)
4. É agradável? (naturalidade na navegação)

4. Tipos de métricas
● Percepção de carregamento de página;
● Responsividade de carregamento;
● Responsividade em tempo de execução;
● Suavidade.

5. Experiência de página
● Preocupação do Google com esse assunto já existe há anos;
● Fatores que já influenciam no ranqueamento:
○ Velocidade de carregamento
○ Segurança
○ Amigável para dispositivos móveis
○ Pop-ups intrusivos
● Em maio de 2020, Google publica um artigo que explica como ele passa a
avaliar a experiência de página
○ https://developers.google.com/search/blog/2020/05/evaluating-page-exp
erience

6. Web Vitals
● Amigável a dispositivos móveis
● Navegação segura (sem malwares)
● HTTPS
● Pop-ups intrusivos (Intrusive interstitials)
● Core Web Vitals
○ LCP — Largest contentful paint
○ FID — First input delay
○ CLS — Cumulative layout shift

7. Dados de laboratório x dados de campo
● Dimensões utilizadas para medir se uma página possui uma boa experiência
de navegação;
● Dados de laboratório: Extraídas por ferramentas que fazem análise direta na
página. Bom para feedback rápido;
● Dados de laboratório: Extraído a partir da navegação dos usuários com
diversos perfis de conexão.

8. Métricas

9. LCP — Largest contentful paint
● Tempo em que foi renderizado a maior imagem ou bloco de texto na tela;
● Só é considerado a porção da página que o usuário está visualizando;
● Os elementos que estão cortados só é considerado a parte do elemento que
está visível.

11. LCP — Largest contentful paint
● Regras que precisam ser dada a atenção:
○ Elementos com overflow não visível só considera a parte visível;
○ No caso de imagens é considerado o tamanho que aparece na tela e não
os dimensões da imagem original;
○ Margem, padding ou bordas não são considerados como parte do
tamanho do elemento.

12. LCP — Largest contentful paint
● Os elementos considerados como LCP:
○ <img>
○ <image> dentro de um elemento <svg>
○ <video>
○ Elementos com imagem de fundo definida via CSS, com exceção de
gradientes
○ Elementos considerados block-level;
■ https://developer.mozilla.org/pt-BR/docs/Web/HTML/Elementos_blo
ck-level

13. LCP — Largest contentful paint
● Fatores que influenciam para uma métrica baixa:
○ Respostas lentas do servidor;
○ Bloqueio de renderização de JavaScript e CSS;
○ Tempo de carregamento de recursos;
○ Renderização no lado do cliente.

14. FID — First input delay
● Tempo entre fazer a primeira interação com a página e ela ser executada;
● O JavaScript funciona sobre uma única thread, ou seja, ele vai executar uma
ação por vez sem criar concorrência no processador. Quando uma ação é
disparada, ele precisa primeiro processar o que ele está executando até liberar
a thread para que a ação seja processada.

16. FID — First input delay
● Fatores que influenciam para uma métrica baixa:
○ Grande quantidade de arquivos JavaScript sendo carregados;
○ Código JavaScript não otimizados.

17. CLS — Cumulative layout shift
● Soma de todos os deslocamentos individuais inesperados durante a vida útil
da página;
● Quando maior o deslocamento, maior o CLS.

19. CLS — Cumulative layout shift
● Fórmula do CLS:
CLS = fração de impacto * fração de distância
● Fração de impacto: união da área do elemento no frame `n` com a área do
elemento no frame `n + 1`.
○ Se um elemento ocupa 50% da tela e é deslocado no próximo frame 25%
para baixo, a área da união dos dois elementos será de 75% da janela de
exibição. A fração de impacto nesse caso é 0.75.
● Fração de distância: distância de deslocamento do elemento instável entre os
dois frames.
○ No mesmo caso da fração de impacto, onde o elemento se deslocou 25%
na janela de exibição. A fração de distância é 0.25.

20. CLS — Cumulative layout shift
● Fração de impacto: 0.75
● Fração de distância: 0.25
● CLS = fração de impacto * fração de distância
● CLS = 0.75 * 0.25
● CLS = 0.1875

21. Otimizações

22. Entrega de recursos
● CDN;
● Minificação de CSS e JS;
● Cache;
● <link rel=”preconnect” />;
● <link rel="preload" />;
● Compressão (brotli ou gzip);

23. Imagens
● Servir imagens otimizadas para internet;
● Entregar imagens no tamanho correto;
● Utilizar lazy load para imagens fora da primeira dobra;
● Disponibilizar tamanho via atributos HTML ou CSS.

24. JavaScript
● Executar o mínimo possível de JavaScript;
● Adiar JavaScript não utilizado.

25. CSS
● Extrair CSS crítico;
● Adiar carregamento de CSS não-crítico;
● Carregar webfonts utilizando font-weight: swap.

26. Ferramentas

27. Lighthouse
[lab data]
developers.google.com/web/tools/lighthouse

28. Chrome User Experience Report
[field data]
developers.google.com/web/tools/chrome-user-experience-report

29. developers.google.com/web/tools/chrome-user-experience-report
UX Report do
wordpress.org
Chrome User Experience Report
[field data]

30. PageSpeed Insights
developers.google.com/speed/pagespeed/insights

31. Google Search Console
search.google.com/search-console

32. Web Vitals (Extensão Google Chrome)
chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma

33. GTmetrix
gtmetrix.com

34. Plugins WP

35. Escolham os melhores para seu contexto
● LiteSpeed Cache
● W3 Total Cache
● WP Super Cache
● Breeze
● WP Fastest Cache
● WP-Optimize
● WP-Sweep
● Clearfy
● Autoptimize
● EWWW Image Optimizer
● Imagify
● Hummingbird

36. WordPress Core Web Vitals Lab
github.com/aztecweb/wordpress-core-web-vitals-lab

37. aztecweb.net criacao.cc
@edpittol
pittol@aztecweb.net
Obrigado!