Web Core: CLS, LCP e FID

Tudo bem?

O Search Console está apontando que na versão mobile estamos com as métricas de CLS, LCP e FID acima do recomendável.

Estamos utilizando o layout padrão, somente com GA e Pixel de scripts externos.

Analisamos aqui e vimos que precisamos otimizar as imagens de banners mobile, pois estamos usando as mesmas do desk. Já estamos providenciando.

Mas mesmo páginas de produtos, que não tem banner, estão apresentando o problema.

Há alguma coisa que podemos fazer para otimiza-las?

Obrigado!

Tiago

Boa tarde @Vinicius (ou Thiago?! :grinning_face_with_smiling_eyes: ),

Pelo Google Lighthouse o principal problema na sua home o principal problema são os banners mesmo, é interessante que você use WebP nas imagens dos banners (as fotos de produtos são transformadas automaticamente para WebP, mas os banners no CMS não) ou pelo menos tente otimizá-las no TinyPNG, fixando isso podemos fazer mais um teste e ver onde mais podemos melhorar.

Na sua página de produto ficou evidente alguns pontos que conseguimos otimizar em widgets padrão mesmo, vou fazer isso do nosso lado e var dar uma melhorada boa, te confirmo depois e fazemos novos testes.

Tem uma anotação Serve static assets with an efficient cache policy que vai ser resolvida quando você apontar seu domínio próprio.


Notas de rodapé

É viável melhorarmos um bocado esse score com as alterações que mencionei, mas em e-commerce “real” é quase impossível performar realmente bem no Lighthouse (mais do que 80), raramente você vai ver isso em uma loja (é bem mais fácil em blogs, sites de notícias…), por causa da quantidade de imagens, complexidade da aplicação e principalmente scripts de terceiros (pixel, analytics, popups e afins).

Na maioria das lojas (inclusive as maiores) você vai ver uma pontuação abaixo de 20 para performance em mobile no report do Lighthouse, em casos piores de algumas lojas (e plataformas) o Lighthouse nem consegue finalizar o preview e retornar um report (:sweat_smile:).

Então por mais que a gente entregue um template padrão com score acima de 90, para manter isso você tem que tomar bastante cuidado com todo conteúdo que for adicionar (especialmente imagens e fontes) e se for usar scripts e ferramentas externas (geralmente faz parde da operação da loja) vai precisar de um fine-tune de uma agência especializada porque quase sempre esses addons não vêm nem um pouco otimizados, muitas vezes isso não é viável e vai ser melhor você aceitar um score não tão legal por enquanto.

Nós reduzimos o máximo possível o impacto do template padrão, mas sabemos que na prática as lojas vão adicionar assets não tão otimizados quanto os que nós produzimos, a gente entrega um padrão com o melhor score e o mínimo de dependências possível para que o lojista possa dar uma estragadinha e mesmo assim continue com um score legal :+1:

3 curtidas

Legal, Leonardo!

Vamos fazer a lição de casa aqui com os banners também!

Concordo que em ecommerce é bem mais complicado termos uma nota alta como em sites institucionais e blogs, mas vamos sempre no limite né!

Aqui pesamos bem o quanto vale adicionar uma funcionalidade nova com um script não otimizado x manter a performance alta. Pela nossa experiência em outros ecommerces/plataformas faz mais sentido ter menos funcionalidades e mais performance, pois o ganho na taxa de conversão e mesmo SEO é maior.

Muito obrigado pelo retorno, abs!

2 curtidas

Boa noite pessoal,

Como prometi aqui, melhoramos alguns pontos que foram apontados pelo Lighthouse na sua página causados pelos widgets de Detalhes do produto e Notificação de ofertas e estoque:

Acho que aí eu me equivoquei, você já está com um domínio próprio, certo? O problema é que ainda apontado para o CDN que usávamos por padrão antigamente, quando você tiver dispnibilidade fazemos o novo deploy e indicamos algumas alterações que devem ser feitas no DNS do domínio, é bem tranquilo e não tem downtime (nem de SSL).

Bom dia, tudo bem?

Rodei testes do Lighthouse e GTMetrix que foram bem satisfatórios, mas um ponto deixou o CLS ruim.

Está acusando problema no endereço/telefone. Será que conseguimos ajustar isto?

Segue print e PDF do relatório do GTmetrix. Tanto do mobile quanto desktop.
GTmetrix-report-barradoce.netlify.app-20210823T090757-6pkFK7Me-full.pdf (543,6,KB)

Obrigado!


GTmetrix-report-barradoce.netlify.app-20210823T085615-AkvbmMar-full.pdf (444,8,KB)

Posso fazer um teste aqui pra colocar pra renderizar o html direto?

Modifiquei e fiz um teste:

1 curtida

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?