Web Core: CLS, LCP e FID

Excelente, @Matheus ! Muito obrigado!

1 curtida

De nada! Muito obrigado pelas sugestões

1 curtida

@Matheus tudo bem?

Rodei mais alguns testes do PageSpeed na Home, Categoria e Produto.

Para a versão desktop estão todas muito boas, praticamente nota máxima.

No mobile temos alguns apontamentos de melhoria nas três páginas com notas “críticas” no Web Core Vitals.

Há algo que eu possa otimizar do lado de cá, ou alguma coisa que ainda conseguem melhorar no código? A performance está bem acima da média dos sites, mas se conseguirmos aprovação no Web Core Vitals seria excelene para UX e rankeamento no Google.

Valeu!

https://developers.google.com/speed/pagespeed/insights/?hl=pt-br&url=https%3A%2F%2Fbarradoce.netlify.app%2F&tab=mobile

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fbarradoce.netlify.app%2Fnova%2Fcorantes-e-anilinas&tab=mobile

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fbarradoce.netlify.app%2Fproduto%2Fcorante-liquido-alimenticio-verde-mar10ml-arcolor&tab=mobile

Boa tarde, vou colocar a loja no Google Cloud, por fim irá pra lá, mas pra vermos se melhora um pouco mais

1 curtida

@Matheus , tudo bem?

Como te disse estamos nos ajustes finais para migrarmos. Rodei os testes do Lighthouse e estamos com ótimos resultados. No desktop temos nota 100 em todas as páginas!

No mobile estamos muito bem também, mas o Google fez as seguintes reprovações:

Home: LCP e CLS
Vitrine: LCP e CLS
Produto: CLS

O LCP não sei se é alguma imagem que subi. Tentei otimizar ao máximo, acho que não é o problema. O Google aponta somente reduzir o Java não utilizado.

CLS ele aponta alguns elementos.

Acha que conseguimos otimizar alguma coisa para termos aprovação nestes quesitos? Seria um ganho enorme em SEO.

Acredito que consiga rodar por ai, mas se precisar eu posso te mandar um print dos testes.

Muito obrigado!

Pessoal, tudo bem?

Conseguiram dar uma olhada neste ponto?

Obrigado,

Tiago

Bom dia, tudo bem?
Javascript não utilizado, não há como retirar. Porque já diminuímos ao máximo o javascript, mantendo ele em uma versão bem compacta. Ele tem uma avaliação um pouco ruim, nota amarela, justamente por ser bem reduzido. O que vi que pesou, era a imagem do carrosel de marcas ser png e não novo formato. Por enquanto, webp só não tem suporte completo no safari (parcial).

Ah, esta do carrossel acho que consigo otimizar! Estava vendo ontem, acho que ela pode ser um pouco menor.

Vou testar aqui e ver o que acontece.

Da questão do CLS, há algo que possamos fazer?

Obrigado!

O CLS piora muito por conta do aviso de LGPD, por ser um estilo popup. Mas ele por enquanto não tem o que fazer por conta da LGPD

2 curtidas

Boa tarde @Matheus. Tudo bem?

Seguinte, depois tenho que ver com você sobre essas questões também pois preciso melhorar a velocidade.

Obrigado e bom final de semana.

@matheus, otimizei as imagens de logos de marcas e conseguimos a nota máxima na home, tanto em mobile quanto desktop. Aparentemente o popup da LGPD não impacta negativamente.

Nas páginas de categoria e de produtos o CLS ainda é reprovado no mobile, e tem nota máxima do desktop. No report do Google (anexo) eles dão algumas diretrizes para sanar o que veem como problemas.

Pode dar uma olhada e ver se é algo que podemos adotar?

Obrigado!

Abs!
Categoria - Mobile.pdf (457,5,KB)
Produto - Mobile.pdf (723,9,KB)

O que dá pra melhorar no CLS é o que de fato impacta ele, as imagens. No caso CLS, envolve o quanto muda o site, conforme ele carrega. E as imagens são pontos essenciais, tanto no tamanho delas, quanto na dimensão. O problema agora apontado são as dimensões, isso é possível resolver, se todas tiverem o mesmo tamanho, pois assim ao aplicar um width e um height, as imagens não ficarão distorcidas

Você diz subirmos as imagens com o mesmo tamanho em pixels? Neste caso teríamos que subir com o tamanho que deve ser exibido na vitrine ou podemos subir todas com 2000 x 2000px por exemplo?

Ou se já definirmos um width e um height no código resolve?

Subir todas da mesma largura e altura ou todas em que a altura dividido pela largura dá o mesmo valor. Pode subir todas 1000 x 10000, ou 700 x 800, mas todas devem estar com largura e altura iguais das outras imagens

Se forem todas quadradas, podem ser de tamanhos variados?

1000 x 1000
500 x 500
800 x 800

Há alguma forma de identificarmos quais estão fora de proporção, sem abrir uma por uma?

Obrigado!

Sim, podem ser de tamanhos diferentes. Só manter a proporção. Posso colocar o código aqui, as que não estiverem, vão ficar ruins de visualização, ou achatado ou esticado

Ótimo, se puder me ajudar com isso agradeço!

Ai consigo ajustar tudo por aqui.

Obrigado!

@Matheus tudo bem?

Consegue me passar esse código para eu ver quais imagens não estão na mesma proporção?

E aproveitando, estes dias tenho rodado o Lighthouse, e as notas no mobile estão baixas (50 - 65). No desk está perfeito (98-100).

Isto na home, categorias e produtos. Dei uma revisada nas imagens que subi e parecem todas ok. Alguma coisa que eu consiga otimizar para o mobile?

Obrigado!

Boa tarde, no caso:

https://barra-doce.web.app/img/uploads/20220819_promoc-a-o-bicos-15off_mobile.jpg pode ser trocada por webp e podemos ali tentar colocar um lazy load nas imagens das marcas, pode ser que não fique tão bom ela recarregando aos poucos quando vista, mas posso colocar e vemos mais sobre.

@Matheus coloquei como webp. Mas na página de produtos e categorias tbm não estamos com nota boa, então acho que só isso vai resolver.

Vamos testar o lazy load para as marcas sim, por favor!