Como otimizar as principais métricas da Web no Shopify

Há muitas informações on-line sobre como medir os Core Web Vitals e se o seu site está tendo uma pontuação boa ou ruim. Mas há muito poucos conselhos práticos sobre o que você precisa fazer para fazer melhorias, especificamente no Shopify.

Neste artigo, veremos exatamente como você pode melhorar sua pontuação de Core Web Vitals em sua loja da Shopify. Tentamos tornar o máximo possível dessas recomendações acionáveis ​​sem um desenvolvedor, mas algumas exigem implementação técnica especializada.

Vamos detalhar cada métrica essencial da Web, explicando quais fatores afetam seu desempenho e, em seguida, mostraremos como melhorar cada métrica CWV em qualquer loja da Shopify.

Clique nos títulos abaixo para ir direto para essa seção:

• Como os principais indicadores vitais da Web são calculados no Shopify
• Como melhorar o LCP no Shopify
• Como melhorar o CLS no Shopify
• Como melhorar o FID no Shopify
• Aplicativos principais da Web Vitals da Shopify

O que são os principais sinais vitais da Web

Vamos recapitular rapidamente o que são os Core Web Vitals.

Core Web Vitals são um conjunto de métricas que o Google usa para medir o desempenho da página da web e a experiência dos usuários. Para cada métrica, os URLs são marcados como "Verde - Bom", "Âmbar - Precisa melhorar" ou "Vermelho - Ruim".

As pontuações do Core Web Vitals têm um impacto direto nas classificações do mecanismo de pesquisa.

LCP - Maior exibição de conteúdo

Quanto tempo leva para o maior elemento da sua página renderizar na tela?

CLS - Mudança cumulativa de layout

Quanto o layout da página muda à medida que a página é carregada?

FID - Primeiro Atraso de Entrada

Quanto tempo leva para a página se tornar responsiva às interações?

Como os principais indicadores vitais da Web são calculados no Shopify

É importante entender como o Google calcula as pontuações do Core Web Vitals porque isso afeta como fazer melhorias significativas. Os dados do Core Web Vitals vêm de dados do CrUX, que medem o desempenho de visitantes reais do site usando o navegador Chrome. Isso é chamado de 'dados de campo'.

Para cada métrica CWV, há uma pontuação média mínima que você precisa atingir para não ser marcado como 'Ruim'. Isso se baseia nas pontuações médias registradas em grupos de páginas. É importante entender que seu site da Shopify não é pontuado em relação a uma métrica principal de sinais vitais da web; os URLs em seu site são.

Quando sua loja da Shopify falha em uma métrica de Core Web Vitals, o Search Console mostra uma amostra de URLs que foram afetados pelo problema. Isso ajuda você a restringir onde está o problema e aplicar a meta de melhoria. Antes de iniciar qualquer trabalho de otimização do Core Web Vitals em sua loja da Shopify, primeiro identifique quais áreas de melhoria serão mais impactantes. Não desperdice seu tempo em trabalhos que não produzirão um resultado positivo.

Dicas de otimização de métricas vitais da Web da Shopify

Core web vitals tem tudo a ver com a entrega de seu conteúdo e recursos mais importantes o mais rápido possível.

A otimização da velocidade da página não é uma coisa única. Sua organização precisa adotar uma cultura em que o impacto na velocidade da página seja levado em consideração em todas as tomadas de decisão. Para cada aprimoramento que você considera fazer em sua loja, considere qual será a compensação na velocidade da página.

Como melhorar o LCP no Shopify

LCP refere-se ao maior elemento em sua página e quanto tempo leva para o navegador carregar e renderizar esse elemento na tela. Normalmente, será uma imagem, mas também pode ser um elemento de texto.

Para melhorar o LCP em uma loja da Shopify, é importante entender os fatores que afetam o LCP. Existem quatro estágios que ocorrem para carregar seu elemento LCP.

O LCP trata de quanto tempo leva para o navegador da Web pintar/renderizar seu maior elemento na página. Carregar e pintar não são as mesmas coisas. Mesmo que seu elemento LCP seja otimizado para um tamanho de arquivo minúsculo, o LCP ainda pode demorar muito devido a:

• Atraso de Carregamento de Recursos. Demora muito para o navegador começar a baixar o elemento
• Atraso de renderização do elemento. Após o download do elemento LCP pelo navegador, demora muito para renderizar o elemento na página.

O insight aqui é que o LCP é mais do que apenas o tamanho do arquivo do seu maior elemento. É o tempo necessário para concluir o processo de 4 etapas acima. Para melhorar suas pontuações LCP, concentre-se em todo o processo de carregamento e renderização de seu elemento LCP.

Como encontrar o elemento LCP em qualquer página da Shopify

Para melhorar o LCP, você precisa saber qual elemento em uma página é o LCP. Isso é fácil no Shopify. Basta acessar o PageSpeed ​​Insights e analisar a URL para a qual você precisa encontrar o LCP. Quando o relatório terminar, role até o final e procure na seção 'Diagnóstico'. Haverá uma linha chamada 'Maior elemento de pintura de conteúdo'. Expanda para ver detalhes sobre qual elemento é o LCP nesta página.

Não preguiçoso no elemento LCP

Lazy loading é um método usado para carregar apenas um elemento quando ele se torna visível na viewport. Isso ajuda a acelerar o carregamento do conteúdo acima da dobra. Você não deve carregar lentamente seu elemento LCP porque isso atrasará a rapidez com que o navegador começa a baixar o elemento.

Nas lojas da Shopify, o elemento LCP em uma página de produto normalmente será a imagem principal do produto. Ou em uma postagem de blog, o elemento LCP provavelmente será uma imagem de cabeçalho de blog. Alguns temas da Shopify adicionam automaticamente o carregamento lento a todas as imagens, mesmo aquelas que aparecem acima da dobra. Revise cada um dos seus templates da Shopify e descubra qual é o elemento LCP. Se aparecer acima da dobra, verifique se o atributo abaixo não está incluído na tag HTML:

carregando="preguiçoso"

Pré-carregar o elemento LCP

Você pode usar rel=”preload” para dizer aos navegadores da web para baixar um recurso específico o mais rápido possível. Ao aplicar rel=”preload” em seu elemento LCP, o navegador priorizará o carregamento desse recurso na página.

Você mesmo pode fazer isso editando o código do tema. Para desenvolvedores de temas da Shopify, há um filtro que pode ser adicionado aos templates líquidos da Shopify que gerarão uma tag de pré-carregamento.

Usar imagens de última geração

Novos formatos de imagem, como WebP, são menores em tamanho de arquivo do que os formatos tradicionais, como JPG e PNG. Se o seu elemento LCP for uma imagem, usar um formato de imagem Nextgen irá acelerar o tempo de download. Sempre que possível, use imagens WebP, mas lembre-se de incluir um fallback para navegadores legados que não oferecem suporte a imagens de última geração.

Os novos temas da Shopify converterão automaticamente suas imagens em WebP e as exibirão nos navegadores apropriados.

Certifique-se de que o elemento LCP esteja incluído na resposta HTML inicial

Reduza o 'atraso de carregamento de recursos' certificando-se de que seu elemento LCP seja entregue na resposta HTML inicial. Se o elemento LCP for carregado na página por um recurso externo (como um script JS), levará mais tempo para o navegador iniciar o download do elemento LCP.

Se isso afeta sua loja da Shopify dependerá do tema da loja que você usa. Uma maneira rápida de testar isso é descobrir qual é o seu elemento LCP e, em seguida, visualizar a página com o JS desativado. Se o elemento LCP não for gerado na página HTML, isso significa que ele não foi entregue na resposta HTML inicial.

Elimine recursos de bloqueio de renderização

O conselho 'Eliminar recursos de bloqueio de renderização' existe há muito tempo. Mas o que isso realmente significa? Alguns recursos, como scripts e folhas de estilo, bloqueiam a renderização de uma página da Web. Quando um navegador descobre um recurso, ele para de baixar a página e, em vez disso, baixa e executa esse recurso. Isso atrasa a renderização da página para os usuários.

Um relatório de farol mostrará os recursos de bloqueio de renderização para qualquer página. Portanto, você precisa descobrir quais de seus scripts e folhas de estilo estão bloqueando a renderização e, em seguida, otimizar como eles são entregues.

Elimine o JS de bloqueio de renderização

Primeiro você precisa entender dois atributos chamados defer e async. Esses atributos HTML podem ser anexados a scripts externos e informar ao navegador quando baixar/executar o recurso.

Portanto, aplicando async ou defer aos seus scripts JS, você pode minimizar o impacto deles na renderização da página. O Shopify não sincronizará ou adiará automaticamente seus scripts, portanto, você precisará acessar os modelos líquidos do tema e adicionar o atributo por conta própria. Mas tenha muito cuidado ao fazer esse processo, pois você precisa considerar o impacto que o adiamento de um script pode ter na funcionalidade da sua loja.

Você também descobrirá que os aplicativos e plug-ins instalados em sua loja da Shopify produzirão scripts JS de bloqueio de renderização. Você pode identificá-los por meio de um relatório do Lighthouse. Considere cuidadosamente cada aplicativo que instalar em sua loja e pense no impacto potencial na velocidade da página. Alguns comerciantes nem perceberão que aplicativos não utilizados ainda estão instalados em uma loja e afetando a velocidade da página. Ao desinstalar um aplicativo, certifique-se de que ele não deixe nenhum código herdado em seu tema.

Eliminar folhas de estilo CSS de bloqueio de renderização

Para eliminar CSS de bloqueio de renderização, você deve incorporar os estilos críticos necessários para renderizar o conteúdo acima da dobra. Não é eficiente baixar toda a folha de estilo imediatamente para cada visitante, pois a maior parte do CSS não será usada.

A solução é inline o CSS crítico necessário para renderizar a seção acima da dobra de sua página, incluindo-o em uma tag de estilo em seu cabeçalho . Em seguida, adicione o código abaixo ao de seu theme.liquid.js para carregar sua folha de estilo principal de forma assíncrona.

 <link rel="alternate stylesheet" href="slow.css" title="styles" as="style" onload="this.title='';this.rel='stylesheet'">

Antes de lançá-lo em sua loja ao vivo, experimente um tema de teste para validar se sua página ainda aparece visualmente correta.

Como melhorar o CLS no Shopify

O CLS trata de quanto o layout da página muda conforme a página é carregada. A causa normalmente são imagens que movem o conteúdo conforme são carregadas e renderizadas.

Adicione atributos de largura e altura às suas imagens

A solução CLS mais fácil é garantir que suas tags img gerem atributos explícitos de largura e altura. Esses atributos são aplicados ao HTML da imagem e informam ao navegador a largura e a altura da imagem. Com essas informações, o navegador pode calcular a proporção e as dimensões da imagem e reservar o espaço necessário para essa imagem. Isso impede que o layout mude quando a imagem é adicionada à página.

Para fazer isso em uma imagem em sua própria loja da Shopify, faça login e vá para a seção de temas. E vá em 'Editar código' para o seu tema. Em seguida, encontre o trecho de código em seu modelo líquido que gera a imagem e adicione o trecho a seguir à tag img.

 height="{{img.height}}" width="{{img.width}}

Observe os modelos líquidos que você usa para sua página inicial, coleções, produtos e blogs da Shopify e certifique-se de que as tags img façam referência aos atributos de largura e altura.

Otimize suas fontes

Essas fontes sofisticadas da web que você carrega de lugares como as fontes do Google podem causar problemas de CLS devido a um problema chamado FOUS (flash of unstyled text). É aqui que o navegador da Web carrega inicialmente uma fonte alternativa e, quando a fonte principal da Web é carregada, o texto é renderizado novamente, causando uma mudança de layout.

Reduza a dependência de fontes da Web de terceiros Em primeiro lugar, tente reduzir sua dependência de fontes da Web de terceiros. Ao importar fontes da Web, importe apenas as famílias de fontes necessárias. Não importe os diferentes pesos e estilos de fonte se eles nunca forem usados, pois isso aumentará o tamanho do arquivo de fonte.

Fontes pré-carregadas As fontes da Web às vezes são carregadas de uma folha de estilo. Isso atrasa a rapidez com que o navegador pode começar a baixar a fonte. Em vez disso, pré-carregue seus arquivos de fonte no da sua loja. Isso dirá ao navegador para carregar o arquivo de fonte como uma prioridade alta.

Use font-display:optional Font-display é uma propriedade CSS que informa ao navegador o que fazer quando uma fonte não foi baixada em 100ms. O navegador carregará inicialmente a fonte substituta e, se o download da fonte personalizada não terminar em 100ms, o navegador manterá a fonte substituta renderizada na página. Isso reduz o risco de a fonte personalizada carregar tarde demais e causar uma mudança de layout.

Como melhorar o FID no Shopify

Em nossa experiência, o FID é a métrica menos comum do Core Web Vital que afeta as lojas da Shopify. Pense no FID como uma forma de medir a capacidade de resposta de uma página durante o carregamento. Nada frustra mais os usuários do que clicar/tocar e nada acontece.

O FID é semelhante a outra métrica chamada Tempo Total de Bloqueio (TBT). O TBT mede o tempo entre o início da renderização da página (First Contentful Paint ou FCP) e o momento em que a página se torna responsiva (Time to Interactive ou TTI).

O TBT é causado por 'tarefas longas' que bloqueiam o processamento do thread principal. O thread principal é onde o navegador processa tudo o que é necessário para carregar uma página. Se tarefas longas bloquearem o processamento do thread principal, isso atrasará a rapidez com que uma página se torna interativa para os usuários.

Qual é a diferença entre FID e TBT

A principal diferença entre FID e TBT é que o FID é baseado em dados de campo (dados de usuários reais que visitaram sua loja da Shopify). Considerando que o TBT é mensurável em laboratório e é calculado executando testes em um ambiente artificial com condições de rede definidas.

Como não é possível medir o FID ao testar suas próprias páginas, você deve medir o TBT.

Para melhorar o FID, você precisa acelerar a rapidez com que sua loja da Shopify responde à primeira interação do usuário. Isso é feito fazendo com que suas páginas da Shopify carreguem da maneira mais eficiente possível. Concentre-se nessas três áreas:

Reduza o impacto do código de terceiros

Como acontece com todas as principais métricas de sinais vitais da Web, o JavaScript de terceiros costuma ser a causa dos problemas. Qualquer terceiro que bloquear o thread principal por mais de 250 ms será sinalizado em um relatório do Lighthouse. Execute suas páginas por meio do Lighthouse para identificar quais scripts de terceiros causam problemas. Em seguida, decida quais podem ser definidos como assíncronos ou adiados.

Reduzir o tempo de execução do JavaScript

O tempo que seu JavaScript leva para executar também é importante. Em primeiro lugar, execute suas páginas pelo Lighthouse e identifique quais scripts demoram mais para serem executados. O Lighthouse sinalizará todos os scripts que demorarem mais de 2 segundos.

Use a divisão de código Em vez de entregar todo o seu código JavaScript em um único arquivo, divida seu código em partes menores e entregue apenas o código necessário para aquela página. Isso não é fácil e requer suporte dos desenvolvedores que gerenciam seu código. Você achará isso muito mais fácil se estiver integrado ao desenvolvimento do seu tema Shopify no início do projeto.

Reduza e comprima seu código Ao reduzir seu código, você remove espaços em branco e comentários desnecessários. Isso reduz o tamanho do arquivo, mas acelera a rapidez com que um navegador pode executar o código. Uma das grandes vantagens do Shopify é que a maioria dos temas js é minificada automaticamente.

Como a minificação, compactar seu js reduz o tamanho do arquivo e acelera a rapidez com que o navegador da Web pode executar o código.

Minimizar o Trabalho de Encadeamento

O thread principal faz todo o trabalho de processamento e cálculo de como construir uma página. Quando o thread principal estiver ocupado por tarefas intensivas, seu TBT será pior. Isso se resume principalmente à robustez do tema do Shopify. Temas baratos criados por desenvolvedores ruins não serão carregados com tanta eficiência quanto aqueles desenvolvidos por especialistas da Shopify.

Como você pode minimizar o trabalho de encadeamento em sua loja da Shopify? Como mencionado acima, é muito mais fácil se isso for integrado ao seu tema desde o início. Recomendamos a compra de um tema premium da Shopify com ótimas avaliações. Ou, se você estiver criando sua própria loja da Shopify, certifique-se de estar trabalhando com desenvolvedores especializados da Shopify que podem garantir que seu tema seja otimizado para minimizar o trabalho de encadeamento.

Como medir o desempenho das principais métricas da Web

Agora que você sabe como melhorar o Core Web Vitals em sua loja da Shopify, a seguir você precisa saber como medir o progresso do Core Web Vitals.

Console de pesquisa

A maneira mais rápida de ver o desempenho atual da sua loja da Shopify para o Core Web Vitals é por meio do Search Console. Acesse o relatório Core Web Vitals no menu à esquerda para obter dados sobre o desempenho atual do seu site. Ele incluirá um detalhamento de onde você tem problemas com o Core Web Vitals e mostrará uma amostra das URLs afetadas.

Insights de velocidade de página/farol

O Pagespeed Insights é uma ferramenta gratuita do Google que permite medir a velocidade de qualquer página. Execute suas URLs da Shopify por meio da ferramenta para obter uma análise detalhada de seu desempenho, juntamente com as ações recomendadas para obter uma pontuação mais alta.

Relatório CrUX

CrUX é o próprio conjunto de dados de velocidade/desempenho do Google para milhões de páginas reais. Você pode acessar os dados CrUX para sua própria loja Shopify usando o Painel do Google CrUX Data Studio. O painel fornece uma análise detalhada do desempenho do seu site nas métricas do Core Web Vitals nos últimos 16 meses.

O que significam todos esses termos CWV?

Quando você começar a olhar para Core Web Vitals, você encontrará muitas terminologias complicadas, aqui está o que tudo significa:

Principais aplicativos da Shopify para Web Vitals

Existem muitos aplicativos shopify que afirmam ser capazes de melhorar as pontuações do Core Web Vitals. Alguns desses aplicativos são eficazes e oferecem uma melhoria de desempenho. Embora isso possa melhorar suas pontuações de Core Web Vitals, não há garantia de que você verá qualquer efeito. Isso ocorre porque as pontuações do Core Web Vitals são exclusivas para cada loja da Shopify. Se as pontuações de Core Web Vitals da sua loja forem ruins devido a um problema de tema específico, um aplicativo provavelmente não fará nenhuma diferença.

Se você quiser seguir a rota do aplicativo, recomendamos testar um aplicativo e observar o efeito que ele tem no desempenho. Aqui estão alguns aplicativos sugeridos para teste:

• https://apps.shopify.com/core-web-vitals-booster
• https://apps.shopify.com/page-speed-optimizer
• https://apps.shopify.com/swift

Se você precisar de algum conselho ou suporte com seu negócio de comércio eletrônico, entre em contato com nossa equipe e ficaremos felizes em ajudar.