SlideShare uma empresa Scribd logo
1 de 35
Baixar para ler offline
WORDCAMP FLORIPA 2021
CORE WEB
VITALS E
WORDPRESS
DANIEL PAZ
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.
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
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
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/
DADOS DE CAMPO
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
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
MESMO SITES RÁPIDOS NÃO
ATINGEM TODAS AS MÉTRICAS
DO CORE WEB VITALS.
CORE WEB VITALS
NÃO É SÓ
PERFORMANCE!
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
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
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
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.
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
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
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
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
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:
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/
ESCOLHER UM TEMA COM BOA PERFORMANCE É ESSENCIAL PARA
COMEÇAR UM PROJETO DO JEITO CERTO.
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
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/
90% DOS PROBLEMAS DE
PERFORMANCE SÃO
RELACIONADOS A VÍDEOS
E IMAGENS PESADOS
EXEMPLO DO USO DO SQUOOSH
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.
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.
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.
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.
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
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

Mais conteúdo relacionado

Mais procurados

Otimização Front-end para WordPress
Otimização Front-end para WordPressOtimização Front-end para WordPress
Otimização Front-end para WordPressGuga Alves
 
Ebook - Check-list otimização WordPress
Ebook - Check-list otimização WordPressEbook - Check-list otimização WordPress
Ebook - Check-list otimização WordPressDaniel Paz
 
Wordpress SEO - Muito além de plugins
Wordpress SEO - Muito além de pluginsWordpress SEO - Muito além de plugins
Wordpress SEO - Muito além de pluginsFabio Ricotta
 
WordPress, muito além de um software para blogs
WordPress, muito além de um software para blogsWordPress, muito além de um software para blogs
WordPress, muito além de um software para blogsCayo Medeiros
 
Wordpress e suas funções
Wordpress e suas funçõesWordpress e suas funções
Wordpress e suas funçõesDaniel Marcos
 
Melhorando o desempenho do seu WordPress
Melhorando o desempenho do seu WordPressMelhorando o desempenho do seu WordPress
Melhorando o desempenho do seu WordPressJulian Fernandes
 
10 dicas de SEO para Wordpress
10 dicas de SEO para Wordpress10 dicas de SEO para Wordpress
10 dicas de SEO para WordpressRodrigo Simoni
 
WordPress para Gestores de Conteúdo - WordCamp BH 2015
WordPress para Gestores de Conteúdo - WordCamp BH 2015WordPress para Gestores de Conteúdo - WordCamp BH 2015
WordPress para Gestores de Conteúdo - WordCamp BH 2015Nauweb
 
WordPress - Gerenciando Conteúdo
WordPress - Gerenciando ConteúdoWordPress - Gerenciando Conteúdo
WordPress - Gerenciando ConteúdoAbel Ribeiro
 
Otimizando seu Site para Alta Performance - ConaSearch
Otimizando seu Site para Alta Performance - ConaSearchOtimizando seu Site para Alta Performance - ConaSearch
Otimizando seu Site para Alta Performance - ConaSearchWilliam Rufino
 
Wordpress SEO - Plugins, conteúdo, engajamento e análise
Wordpress SEO - Plugins, conteúdo, engajamento e análiseWordpress SEO - Plugins, conteúdo, engajamento e análise
Wordpress SEO - Plugins, conteúdo, engajamento e análiseFabio Ricotta
 
WordPress SEO - SearchLabs 2010
WordPress SEO - SearchLabs 2010WordPress SEO - SearchLabs 2010
WordPress SEO - SearchLabs 2010Guga Alves
 
Wordpress, Guia/Manual do Publicador
Wordpress, Guia/Manual do PublicadorWordpress, Guia/Manual do Publicador
Wordpress, Guia/Manual do PublicadorRenato Vieira
 
Startups com WordPress - Tirando a sua ideia do papel
Startups com WordPress - Tirando a sua ideia do papelStartups com WordPress - Tirando a sua ideia do papel
Startups com WordPress - Tirando a sua ideia do papelLeonardo Velozo
 
Por que usar o WordPress - Conceitos e Aplicações
Por que usar o WordPress - Conceitos e AplicaçõesPor que usar o WordPress - Conceitos e Aplicações
Por que usar o WordPress - Conceitos e AplicaçõesGuga Alves
 
AMP - Accelarared Mobile Pages #SnetTalks2
AMP - Accelarared Mobile Pages #SnetTalks2AMP - Accelarared Mobile Pages #SnetTalks2
AMP - Accelarared Mobile Pages #SnetTalks2André Agostinho
 
Performance - Acelere seu site! Na web tempo é mais que dinheiro.
Performance - Acelere seu site! Na web tempo é mais que dinheiro.Performance - Acelere seu site! Na web tempo é mais que dinheiro.
Performance - Acelere seu site! Na web tempo é mais que dinheiro.Gustavo Corrêa Alves
 

Mais procurados (20)

Otimização Front-end para WordPress
Otimização Front-end para WordPressOtimização Front-end para WordPress
Otimização Front-end para WordPress
 
Ebook - Check-list otimização WordPress
Ebook - Check-list otimização WordPressEbook - Check-list otimização WordPress
Ebook - Check-list otimização WordPress
 
Wordpress SEO - Muito além de plugins
Wordpress SEO - Muito além de pluginsWordpress SEO - Muito além de plugins
Wordpress SEO - Muito além de plugins
 
WordPress, muito além de um software para blogs
WordPress, muito além de um software para blogsWordPress, muito além de um software para blogs
WordPress, muito além de um software para blogs
 
Wordpress e suas funções
Wordpress e suas funçõesWordpress e suas funções
Wordpress e suas funções
 
Melhorando o desempenho do seu WordPress
Melhorando o desempenho do seu WordPressMelhorando o desempenho do seu WordPress
Melhorando o desempenho do seu WordPress
 
10 dicas de SEO para Wordpress
10 dicas de SEO para Wordpress10 dicas de SEO para Wordpress
10 dicas de SEO para Wordpress
 
WordPress para Gestores de Conteúdo - WordCamp BH 2015
WordPress para Gestores de Conteúdo - WordCamp BH 2015WordPress para Gestores de Conteúdo - WordCamp BH 2015
WordPress para Gestores de Conteúdo - WordCamp BH 2015
 
WordPress - Gerenciando Conteúdo
WordPress - Gerenciando ConteúdoWordPress - Gerenciando Conteúdo
WordPress - Gerenciando Conteúdo
 
Otimizando seu Site para Alta Performance - ConaSearch
Otimizando seu Site para Alta Performance - ConaSearchOtimizando seu Site para Alta Performance - ConaSearch
Otimizando seu Site para Alta Performance - ConaSearch
 
Wordpress SEO - Plugins, conteúdo, engajamento e análise
Wordpress SEO - Plugins, conteúdo, engajamento e análiseWordpress SEO - Plugins, conteúdo, engajamento e análise
Wordpress SEO - Plugins, conteúdo, engajamento e análise
 
Wordpress basico
Wordpress basicoWordpress basico
Wordpress basico
 
WordPress SEO - SearchLabs 2010
WordPress SEO - SearchLabs 2010WordPress SEO - SearchLabs 2010
WordPress SEO - SearchLabs 2010
 
Wordpress, Guia/Manual do Publicador
Wordpress, Guia/Manual do PublicadorWordpress, Guia/Manual do Publicador
Wordpress, Guia/Manual do Publicador
 
Startups com WordPress - Tirando a sua ideia do papel
Startups com WordPress - Tirando a sua ideia do papelStartups com WordPress - Tirando a sua ideia do papel
Startups com WordPress - Tirando a sua ideia do papel
 
Wordpress
WordpressWordpress
Wordpress
 
Por que usar o WordPress - Conceitos e Aplicações
Por que usar o WordPress - Conceitos e AplicaçõesPor que usar o WordPress - Conceitos e Aplicações
Por que usar o WordPress - Conceitos e Aplicações
 
AMP - Accelarared Mobile Pages #SnetTalks2
AMP - Accelarared Mobile Pages #SnetTalks2AMP - Accelarared Mobile Pages #SnetTalks2
AMP - Accelarared Mobile Pages #SnetTalks2
 
Performance - Acelere seu site! Na web tempo é mais que dinheiro.
Performance - Acelere seu site! Na web tempo é mais que dinheiro.Performance - Acelere seu site! Na web tempo é mais que dinheiro.
Performance - Acelere seu site! Na web tempo é mais que dinheiro.
 
Como Criar Um Blog
Como Criar Um BlogComo Criar Um Blog
Como Criar Um Blog
 

Semelhante a WordCamp Floripa 2021 - Daniel - Core web vitals e WordPress

Otimizacao Front-End para WordPress - OlhoSEO 2013
Otimizacao Front-End para WordPress - OlhoSEO 2013Otimizacao Front-End para WordPress - OlhoSEO 2013
Otimizacao Front-End para WordPress - OlhoSEO 2013Guga Alves
 
SEO para WordPress - Semana de Comunicação Universidade Veiga de Almeida (Sec...
SEO para WordPress - Semana de Comunicação Universidade Veiga de Almeida (Sec...SEO para WordPress - Semana de Comunicação Universidade Veiga de Almeida (Sec...
SEO para WordPress - Semana de Comunicação Universidade Veiga de Almeida (Sec...Guga Alves
 
CHECKLIST SEO CONTEÚDO - Mario Melo
CHECKLIST SEO CONTEÚDO - Mario MeloCHECKLIST SEO CONTEÚDO - Mario Melo
CHECKLIST SEO CONTEÚDO - Mario MeloMario Melo
 
Growth Hacking SEO - TDC 2015
Growth Hacking SEO - TDC 2015Growth Hacking SEO - TDC 2015
Growth Hacking SEO - TDC 2015Roberto Grasiano
 
Criando e Usando Helpers
Criando e Usando HelpersCriando e Usando Helpers
Criando e Usando HelpersJoaoVagner
 
Wordpress - Gerenciamento de Blogs e sites - Aula 1
Wordpress - Gerenciamento de Blogs e sites - Aula 1Wordpress - Gerenciamento de Blogs e sites - Aula 1
Wordpress - Gerenciamento de Blogs e sites - Aula 1Saulo Matias
 
Palestra SEO para Desenvolvedores - TDC 2017
Palestra SEO para Desenvolvedores - TDC 2017Palestra SEO para Desenvolvedores - TDC 2017
Palestra SEO para Desenvolvedores - TDC 2017Patrícia Guaragna Souza
 
TDC2017 | POA Trilha Marketing Digital - SEO para Desenvolvedores
TDC2017 | POA Trilha Marketing Digital - SEO para DesenvolvedoresTDC2017 | POA Trilha Marketing Digital - SEO para Desenvolvedores
TDC2017 | POA Trilha Marketing Digital - SEO para Desenvolvedorestdc-globalcode
 
Seo para WordPress - II WP Meetup RJ
Seo para WordPress - II WP Meetup RJSeo para WordPress - II WP Meetup RJ
Seo para WordPress - II WP Meetup RJGuga Alves
 
Tele cine mozer
Tele cine mozerTele cine mozer
Tele cine mozerJBSO
 
The Ultimate Guide to Development in WordPress
The Ultimate Guide to Development in WordPressThe Ultimate Guide to Development in WordPress
The Ultimate Guide to Development in WordPressJackson F. de A. Mafra
 
Boas Práticas de programação WordPress
Boas Práticas de programação WordPressBoas Práticas de programação WordPress
Boas Práticas de programação WordPressThiago Mendes
 
Locaweb com Joomla!
Locaweb com Joomla!Locaweb com Joomla!
Locaweb com Joomla!Heric Tilly
 
PHP Papa-Léguas: Performance em PHP
PHP Papa-Léguas: Performance em PHPPHP Papa-Léguas: Performance em PHP
PHP Papa-Léguas: Performance em PHPFlávio Lisboa
 
Seo para WordPress - WordCamp SP 2013
Seo para WordPress - WordCamp SP 2013Seo para WordPress - WordCamp SP 2013
Seo para WordPress - WordCamp SP 2013Guga Alves
 
#DeveloperDay - Front-end API html5
#DeveloperDay - Front-end API html5#DeveloperDay - Front-end API html5
#DeveloperDay - Front-end API html5Leandro Santos
 
Joomla! Cms Poderoso e Flexivel (Gerenciamento de Sites)
Joomla!  Cms Poderoso e Flexivel (Gerenciamento de Sites)Joomla!  Cms Poderoso e Flexivel (Gerenciamento de Sites)
Joomla! Cms Poderoso e Flexivel (Gerenciamento de Sites)Marcio Okabe
 

Semelhante a WordCamp Floripa 2021 - Daniel - Core web vitals e WordPress (20)

Otimizacao Front-End para WordPress - OlhoSEO 2013
Otimizacao Front-End para WordPress - OlhoSEO 2013Otimizacao Front-End para WordPress - OlhoSEO 2013
Otimizacao Front-End para WordPress - OlhoSEO 2013
 
SEO para WordPress - Semana de Comunicação Universidade Veiga de Almeida (Sec...
SEO para WordPress - Semana de Comunicação Universidade Veiga de Almeida (Sec...SEO para WordPress - Semana de Comunicação Universidade Veiga de Almeida (Sec...
SEO para WordPress - Semana de Comunicação Universidade Veiga de Almeida (Sec...
 
CHECKLIST SEO CONTEÚDO - Mario Melo
CHECKLIST SEO CONTEÚDO - Mario MeloCHECKLIST SEO CONTEÚDO - Mario Melo
CHECKLIST SEO CONTEÚDO - Mario Melo
 
Growth Hacking SEO - TDC 2015
Growth Hacking SEO - TDC 2015Growth Hacking SEO - TDC 2015
Growth Hacking SEO - TDC 2015
 
Criando e Usando Helpers
Criando e Usando HelpersCriando e Usando Helpers
Criando e Usando Helpers
 
Wordpress - Gerenciamento de Blogs e sites - Aula 1
Wordpress - Gerenciamento de Blogs e sites - Aula 1Wordpress - Gerenciamento de Blogs e sites - Aula 1
Wordpress - Gerenciamento de Blogs e sites - Aula 1
 
Palestra SEO para Desenvolvedores - TDC 2017
Palestra SEO para Desenvolvedores - TDC 2017Palestra SEO para Desenvolvedores - TDC 2017
Palestra SEO para Desenvolvedores - TDC 2017
 
TDC2017 | POA Trilha Marketing Digital - SEO para Desenvolvedores
TDC2017 | POA Trilha Marketing Digital - SEO para DesenvolvedoresTDC2017 | POA Trilha Marketing Digital - SEO para Desenvolvedores
TDC2017 | POA Trilha Marketing Digital - SEO para Desenvolvedores
 
Blogger rapido
Blogger rapidoBlogger rapido
Blogger rapido
 
Wordpress
WordpressWordpress
Wordpress
 
Seo para WordPress - II WP Meetup RJ
Seo para WordPress - II WP Meetup RJSeo para WordPress - II WP Meetup RJ
Seo para WordPress - II WP Meetup RJ
 
Tele cine mozer
Tele cine mozerTele cine mozer
Tele cine mozer
 
Dicas de seo
Dicas de seoDicas de seo
Dicas de seo
 
The Ultimate Guide to Development in WordPress
The Ultimate Guide to Development in WordPressThe Ultimate Guide to Development in WordPress
The Ultimate Guide to Development in WordPress
 
Boas Práticas de programação WordPress
Boas Práticas de programação WordPressBoas Práticas de programação WordPress
Boas Práticas de programação WordPress
 
Locaweb com Joomla!
Locaweb com Joomla!Locaweb com Joomla!
Locaweb com Joomla!
 
PHP Papa-Léguas: Performance em PHP
PHP Papa-Léguas: Performance em PHPPHP Papa-Léguas: Performance em PHP
PHP Papa-Léguas: Performance em PHP
 
Seo para WordPress - WordCamp SP 2013
Seo para WordPress - WordCamp SP 2013Seo para WordPress - WordCamp SP 2013
Seo para WordPress - WordCamp SP 2013
 
#DeveloperDay - Front-end API html5
#DeveloperDay - Front-end API html5#DeveloperDay - Front-end API html5
#DeveloperDay - Front-end API html5
 
Joomla! Cms Poderoso e Flexivel (Gerenciamento de Sites)
Joomla!  Cms Poderoso e Flexivel (Gerenciamento de Sites)Joomla!  Cms Poderoso e Flexivel (Gerenciamento de Sites)
Joomla! Cms Poderoso e Flexivel (Gerenciamento de Sites)
 

Mais de WordCamp Floripa

WordCamp Floripa 2021 - Isreal - A proporcionalidade do crescimento em tecnol...
WordCamp Floripa 2021 - Isreal - A proporcionalidade do crescimento em tecnol...WordCamp Floripa 2021 - Isreal - A proporcionalidade do crescimento em tecnol...
WordCamp Floripa 2021 - Isreal - A proporcionalidade do crescimento em tecnol...WordCamp Floripa
 
WordCamp Floripa 2021 - Luciane Costa - Pare de escrever para o robô: conteúd...
WordCamp Floripa 2021 - Luciane Costa - Pare de escrever para o robô: conteúd...WordCamp Floripa 2021 - Luciane Costa - Pare de escrever para o robô: conteúd...
WordCamp Floripa 2021 - Luciane Costa - Pare de escrever para o robô: conteúd...WordCamp Floripa
 
WordCamp Floripa 2021 - Gabriel Cano - Sage Framework – O melhor do PHP em um...
WordCamp Floripa 2021 - Gabriel Cano - Sage Framework – O melhor do PHP em um...WordCamp Floripa 2021 - Gabriel Cano - Sage Framework – O melhor do PHP em um...
WordCamp Floripa 2021 - Gabriel Cano - Sage Framework – O melhor do PHP em um...WordCamp Floripa
 
WordCamp Floripa 2021 - Eliane - Seu site limita o acesso dos usuários? Como ...
WordCamp Floripa 2021 - Eliane - Seu site limita o acesso dos usuários? Como ...WordCamp Floripa 2021 - Eliane - Seu site limita o acesso dos usuários? Como ...
WordCamp Floripa 2021 - Eliane - Seu site limita o acesso dos usuários? Como ...WordCamp Floripa
 
WordCamp Floripa 2021 - Amilton Justino - É possível invadir um WordPress at...
WordCamp Floripa 2021 - Amilton Justino - É possível invadir um WordPress at...WordCamp Floripa 2021 - Amilton Justino - É possível invadir um WordPress at...
WordCamp Floripa 2021 - Amilton Justino - É possível invadir um WordPress at...WordCamp Floripa
 
WordCamp Floripa 2021 - David Arty - Marketing e WordPress
WordCamp Floripa 2021 - David Arty - Marketing e WordPressWordCamp Floripa 2021 - David Arty - Marketing e WordPress
WordCamp Floripa 2021 - David Arty - Marketing e WordPressWordCamp Floripa
 
WordCamp Floripa 2021 - Fernando Nilson - Análise de vulnerabilidade
WordCamp Floripa 2021 - Fernando Nilson - Análise de vulnerabilidadeWordCamp Floripa 2021 - Fernando Nilson - Análise de vulnerabilidade
WordCamp Floripa 2021 - Fernando Nilson - Análise de vulnerabilidadeWordCamp Floripa
 
Testes automatizados end-to-end com WordPress por Fabio Nas
Testes automatizados end-to-end com WordPress por Fabio NasTestes automatizados end-to-end com WordPress por Fabio Nas
Testes automatizados end-to-end com WordPress por Fabio NasWordCamp Floripa
 
Como empreender com WordPress por Daniel Pelicano
Como empreender com WordPress por Daniel PelicanoComo empreender com WordPress por Daniel Pelicano
Como empreender com WordPress por Daniel PelicanoWordCamp Floripa
 
Abertura 25º Meetup WordPress Floripa - Lucas Adiers Stefanello
Abertura 25º Meetup WordPress Floripa - Lucas Adiers StefanelloAbertura 25º Meetup WordPress Floripa - Lucas Adiers Stefanello
Abertura 25º Meetup WordPress Floripa - Lucas Adiers StefanelloWordCamp Floripa
 
WordPress 5.3: Adeus site builders por Felipe Figueiredo
WordPress 5.3: Adeus site builders por Felipe FigueiredoWordPress 5.3: Adeus site builders por Felipe Figueiredo
WordPress 5.3: Adeus site builders por Felipe FigueiredoWordCamp Floripa
 
O que não te contam sobre WordPress por Willian Ramos
O que não te contam sobre WordPress por Willian RamosO que não te contam sobre WordPress por Willian Ramos
O que não te contam sobre WordPress por Willian RamosWordCamp Floripa
 
Marketing Social: resultados de ações de impacto social nas empresas
Marketing Social: resultados de ações de impacto social nas empresasMarketing Social: resultados de ações de impacto social nas empresas
Marketing Social: resultados de ações de impacto social nas empresasWordCamp Floripa
 
Meetup WordPress Floripa - Criando tema filho com configuração de SEO e ferra...
Meetup WordPress Floripa - Criando tema filho com configuração de SEO e ferra...Meetup WordPress Floripa - Criando tema filho com configuração de SEO e ferra...
Meetup WordPress Floripa - Criando tema filho com configuração de SEO e ferra...WordCamp Floripa
 
Lucas Adiers Stefanello apresenta a abertura do WordCamp Floripa 2019
Lucas Adiers Stefanello apresenta a abertura do WordCamp Floripa 2019Lucas Adiers Stefanello apresenta a abertura do WordCamp Floripa 2019
Lucas Adiers Stefanello apresenta a abertura do WordCamp Floripa 2019WordCamp Floripa
 
Amilton Justino apresenta GDPR/LGPD - A Solução está nos Plugins?
Amilton Justino apresenta GDPR/LGPD - A Solução está nos Plugins?Amilton Justino apresenta GDPR/LGPD - A Solução está nos Plugins?
Amilton Justino apresenta GDPR/LGPD - A Solução está nos Plugins?WordCamp Floripa
 
Vitor Hugo Bastos Cardoso apresenta voando alto com WordPress: um guia prátic...
Vitor Hugo Bastos Cardoso apresenta voando alto com WordPress: um guia prátic...Vitor Hugo Bastos Cardoso apresenta voando alto com WordPress: um guia prátic...
Vitor Hugo Bastos Cardoso apresenta voando alto com WordPress: um guia prátic...WordCamp Floripa
 
Vinícius Lourenço apresenta WordPress como carro-chefe do seu negócio: desafi...
Vinícius Lourenço apresenta WordPress como carro-chefe do seu negócio: desafi...Vinícius Lourenço apresenta WordPress como carro-chefe do seu negócio: desafi...
Vinícius Lourenço apresenta WordPress como carro-chefe do seu negócio: desafi...WordCamp Floripa
 
Vagner Luis Soletti apresenta monitoramento de performance no WordPress: Um e...
Vagner Luis Soletti apresenta monitoramento de performance no WordPress: Um e...Vagner Luis Soletti apresenta monitoramento de performance no WordPress: Um e...
Vagner Luis Soletti apresenta monitoramento de performance no WordPress: Um e...WordCamp Floripa
 
Walker Leite apresenta usando o WordPress como backend de aplicação
Walker Leite apresenta usando o WordPress como backend de aplicaçãoWalker Leite apresenta usando o WordPress como backend de aplicação
Walker Leite apresenta usando o WordPress como backend de aplicaçãoWordCamp Floripa
 

Mais de WordCamp Floripa (20)

WordCamp Floripa 2021 - Isreal - A proporcionalidade do crescimento em tecnol...
WordCamp Floripa 2021 - Isreal - A proporcionalidade do crescimento em tecnol...WordCamp Floripa 2021 - Isreal - A proporcionalidade do crescimento em tecnol...
WordCamp Floripa 2021 - Isreal - A proporcionalidade do crescimento em tecnol...
 
WordCamp Floripa 2021 - Luciane Costa - Pare de escrever para o robô: conteúd...
WordCamp Floripa 2021 - Luciane Costa - Pare de escrever para o robô: conteúd...WordCamp Floripa 2021 - Luciane Costa - Pare de escrever para o robô: conteúd...
WordCamp Floripa 2021 - Luciane Costa - Pare de escrever para o robô: conteúd...
 
WordCamp Floripa 2021 - Gabriel Cano - Sage Framework – O melhor do PHP em um...
WordCamp Floripa 2021 - Gabriel Cano - Sage Framework – O melhor do PHP em um...WordCamp Floripa 2021 - Gabriel Cano - Sage Framework – O melhor do PHP em um...
WordCamp Floripa 2021 - Gabriel Cano - Sage Framework – O melhor do PHP em um...
 
WordCamp Floripa 2021 - Eliane - Seu site limita o acesso dos usuários? Como ...
WordCamp Floripa 2021 - Eliane - Seu site limita o acesso dos usuários? Como ...WordCamp Floripa 2021 - Eliane - Seu site limita o acesso dos usuários? Como ...
WordCamp Floripa 2021 - Eliane - Seu site limita o acesso dos usuários? Como ...
 
WordCamp Floripa 2021 - Amilton Justino - É possível invadir um WordPress at...
WordCamp Floripa 2021 - Amilton Justino - É possível invadir um WordPress at...WordCamp Floripa 2021 - Amilton Justino - É possível invadir um WordPress at...
WordCamp Floripa 2021 - Amilton Justino - É possível invadir um WordPress at...
 
WordCamp Floripa 2021 - David Arty - Marketing e WordPress
WordCamp Floripa 2021 - David Arty - Marketing e WordPressWordCamp Floripa 2021 - David Arty - Marketing e WordPress
WordCamp Floripa 2021 - David Arty - Marketing e WordPress
 
WordCamp Floripa 2021 - Fernando Nilson - Análise de vulnerabilidade
WordCamp Floripa 2021 - Fernando Nilson - Análise de vulnerabilidadeWordCamp Floripa 2021 - Fernando Nilson - Análise de vulnerabilidade
WordCamp Floripa 2021 - Fernando Nilson - Análise de vulnerabilidade
 
Testes automatizados end-to-end com WordPress por Fabio Nas
Testes automatizados end-to-end com WordPress por Fabio NasTestes automatizados end-to-end com WordPress por Fabio Nas
Testes automatizados end-to-end com WordPress por Fabio Nas
 
Como empreender com WordPress por Daniel Pelicano
Como empreender com WordPress por Daniel PelicanoComo empreender com WordPress por Daniel Pelicano
Como empreender com WordPress por Daniel Pelicano
 
Abertura 25º Meetup WordPress Floripa - Lucas Adiers Stefanello
Abertura 25º Meetup WordPress Floripa - Lucas Adiers StefanelloAbertura 25º Meetup WordPress Floripa - Lucas Adiers Stefanello
Abertura 25º Meetup WordPress Floripa - Lucas Adiers Stefanello
 
WordPress 5.3: Adeus site builders por Felipe Figueiredo
WordPress 5.3: Adeus site builders por Felipe FigueiredoWordPress 5.3: Adeus site builders por Felipe Figueiredo
WordPress 5.3: Adeus site builders por Felipe Figueiredo
 
O que não te contam sobre WordPress por Willian Ramos
O que não te contam sobre WordPress por Willian RamosO que não te contam sobre WordPress por Willian Ramos
O que não te contam sobre WordPress por Willian Ramos
 
Marketing Social: resultados de ações de impacto social nas empresas
Marketing Social: resultados de ações de impacto social nas empresasMarketing Social: resultados de ações de impacto social nas empresas
Marketing Social: resultados de ações de impacto social nas empresas
 
Meetup WordPress Floripa - Criando tema filho com configuração de SEO e ferra...
Meetup WordPress Floripa - Criando tema filho com configuração de SEO e ferra...Meetup WordPress Floripa - Criando tema filho com configuração de SEO e ferra...
Meetup WordPress Floripa - Criando tema filho com configuração de SEO e ferra...
 
Lucas Adiers Stefanello apresenta a abertura do WordCamp Floripa 2019
Lucas Adiers Stefanello apresenta a abertura do WordCamp Floripa 2019Lucas Adiers Stefanello apresenta a abertura do WordCamp Floripa 2019
Lucas Adiers Stefanello apresenta a abertura do WordCamp Floripa 2019
 
Amilton Justino apresenta GDPR/LGPD - A Solução está nos Plugins?
Amilton Justino apresenta GDPR/LGPD - A Solução está nos Plugins?Amilton Justino apresenta GDPR/LGPD - A Solução está nos Plugins?
Amilton Justino apresenta GDPR/LGPD - A Solução está nos Plugins?
 
Vitor Hugo Bastos Cardoso apresenta voando alto com WordPress: um guia prátic...
Vitor Hugo Bastos Cardoso apresenta voando alto com WordPress: um guia prátic...Vitor Hugo Bastos Cardoso apresenta voando alto com WordPress: um guia prátic...
Vitor Hugo Bastos Cardoso apresenta voando alto com WordPress: um guia prátic...
 
Vinícius Lourenço apresenta WordPress como carro-chefe do seu negócio: desafi...
Vinícius Lourenço apresenta WordPress como carro-chefe do seu negócio: desafi...Vinícius Lourenço apresenta WordPress como carro-chefe do seu negócio: desafi...
Vinícius Lourenço apresenta WordPress como carro-chefe do seu negócio: desafi...
 
Vagner Luis Soletti apresenta monitoramento de performance no WordPress: Um e...
Vagner Luis Soletti apresenta monitoramento de performance no WordPress: Um e...Vagner Luis Soletti apresenta monitoramento de performance no WordPress: Um e...
Vagner Luis Soletti apresenta monitoramento de performance no WordPress: Um e...
 
Walker Leite apresenta usando o WordPress como backend de aplicação
Walker Leite apresenta usando o WordPress como backend de aplicaçãoWalker Leite apresenta usando o WordPress como backend de aplicação
Walker Leite apresenta usando o WordPress como backend de aplicação
 

Último

Entrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo PagliusiEntrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo PagliusiPaulo Pagliusi, PhD, CISM
 
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdfFrom_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdfRodolpho Concurde
 
Apostila e caderno de exercicios de WORD
Apostila e caderno de exercicios de  WORDApostila e caderno de exercicios de  WORD
Apostila e caderno de exercicios de WORDRONDINELLYRAMOS1
 
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo PagliusiPalestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo PagliusiPaulo Pagliusi, PhD, CISM
 
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Dirceu Resende
 
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIAEAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIAMarcio Venturelli
 
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)Alessandro Almeida
 

Último (7)

Entrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo PagliusiEntrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo Pagliusi
 
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdfFrom_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
 
Apostila e caderno de exercicios de WORD
Apostila e caderno de exercicios de  WORDApostila e caderno de exercicios de  WORD
Apostila e caderno de exercicios de WORD
 
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo PagliusiPalestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
 
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
 
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIAEAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
 
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
 

WordCamp Floripa 2021 - Daniel - Core web vitals e WordPress

  • 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/
  • 6.
  • 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
  • 9.
  • 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
  • 13.
  • 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.
  • 24.
  • 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/
  • 27.
  • 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