Como obter uma pontuação de 90+ Core Web Vitals para uma loja de comércio eletrônico (estudo de caso)
Publicados: 2021-08-19Nesta postagem, você aprenderá como obter uma pontuação de 90+ em seu Google Core Web Vitals (desktop e celular) para uma loja de comércio eletrônico, mesmo se você usar muitos plug-ins.
Quando o Google lançou pela primeira vez sua avaliação básica dos sinais vitais da web , muitos proprietários de lojas de comércio eletrônico começaram a entrar em pânico.
Ao contrário de um site de conteúdo básico ou blog, uma loja de comércio eletrônico tem muitas imagens e requer muito mais elementos funcionais para fechar uma venda. E cada recurso adicionado torna seu site mais lento.
Por exemplo, o chat ao vivo pode levar de 6 a 10 segundos para carregar sozinho. O carregamento do rastreamento básico de e-mail com o Klaviyo pode levar de 1 a 2 segundos. Até mesmo adicionar o pixel do Facebook pode levar cem milissegundos para carregar.
Não importa se seu código usa carregamento adiado ou assíncrono. Cada elemento adicional em seu site terá um impacto negativo em seus principais sinais vitais da web.
No momento, de acordo com a Searchmetrics, 96% dos sites testados nos EUA são reprovados no Core Web Vitals Assessment do Google para desktop, celular ou ambos.
E a taxa de falha é ainda maior para lojas de comércio eletrônico por causa da funcionalidade necessária para fazer transações online.
Nesta postagem, vou mostrar as etapas exatas que tomei para alcançar uma classificação de 90+ Core Vitals do Google para o meu site de loja de comércio eletrônico de 7 dígitos.
Obtenha meu mini curso grátis sobre como iniciar uma loja de comércio eletrônico de sucesso
Se você está interessado em começar um negócio de comércio eletrônico, reuni um pacote abrangente de recursos que o ajudarão a lançar sua própria loja online do zero. Certifique-se de pegá-lo antes de sair!
O que são Google Core Vitals?
O Google Core Web Vitals é um conjunto de fatores que o Google incorpora nas classificações de pesquisa para medir a qualidade da experiência do usuário.
O Google Core Vitals consiste em 3 componentes.
- Pintura com maior conteúdo (o Google requer 2,5 segundos ou menos) - Esta é uma medida de quanto tempo leva para ver a maior parte do conteúdo exibido na tela. Basicamente, é a velocidade de carregamento do seu site.
- Atraso na primeira entrada (o Google requer 100 milissegundos ou menos) - Esta é uma medida da capacidade de resposta e usabilidade de sua página. Especificamente, o Google está medindo o atraso entre um visitante clicar em um recurso interativo e a rapidez com que a página responde a esse clique.
- Mudança cumulativa de layout (o Google exige uma pontuação de 0,1 ou menos) - Esta é uma medida de quão estável é sua página durante o carregamento. O seu conteúdo sobe e desce conforme a página é renderizada? Esta é a única métrica do Google Core Web Vital que não tem nada a ver com a velocidade da página. Também é o mais difícil de depurar se você não sabe o que está fazendo.
As seções restantes deste post irão detalhar EXATAMENTE como eu fixei essas 3 métricas para minha loja de comércio eletrônico para alcançar uma pontuação de 90+ Core Vitals no desktop e no celular.
A loja de comércio eletrônico usada neste estudo de caso
A maioria dos proprietários de lojas de comércio eletrônico está no Shopify, WooCommerce, BigCommerce ou Shift4Shop e todas essas estratégias se aplicam independentemente da plataforma em que você está.
Minha loja de 7 figuras está localizada em BumblebeeLinens.com. Sinta-se à vontade para executar o teste de velocidade de página do Google em minha loja enquanto lê este post para ver meus resultados em primeira mão.
Em primeiro lugar, minha loja usa muitos dos mais recentes sinos e assobios de comércio eletrônico porque eu ensino um curso de comércio eletrônico na Rentável Loja Online.
Na verdade, eu trato minha loja como um laboratório para testar novos recursos à medida que são lançados e relatar sobre eles neste blog.
Aqui estão os plug - ins e serviços que estou executando em minha loja para este estudo de caso.
- Klaviyo - Minha plataforma de marketing por e-mail
- Postscript - Minha plataforma de marketing SMS
- Vizury - Meu provedor de notificações push
- ManyChat - provedor de marketing do My Facebook Messenger que implementa meu chat ao vivo
- Gorgias - Meu software de atendimento ao cliente que lida com toda a correspondência do cliente.
- Spin To Win Popup - Meu principal ímã de leads para minha loja
- Facebook Pixel - rastreia todas as minhas vendas do Facebook
- Google Analytics - rastreia as vendas do meu site
- Notify Slide Up - Fornece prova social, exibindo as vendas à medida que chegam
Só por diversão, é assim que meu site carrega rápido SEM nenhuma otimização .
É assim que funciona com as otimizações que estou prestes a ensinar a implementar.
Como corrigir seus problemas de Large Contentful Paint (LCP) e First Input Delay (FID)
Pontuações baixas de LCP e FID são causadas por velocidades de página lentas . Se você puder tornar seu site mais rápido, as pontuações do LCP e do FID serão corrigidas sozinhas.
Para 99% das lojas de comércio eletrônico, os problemas de LCP e FID são causados por ...
- Carregando JavaScript e CSS que bloqueia a renderização - Sem qualquer otimização, os arquivos javascript e css são carregados sequencialmente, o que pode bloquear a renderização visual de sua página. A melhor maneira de acelerar o seu javascript é carregar lentamente o código ou adiar a renderização para que não bloqueie nada.
- Carregando grandes fotos e / ou vídeos - quanto maior e mais alta a resolução de suas imagens, mais tempo elas levarão para carregar. Você nunca deve carregar uma imagem maior do que a exibida em seu site. Além disso, você nunca deve carregar nenhuma imagem que não esteja visível na tela.
- Um servidor lento - um servidor lento não deve ser um problema com plataformas totalmente hospedadas como Shopify, BigCommerce ou Shift4Shop, mas se você estiver no WooCommerce, escolher um host mais rápido como o WPEngine pode acelerar drasticamente o seu site.
Em um alto nível, se você resolver os 3 problemas mencionados acima, você terá um site extremamente rápido.
Como Obter Velocidades de Carregamento de 1 Segundo Página
Abaixo está uma lista completa de minhas otimizações de velocidade, juntamente com uma classificação de 1-5, onde 5 indica o maior impacto na melhoria da velocidade.
Em geral, você deve se concentrar nos 5 e implementar os 1 e 2 apenas se tiver tempo ou se for super anal :)
Se você quiser saber como eu alcancei uma velocidade de carregamento de página de 1 segundo , você pode pular direto para as grandes armas com uma classificação de 5 :)!
Habilitar cache do navegador (classificação 1 de 5)
O cache do navegador informa ao navegador do cliente para armazenar imagens e outros elementos do seu site na máquina local do usuário para tornar a navegação no seu site muito mais rápida APÓS o carregamento inicial da página.
O cache do navegador SEMPRE deve estar ativado, mas observe que o cache do navegador NÃO afetará seus Google Core Web Vitals . O Google só se preocupa em como seu site é carregado a partir de um estado completamente frio.
Minimize os arquivos CSS / JS (classificação 1 de 5)
Minimizar seu CSS / JS remove todo o espaço em branco de seus arquivos CSS e javascript para economizar alguns bytes aqui e ali.
Em geral, a minimização de seus arquivos CSS / JS não vai melhorar drasticamente a velocidade da página.
Faça essa otimização se estiver tentando extrair até o último milissegundo de velocidade de seu site.
Combine arquivos HTML, CSS e JS (classificação 2 de 5)
Combinar seus arquivos HTML, CSS e JS em menos arquivos pode afetar a velocidade da sua página porque o servidor precisa buscar menos arquivos.
Mas com a mais recente tecnologia de servidor da web, vários arquivos podem ser buscados ao mesmo tempo em paralelo, o que atenua drasticamente essa otimização . Eu não gastaria muito tempo nisso.
Limpe seus redirecionamentos (avaliação 2 de 5)
Seu site está em constante mudança e, às vezes, você pode ter redirecionamentos de certas imagens e / ou páginas para outras.
Por exemplo, quando migrei todas as minhas páginas de http: // para https: // muitos anos atrás, emiti redirecionamentos 301 de certas páginas e imagens para suas contrapartes seguras como uma solução rápida.
Cada redirecionamento em sua página tornará seu site mais lento, portanto, certifique-se de usar uma ferramenta como GTMetrix para detectar quaisquer redirecionamentos em elementos de sua página e removê-los.
Use um host mais rápido (classificação 3 de 5)
Se você estiver em uma plataforma de código aberto como WooCommerce ou Magento, seu primeiro instinto pode ser jogar dinheiro em um novo servidor para corrigir seus problemas de velocidade de página.
Mas na maioria das vezes, um servidor mais rápido não resolverá seus problemas de velocidade . No entanto, se você estiver usando hospedagem compartilhada barata , um VPS ou um servidor dedicado pode fazer uma diferença significativa.
Use A CDN (classificação 2-3 de 5)
Redes de distribuição de conteúdo ou CDNs armazenam várias cópias de seu site e imagens em vários servidores em todo o mundo para que seu conteúdo seja entregue pelo servidor mais próximo, localizado geograficamente.
Se você tem clientes em todo o mundo e seu site tem muitas imagens , o uso de um CDN pode ter um impacto significativo na velocidade da sua página.
Mas, para sites menores como o meu, que atendem principalmente aos Estados Unidos, o uso de um CDN tem um impacto marginal na velocidade da página .
Pré-carregar imagens e scripts maiores (avaliação 3 de 5)
Métricas como “pintura com maior conteúdo” medem a velocidade do maior elemento em sua página. Como resultado, faz sentido “pré-carregar” os maiores elementos em sua página, fornecendo dicas em seu código HTML.
As dicas de pré-carregamento são instruções em seu código HTML que informam ao navegador quais recursos são mais importantes para a página.
Por exemplo, se você tiver uma grande imagem inicial , faz sentido começar a carregar essa imagem primeiro para melhorar seu LCP.
Embora o pré-carregamento de elementos importantes em seu site possa ajudar na pontuação do LCP, isso não afetará a velocidade geral da página.
Reduza suas imagens (avaliação 4 de 5)
A maioria dos novos proprietários de lojas de comércio eletrônico usa tamanhos de imagem muito maiores do que o necessário . Se o tema da sua loja online usa imagens de 1000 × 1000, você nunca deve fazer upload de uma imagem maior que 1000 x 1000.
Se o seu site usa a mesma imagem em várias páginas em tamanhos diferentes , você deve criar uma imagem separada (e menor) para cada versão.
Por exemplo, a imagem de um produto em minha loja é exibida em tamanho real, tamanho 50%, tamanho 33% e tamanho 25% dependendo da página.
Como resultado, tenho 4 arquivos de imagem diferentes (1 para cada tamanho) em meu site e exibo apenas a menor imagem necessária, sem perda de qualidade.
Além disso, você deve compactar todos os seus arquivos JPG para um máximo de qualidade 50 no Photoshop (ou qualquer programa de imagem que você use).
Compactar e armazenar em cache suas páginas (avaliação 4 de 5)
Se você estiver em uma plataforma totalmente hospedada como Shopify, BigCommerce ou Shift4Shop, suas páginas provavelmente já estão compactadas e totalmente armazenadas em cache antes de serem veiculadas.
Mas se você estiver em uma plataforma de código aberto como o WooCommerce , certifique-se de usar um plugin como o WP Rocket.
WP Rocket irá pré-renderizar todas as suas páginas web para que sua loja sirva páginas estáticas que requerem pouco ou nenhum uso de CPU.
WP Rocket também comprimirá sua página web a 90% de seu tamanho.
Use menos plug-ins que carregam código externo (classificação 4 de 5)
Cada plugin que você adiciona ao seu site irá torná-lo mais lento . Como resultado, você deve ser extremamente cuidadoso sempre que decidir instalar uma nova ferramenta de software.
Recursos aparentemente inócuos às vezes podem tornar seu site dramaticamente lento!
Por exemplo , adicionar um botão de compartilhamento do Facebook ou um botão de fixação do Pinterest pode fazer com que um novo trecho de código javascript seja baixado de uma fonte externa.
Para botões como Twitter, Facebook ou Pinterest, sempre uso versões “não javascript” que não requerem código carregado externamente.
Se você deseja adicionar um botão de compartilhamento do Facebook ao seu site, você deve usar a versão com hiperlink conforme mostrado abaixo.
https://www.facebook.com/sharer/sharer.php?m2w&u=https://mywifequitherjob.com/the-best-way-to-find-vendors-for-your-online-store/
Lazy Load Your Images and Javascript Code (Classificação 5 de 5) - O mais importante!
Quando se trata de melhorar a velocidade de carregamento da página, você deve carregar apenas os elementos do site que são obrigatórios ou visíveis.
Por exemplo, se houver uma imagem enterrada 5 rolagens para baixo em sua página, você não deve exibi-la até que seu cliente desça o suficiente para vê-la.
Da mesma forma para o código javascript, você não deve carregar nenhuma funcionalidade para o seu site até que ele realmente precise ser carregado.
Como carregar lentamente seu código JavaScript e CSS
O carregamento lento de suas imagens é bastante simples e a maioria dos temas já tem o carregamento lento integrado.
Mas como você pode carregar o código javascript com segurança em seu site?
Aqui está o segredo de como faço isso.
Para cada página do meu site, carrego primeiro os elementos visuais do meu site . Então, eu só carrego o código javascript funcional no meu site depois que o usuário executa uma ação na página .
Por exemplo , se você for ao Bumblebee Linens agora, você notará que meu site carrega super rápido (às vezes em menos de um segundo).
Mas se você clicar na página, mover ou rolar o mouse , só então o chat ao vivo é carregado junto com a outra funcionalidade de “compras” na minha loja.
Em outras palavras, fico preguiçoso ao carregar a funcionalidade do carrinho de compras do meu site apenas quando o usuário está realizando uma ação ou fazendo compras na minha loja.
Como resultado, minha página carrega super rápido porque estou carregando apenas os elementos gráficos HTML / CSS do meu site.
Do ponto de vista do usuário, a experiência de compra é perfeita porque cada página carrega rapidamente. Enquanto isso, o Google também vê uma página de carregamento rápido.
Como implementar o Javascript Lazy Loading
A primeira etapa necessária para carregar lentamente o seu javascript é descobrir o que pode ser carregado sem quebrar o seu site.
Lembre-se de que você deve carregar todos os códigos "essenciais" em seu site para que a experiência de compra "visual" do cliente não seja afetada.
Como resultado, você deve carregar cada pedaço de código que afeta a renderização dos elementos gráficos do seu site.
Veja como descobrir o que é essencial.
Vá para GTMetrix e analise seu gráfico em cascata . Seu gráfico em cascata dirá tudo o que é carregado em sua página e quanto tempo leva para carregar.
De acordo com o gráfico acima, klaviyo_subscribe.js está levando 450 ms para carregar. Além disso, o klaviyo_subscribe.css está demorando mais 420 ms.
Klaviyo é minha ferramenta de marketing por e-mail e eu sei que o Klaviyo NÃO afeta a renderização do meu site.
Como resultado, posso carregar lentamente o Klaviyo sem afetar os elementos visuais da página.
Na verdade, remover o código Klaviyo reduzirá quase um segundo da velocidade da minha página!
Usando GTMetrix, crie uma lista de todos os códigos de carregamento lento que não são necessários para renderizar os elementos visuais de seu site e, em seguida, carregue lentamente o código quando QUALQUER um dos eventos a seguir ocorrer.
- Movimento do mouse
- Rolagem de página
- Toque na tela
Aqui está um pequeno trecho de código que ilustra minha implementação de javascript.
function activity(){
defer(//Add all of your slow javascript stuff here);
activityEvents.forEach(function(eventName) {
document.removeEventListener(eventName, activity, true);
});
}
// Uma matriz de eventos DOM que deve ser interpretada como
// atividade do usuário.
var activityEvents = [
'mousedown', 'mousemove', 'keydown', 'scroll',
'touchstart'
];
window.onload = function () {
// adiciona esses eventos ao documento.
// registra a função de atividade como o parâmetro do listener.
activityEvents.forEach (function (eventName) {
document.addEventListener (eventName, activity, true);
});
}
Depois de implementar esta única etapa, você deve ser capaz de atingir velocidades de carregamento de página inferiores a 1 segundo em dispositivos móveis e desktops!
Como corrigir seus problemas de mudança cumulativa de layout
90% dos seus problemas de mudança cumulativa de layout serão causados pelos 2 motivos a seguir.
Carregando elementos sem dimensões
Os parâmetros de tamanho da imagem permitem que um navegador da web saiba o tamanho do conteúdo à medida que ele carrega.
Por exemplo, se você definir as dimensões da imagem em seu código HTML, o navegador reservará espaço para sua imagem à medida que carrega, para que a página não salte.
No entanto, se os parâmetros de tamanho estiverem ausentes, nenhuma reserva será feita e a página terá que se reorganizar quando a imagem finalmente carregar.
A solução simples para esse problema é especificar as dimensões de cada elemento em seu site, conforme mostrado abaixo.
<img width="400" height="300" class="" src="images/Hankie_HLW-009.jpg" border="0" alt="Wedding Handkerchiefs" title=" Wedding Handkerchiefs ">
Adicionar conteúdo dinamicamente com Javascript
Muitos plug-ins do Shopify usam javascript para exibir recursos dinamicamente em seu site. E às vezes esse código carrega tarde, o que pode empurrar sua página para cima e para baixo.
Por exemplo, se você exibir anúncios em seu site, ele poderá saltar para cima e para baixo à medida que o anúncio é carregado.
A melhor maneira de evitar que isso aconteça é pré-alocar espaço em sua página para que o conteúdo adicionado seja exibido.
Adicionar espaço em branco pré-renderizado pode ser problemático para certos plug-ins, portanto, certifique-se de entrar em contato com o criador do plug-in se este for um problema com sua loja.
Como resolver problemas CLS mais complicados
Conforme mencionado anteriormente, 90% dos seus problemas de CLS podem ser resolvidos adicionando dimensões aos seus elementos. Mas os 10% restantes podem ser EXTREMAMENTE difíceis de resolver sem o uso de um conjunto específico de ferramentas.
Para meus sites, levei literalmente 3 semanas para consertar meus problemas de CLS porque o teste do Google Page Speed NÃO reflete as pontuações CLS medidas em campo.
Por exemplo, meu blog em MyWifeQuitHerJob.com teve pontuações CLS perfeitas no teste de laboratório de velocidade de página, mas falhou no teste CLS em campo.
Se você não sabe do que estou falando, aqui está uma análise rápida do Google Page Speed Test.
A pontuação máxima são dados coletados de usuários reais usando o navegador Chrome. A pontuação mais baixa é o teste executado em condições ideais .
Quando as 2 pontuações não correspondem, é difícil consertar porque o Google não informa o que está errado . Na verdade, você pode ter uma pontuação CLS perfeita no laboratório, mas falhar completamente no CLS em campo.
Aqui está o que o Google NÃO informa sobre o CLS.
O teste de velocidade da página mede apenas o CLS acima da dobra em condições ideais. Na vida real, um usuário está rolando para cima e para baixo em uma conexão de internet potencialmente muito mais lenta.
Para resolver seus problemas de CLS, você DEVE emular uma conexão lenta e se comportar como um usuário humano real!
Como emular um usuário real para corrigir CLS
A melhor maneira de fazer isso é usando o depurador integrado do Chrome.
Veja como depurar seus problemas de CLS passo a passo.
Etapa 1: abrir o depurador do Chrome
Etapa 2: Diminua a velocidade da rede
Na guia “Rede”, reduza a velocidade da página para “3G lento”. Isso diminuirá drasticamente a velocidade de carregamento da página para que você possa detectar facilmente as mudanças de layout.
Etapa 3: Renderizar Layout Shift Regions
Clique na guia “Performance” e certifique-se de que a caixa “Layout Shift Regions” esteja marcada em “Rendering”.
Etapa 4: atualize a página
Depois de configurar o Debugger do Chrome, atualize a página e role para cima e para baixo em sua página como um usuário real.
Certifique-se de procurar as áreas destacadas em azul que indicam uma mudança de layout.
Etapa 5: Analise o cronograma de desempenho
Se você notar mudanças de layout no seu site durante o carregamento, dê uma olhada mais de perto ampliando o cronograma de carregamento da página .
No exemplo abaixo, o layout está mudando porque estou carregando uma fonte diferente que desloca a página ligeiramente para baixo porque a nova fonte é maior.
Executando esses testes em diferentes regiões de sua página várias vezes, você pode identificar e corrigir facilmente os problemas de mudança cumulativa de layout .
A parte mais difícil é diagnosticar onde estão seus problemas de CLS, porque o teste do Google Page Speed considera apenas a parte acima da dobra de sua página.
Você pode alcançar mais de 90 pontuações essenciais na Web para uma loja de comércio eletrônico
Se você seguir todas as instruções acima, poderá atingir velocidades de carregamento de página abaixo de 1 segundo e atingir uma classificação de 90+ em seus Core Web Vitals para dispositivos móveis e desktops.
Em geral, você deve sempre manter seu site o mais simples possível e evitar o uso de plug-ins a todo custo!
Pergunte a si mesmo se você realmente precisa de um determinado recurso ANTES de implementá-lo . Em seguida, procure soluções que não exijam a adição de código javascript adicional ao seu site.
Como sou super anal, na verdade examino o código-fonte de cada plug-in que instalo , além das chamadas de rede que ocorrem.
Certa vez, usei cegamente um plugin que estava literalmente enviando informações do meu site para várias redes de anúncios e vendendo as informações do meu cliente sem meu conhecimento!
A maioria dos problemas de velocidade da página não é causada pelo seu tema, mas pelos plug-ins que você instala . Tenha cuidado e venda feliz!