Apresentação Wordcamp Florianópolis 2021 Slides da apresentação

1. WORDCAMP FLORIPA 2021
CORE WEB
VITALS E
WORDPRESS
DANIEL PAZ

2. DANIEL PAZ
ESPECIALISTA EM PERFORMANCE
WORDPRESS
Trabalho com WordPress desde 2014, ja atuei em
mais de 100 projetos WordPress e centenas de Sites.
Sou idealizador do Curso de Otimização WordPress
com foco em Core Web Vitals
WP LIGHT.
Atuo como Head WordPress no Estratégia Concursos.

3. CONTEÚDO
CANAL NO YOUTUBE
bit.ly/wpaltaperformanceyt
E-BOOK GUIA DE OTIMIZAÇÃO DE
SITES WORDPRESS
bit.ly/guiawpo
APRESENTAÇÃO CORE WEB VITALS
E WORDPRESS
bit.ly/wcfloripacwv

4. CORE WEB VITALS
O principio do Core Web Vitals é tornar a experiência
de usuário em dispositivos móveis melhor e para isso
é imprescindivel um carregamento de página rápido
no mobile. Para isso existem métricas com padrões a
serem seguidos referentes a FCP, LCP e CLS.
PERFORMANCE
Aqui entram as boas práticas na construção do Site,
SSL torna-se algo obrigatório além de não mostrar
erros em console e até mesmo atributos necessários
para links externos afim de evitar problemas de
segurança. Entram também as atribuições de Links e
tamanho adequado de imagens.
MELHORES PRÁTICAS
Com o Core Web Vitals a acessibilidade passa a ser
um algo a mais, o foco agora não é somente nas
pessoas que utilizam computadores acessíveis para
deficientes visuais, mas o público em geral com
diferentes graus de deficiencia visual.
ACESSIBILIDADE
O básico de SEO é medido também no Core Web
Vitals, o Termo SEO é bastante complexo e dificil de
medir pois são mais de 250 fatores de rankeamento,
No Core Web Vitals o básico, descrição, titulos de
página, ordem de elementos de título passa a ser
obrigatório.
SEO

5. FERRAMENTAS DE ANÁLISE
DE LABORATÓRIO
Principal ferramenta de aferição trabalha com o motor
Lighthouse e fornece uma pontuação de 0 a 100 onde
o recomendado é que esteja acima de 90 pontos.
PAGE SPEED INSIGHTS - PSI
Ferramenta completa de aferição de performance
sendo possível identificar gargalos de servidor e
código e o quanto cada tipo de arquivo está pesando
no carregamento.
WEBPAGE TEST
Ferramenta criada com o Core Web Vitals para
medir os 4 fatores da atualização Core Web Vitals do
Google.
WEB.DEV
Ferramenta baseada também no Lighthouse que
possui pontuação própria onde a pontuação A é o
recomendado, muito utilizada para análise de
requisições e tempo de carregamento.
GT METRIX
WEB.DEV
DEVELOPERS.GOOGLE.COM/SPEED/PAGESPEED/INSIGHTS/
WWW.WEBPAGETEST.ORG/ GTMETRIX.COM/

7. DADOS DE CAMPO

8. FCP
Refere-se à primeira impressão de conteúdo, a
recomendação do Google é que esta impressão
ocorra em menos de 1,5 segundos, O FCP pode
estar relacionado diretamente ao TTFB que é o
tempo até o primeiro byte (Esta métrica tem
relação direta com o servidor de hospedagem).
LCP
LCP refere-se à primeira dobra de conteúdo,
nesta etapa imagens, vídeos, folhas de estilo e
scripts afetam no tempo de carregamento.
A recomendação do Google é que o
LCP ocorra em menos de 2,5 segundos.
CLS
Esta é uma métrica bem complexa de explicar e
o motivo disso é a forma como é realizado o
calculo o CLS ou Cumulative Layout Shift é
qualquer alteração de layout de forma que cause
instabilidade visual. A recomendação do Google é
que o CLS seja zero.
PERFORMANCE

10. ALÉM DESTAS MÉTRICAS,
PODEMOS CITAR
Relacionado direto à scripts Javascript esta
métrica é impossível de medir com ferramentas
de análise, o recomendado pelo Google é que o
FID seja abaixo de 100ms.
FID
Tempo total de carregamento, após todo o
conteúdo do DOM ser carregado incluindo
scripts externos mesmo que atrasados, este é o
tempo onde o site torna-se completamente
carregado.
TTI
Tempo que o site fica bloqueado devido a algum
erro de requisição, ou execução de script. A
recomendação é que o TBT seja zero.
TBT
É uma métrica que mede a rapidez com que o
conteúdo de uma página é visivelmente
preenchido durante o carregamento da página.
SPEED INDEX

11. MESMO SITES RÁPIDOS NÃO
ATINGEM TODAS AS MÉTRICAS
DO CORE WEB VITALS.
CORE WEB VITALS
NÃO É SÓ
PERFORMANCE!

12. ACESSIBILIDADE
Cores de textos muito próximas a cor do fundo causam um certo incomodo na leitura do
usuário, este problema pode ser visto aqui.
O Google recomenda que exista um grau de contraste entre o texto e a cor de fundo em
pelo menos 3. AAA
Este contraste pode ser medido usando o próprio navegador como vou mostrar agora
como também utilizando sites Online https://contrast-ratio.com/
Antes mesmo do Core Web Vitals, grandes portais e redes sociais já adotam esta prática
como por exemplo o Facebook, Linkedin, Instagram e Twitter.
CONTRASTE DE ELEMENTOS

14. ACESSIBILIDADE
Diria que este problema está também relacionado ao SEO e a estrutura da página, o
Google recomenda que todo conteúdo do seu site tenha uma ordem cronológica para
facilitar a leitura do usuário.
Para isso utilizamos tags HTML que são elas H1, H2, H3, H4, H5 e H6.
Sendo o recomendado uma Tag de Título H1 e as demais devem ser ordenadas
cronologicamente e de forma hierarquica como no exemplo abaixo:
ORDEM DOS ELEMENTOS DE TÍTULO
H1. Titulo
H2. Sub-titulo
H2. Sub-titulo
H3. Sub-titulo do sub-titulo
H2. Titulo
H3. Sub-titulo
H3. Sub-titulo
H4. Sub-titulo do sub-titulo

15. ACESSIBILIDADE
Geralmente usada para SEO, utilizar uma tag
descrevendo uma imagem é uma técnica que auxilia no
posicionamento na busca de imagens, e também auxilia
o usuário com deficiência visual a identificar o que está
sendo mostrado nas imagens.
Com o Core Web Vitals a falta de descritivos ALT em
imagens afeta a pontuação no fator de acessibilidade e
também no fator SEO do seu site.
IMAGENS PRECISAM POSSUIR UMA
TAG DE DESCRIÇÃO ALT

16. ACESSIBILIDADE
O texto do link (e texto alternativo para imagens, quando usado como links) que é
discernível, exclusivo e focalizável melhora a experiência de navegação para usuários de
leitores de tela.
Assim como as imagens, também precisamos descrever o conteúdo de nossos links, este
problema é comumente encontrado em icones com link para redes sociais.
LINKS PRECISAM DE UM TÍTULO
Para corrigir este problema precisamos de Links assertivos e/ou utilizar o atributo
title em links, a segunda opção é mais dificil de conseguir no WordPress.

17. SEO
É imprescindivel que o site tenha uma tag de titulo definida H1 e que também possua
uma meta-descrição. Para incluir a meta-descrição é necessário um plugin de SEO como
Rank Math e Yoast.
TITULOS DE PÁGINA E DESCRIÇÃO

18. SEO
Outra métrica controversa mas que tem mais a ver com acessibilidade do que SEO é o
tamanho de elementos adequados ao toque na tela, Este problema é muito comum e
não tem relação direta ao WordPress, a recomendação do Google é que exista um
espaço entre cada elemento para que ao tocar na tela o usuário não seja induzido ao
erro acessando uma página do qual não foi selecionada.
TAMANHO DE ELEMENTOS ADEQUADO AO TOQUE NA TELA

19. SEO
Um problema muito comum em Carrousel, Conteúdo em abas ou popup é a presença
de links sem atributos de direcionamento, o Google identifica isso como um problema
pois o link deve sempre enviar o usuário para determinado conteúdo.
TODOS OS LINKS SÃO NAVEGÁVEIS

20. SEO
E novamente no fator SEO é exigido que todas as
imagens tenham um descritivo, mas desta vez com
objetivo diferente, ajudar os robos na identificação
do tipo de conteúdo a ser indexado.
IMAGENS POSSUEM UMA
TAG DESCRITIVA

21. MELHORES
PRÁTICAS
Links para destinos de origem cruzada não são seguros.
Exibição de imagens com proporção incorreta
Exibição de imagens com resolução inadequada
Um dos principais problemas do WordPress principalmente para
usuários do Elementor são os problemas de melhores práticas.
Os mais comuns são:

22. PROBLEMAS
RELACIONADOS
A LINKS
Por recomendação do Google todos os
links que não são dentro do seu domínio
devem possuir atributos "noopener" e
"noreferrer".
LINKS EXTERNOS
https://br.wordpress.org/plugins/wp-external-links/

23. ESCOLHER UM TEMA COM BOA PERFORMANCE É ESSENCIAL PARA
COMEÇAR UM PROJETO DO JEITO CERTO.

25. Otimização de imagens
Uso de SVG
Redução na quantidade de CSS
Minificação e combinação de scripts
Atraso de scripts externos
Em caso de utilizar vídeos optar em substituir o
Uso de camadas de Cache
Uso de CDN
Iframe do vídeo pela capa e só carregar o vídeo ao clicar.
COMO MELHORAR O LCP

26. OTIMIZAÇÃO DE
IMAGENS
Formato de imagem adequado
Tamanho de imagem adequado
Qualidade 72DPI.
Qualidade: 75% - 85%.
Formato webP
Recomendação de sites de
Otimização:
https://tinypng.com/
https://squoosh.app/
Plugin de conversão para
WebP
WebpExpress
https://br.wordpress.org/plug
ins/webp-express/

28. 90% DOS PROBLEMAS DE
PERFORMANCE SÃO
RELACIONADOS A VÍDEOS
E IMAGENS PESADOS

29. EXEMPLO DO USO DO SQUOOSH

30. LITESPEED CACHE
Plugin de otimização e Cache para,
a excessão é que a parte de cache
funciona apenas em servidores
Litespeed.
MINIFICAÇÃO E COMBINAÇÃO
DE ARQUIVOS CSS E JS
WP FASTEST CACHE
Plugin simples para minificação,
compressão de arquivos e cache em
servidores Apache.
WP ROCKET
O mais famoso plugin pago de
otimização e cache do mercado.
ASSET CLEAN UP
Plugin para limpeza de arquivos
desnecessários e que também
minifica e combina arquivos.

31. GOOGLE TAG MANAGER
Recomendo concentrar todos os recursos externos utilizando o Google Tag
Manager.
ATRASO DE SCRIPTS
EXTERNOS
FLYING SCRIPTS
Este plugin permite atrasar o carregamento de scripts até o tempo definido com
base em palavras-chave contidas no script.

32. LAZY LOAD BY WP ROCKET
Plugin especifico para carregamento preguiçoso de imagens e iframes, este
plugin gratuito permite substituir os vídeos pela sua imagem de capa e só efetua
o carregamento de scripts quando o usuário interage via click.
OTIMIZAÇÃO DE VÍDEOS
DO YOUTUBE
WP ROCKET
Possui a função Lazy Load nas configurações do plugin, funcionando exatamente
como o plugin free, a diferença que na versão paga é possível incluir excessões
sem necessidade de modificação em códigos.

33. CACHE
O principal objetivo de um cache é aumentar a
performance da recuperação de dados ao
reduzir a necessidade de acessar a camada
subjacente mais lenta de armazenamento.
Resumindo ao utilizar o Cache, você não precisa
buscar o arquivo no servidor, aguardar a
resposta e então mostrar o arquivo, com o
cache a etapa é única, basta buscar o arquivo na
camada de cache, que o mesmo já estará pré-
carregado.
o Cache tem 3 níveis.
Navegador, CDN e servidor.

34. WP CLOUDFLARE SUPER PAGE CACHE
Se você utiliza o CloudFlare e tem dificuldade em fazer o cache de todos os
recursos do seu site como scripts e imagens, este plugin vai te ajudar, além de
ativar o cache em camada que possibilita armazenar uma cópia estática do seu
site no cache do CloudFlare de forma a melhorar o tempo de carregamento.
https://wordpress.org/plugins/wp-cloudflare-page-cache/
CDN CLOUDFLARE

35. O QUE ESPERAR
DO FUTURO ?
Temas mais rápidos e melhor codificados
Novas funcionalidades em plugins de otimização
Novas tecnologias à nivel de servidor como
o PHP Swoole