Olá, pessoal! Sejam muito bem-vindos à Aula 79 do nosso curso “Loja Shopify do Zero ao Avançado”! 👋

Nas últimas aulas, exploramos profundamente a criação, personalização e até mesmo a otimização de SEO para sua loja. Construímos uma base sólida para o sucesso do seu e-commerce. Mas tem um pilar fundamental que, se não estiver firme, pode derrubar tudo o que construímos: a velocidade da sua loja.

Imagine um cliente super interessado em um produto que você vende, mas a página demora uma eternidade para carregar. Qual a chance dele esperar? Provavelmente muito baixa! ⏳ Em um mundo onde a paciência é um luxo, a velocidade é um diferencial competitivo GIGANTE. E é exatamente isso que vamos dominar hoje!

Nesta aula, vamos mergulhar no mundo da otimização de velocidade, focando nos Core Web Vitals, métricas essenciais do Google que impactam diretamente a experiência do usuário e o seu ranqueamento nos motores de busca. Prepare-se para tornar sua loja Shopify tão rápida quanto um raio! ⚡

—

Aula 79 – Loja Shopify do Zero ao Avançado: Otimização de velocidade para Core Web Vitals

📚 O que você vai aprender nesta aula

Ao final desta aula, você será capaz de:

• Entender o que são os Core Web Vitals (CWV): Largest Contentful Paint (LCP), Interaction to Next Paint (INP) e Cumulative Layout Shift (CLS) e sua importância para Shopify.
• Utilizar ferramentas como o Google PageSpeed Insights e o Lighthouse para medir a performance da sua loja.
• Identificar os principais gargalos de performance em temas Shopify e apps de terceiros.
• Implementar estratégias eficazes para otimizar imagens, vídeos e outros ativos de mídia.
• Otimizar a entrega e execução de JavaScript e CSS para reduzir o tempo de carregamento.
• Gerenciar o impacto de aplicativos de terceiros na velocidade da sua loja.
• Aplicar melhores práticas de código Liquid e configuração de tema para máxima performance.
• Compreender como a CDN e o cache da Shopify contribuem para a velocidade.

🔗 Conectando com aulas anteriores

Lembram-se de quando estávamos desenvolvendo temas personalizados e personalizando arquivos theme.liquid, product.liquid e outros templates? (Aula 50-60s) Pois bem, cada linha de código que escrevemos ou cada seção que adicionamos tem um impacto na performance. Hoje, vamos aprender a revisitar esse código com um olhar de otimização!

Na Aula 78, quando falamos de SEO, mencionamos brevemente que a velocidade da página é um fator de ranqueamento crucial para o Google. Os Core Web Vitals são a materialização dessa métrica, e dominá-los é essencial para garantir que todo o seu trabalho de SEO não seja em vão.

E o que dizer dos apps que instalamos para adicionar funcionalidades? (Aula 70-75) Eles são ótimos, mas podem ser vilões silenciosos da performance. Nesta aula, vamos aprender a como auditá-los e minimizar seu impacto sem perder as funcionalidades essenciais.

Agora que temos uma loja funcional, bonita e bem otimizada para SEO, é hora de fazê-la voar! 🚀

📖 Conteúdo Principal

A velocidade de carregamento é crucial para a experiência do usuário (UX) e para o SEO. O Google, em sua busca por oferecer a melhor experiência possível, introduziu os Core Web Vitals (CWV) como um conjunto de métricas que avaliam a experiência real do usuário em um site. Vamos entender cada uma delas e como elas se aplicam à sua loja Shopify.

1. Entendendo os Core Web Vitals (CWV)

Os Core Web Vitals são três métricas principais que medem:

• Carregamento: Quão rápido o conteúdo principal da página aparece.
• Interatividade: Quão rápido a página responde à interação do usuário.
• Estabilidade Visual: Quão estável é o layout da página enquanto ela carrega.

Vamos detalhar cada uma:

1.1. Largest Contentful Paint (LCP) – Carregamento 🖼️

O LCP mede o tempo que leva para o maior elemento de conteúdo (imagem, vídeo, bloco de texto grande) na janela de visualização do navegador ser renderizado. Basicamente, ele responde: “Quando o usuário realmente vê o conteúdo principal da página?”

• O que afeta o LCP: Imagens grandes não otimizadas, vídeos incorporados, blocos de texto volumosos, fontes personalizadas, renderização de CSS/JavaScript que bloqueia o carregamento do conteúdo principal.
• Meta: LCP de 2.5 segundos ou menos para ter uma boa experiência.

1.2. Interaction to Next Paint (INP) – Interatividade (Substituindo FID) 👆

O INP avalia a responsividade geral de uma página às interações do usuário. Ele mede o tempo desde que o usuário interage com a página (clica, toca, digita) até o próximo frame visual ser renderizado. Ele é um sucessor mais abrangente do First Input Delay (FID), que media apenas o atraso inicial da primeira interação.

• O que afeta o INP: JavaScript pesado ou bloqueador, scripts de terceiros que atrasam o processamento, tarefas longas na thread principal do navegador.
• Meta: INP de 200 milissegundos ou menos para uma boa experiência.

1.3. Cumulative Layout Shift (CLS) – Estabilidade Visual 📏

O CLS mede a soma total de todas as mudanças inesperadas de layout que ocorrem durante o ciclo de vida de uma página. Sabe quando você vai clicar em um botão e, de repente, um anúncio ou imagem carrega e empurra o botão para baixo, fazendo você clicar em algo errado? Isso é CLS!

• O que afeta o CLS: Imagens sem dimensões (largura/altura) definidas, fontes carregando tardiamente e “saltando”, conteúdo injetado dinamicamente por JavaScript, embeds (como vídeos do YouTube ou mapas) sem reservar espaço.
• Meta: CLS de 0.1 ou menos para uma boa experiência.

2. Por que os Core Web Vitals são importantes para o Shopify?

• SEO: Desde 2021, o Google utiliza os CWV como um fator de ranqueamento. Lojas com melhores CWV tendem a aparecer mais alto nos resultados de busca.
• Experiência do Usuário (UX): Páginas rápidas e estáveis melhoram a satisfação do cliente, reduzem a taxa de rejeição e incentivam a navegação.
• Taxa de Conversão: Usuários felizes e sem frustração são mais propensos a adicionar produtos ao carrinho e finalizar uma compra. Estudos mostram que cada segundo adicional no tempo de carregamento pode reduzir as conversões em até 7%.
• Credibilidade: Uma loja rápida e responsiva transmite profissionalismo e confiança.

3. Ferramentas para Medir a Performance

Antes de otimizar, precisamos saber onde estamos. Há várias ferramentas excelentes para medir os Core Web Vitals e identificar gargalos.

3.1. Google PageSpeed Insights (PSI)

É a ferramenta oficial do Google para analisar a performance e os CWV de uma página. Ele fornece dados de campo (dados reais de usuários do Chrome) e dados de laboratório (simulação de carregamento).

• Como usar: Vá para developers.google.com/speed/pagespeed/insights, digite a URL da sua página Shopify e clique em “Analisar”.
• Resultados: Você verá pontuações para Mobile e Desktop, os valores dos CWV, e uma lista detalhada de oportunidades e diagnósticos para melhorar a performance.

[IMAGEM: Screenshot do relatório do PageSpeed Insights com as pontuações e métricas CWV destacadas.]

3.2. Google Lighthouse (Integrado ao Chrome DevTools)

O Lighthouse é uma ferramenta de auditoria automática que gera um relatório de performance, acessibilidade, melhores práticas, SEO e Progressive Web Apps (PWAs). É ótimo para análises em tempo real enquanto você desenvolve.

• Como usar: Abra sua loja no Google Chrome, clique com o botão direito em qualquer lugar da página e selecione “Inspecionar”. Na aba “Lighthouse”, selecione as categorias de auditoria (ex: Performance) e clique em “Generate report”.
• Vantagem: Permite testar mudanças no código localmente antes de publicar.

[IMAGEM: Screenshot da aba Lighthouse no Chrome DevTools com as opções de auditoria.]

3.3. Relatório de Velocidade da Loja Online do Shopify

O Shopify também oferece um relatório de velocidade integrado para dar uma visão geral do desempenho da sua loja. Ele compara sua velocidade com lojas semelhantes e destaca áreas de melhoria.

• Como acessar: No seu admin Shopify, vá em Loja Virtual > Temas. No canto superior direito, você verá “Velocidade da loja”. Clique em “Ver relatório de velocidade”.
• Limitação: É mais geral e menos granular que o PageSpeed Insights, mas é um bom ponto de partida.

[IMAGEM: Screenshot do relatório de velocidade da loja no admin Shopify.]

4. Principais Gargalos de Performance em Lojas Shopify

Na minha experiência de mais de uma década, os culpados mais comuns por lojas Shopify lentas são:

1. Imagens e Vídeos Não Otimizados: Arquivos grandes, dimensões inadequadas, falta de lazy loading.

2. JavaScript Excessivo: De aplicativos de terceiros, código de tema inchado, scripts render-blocking.

3. CSS Ineficiente: Arquivos CSS grandes, CSS não crítico carregando no início, falta de minificação.

4. Fontes Personalizadas: Muitas fontes, carregamento tardio, Flash of Unstyled Text (FOUT).

5. Aplicativos de Terceiros: Cada app adiciona seu próprio CSS, JS e, às vezes, recursos externos, impactando a performance.

6. Código Liquid Ineficiente: Loops complexos, consultas de banco de dados excessivas no backend.

7. Dom Excessivamente Profundo: Muitas divs aninhadas sem necessidade, tornando a renderização mais lenta.

5. Estratégias de Otimização Detalhadas

Agora que sabemos o que medir e quais são os problemas, vamos para as soluções!

5.1. Otimização de Imagens e Mídia (LCP, CLS)

Imagens são, em geral, o maior contribuinte para o LCP.

• Use o img_url do Shopify de forma inteligente: A Shopify já é incrível e otimiza automaticamente as imagens usando sua CDN (Content Delivery Network). Ao usar o filtro img_url, você pode especificar o tamanho e, muitas vezes, a Shopify serve automaticamente o formato mais otimizado (como WebP) para navegadores compatíveis.

alt="{{ product.featured_image.alt }}"
width="1024"
height="768"
loading="lazy">

• Dica: Sempre defina width e height para evitar CLS! 📏
• format: 'webp': Embora a Shopify já faça um bom trabalho, você pode forçar o WebP em alguns casos, mas a CDN geralmente decide o melhor formato.

• Imagens Responsivas com srcset e sizes: Sirva imagens diferentes para diferentes tamanhos de tela. Isso garante que dispositivos móveis não baixem imagens enormes desnecessariamente.

sizes="(max-width: 768px) 100vw, 50vw"
src="{{ product.featured_image | img_url: '768x', format: 'webp' }}"
alt="{{ product.featured_image.alt }}"
width="768"
height="512"
loading="lazy">

• Explicação: srcset lista as imagens e suas larguras. sizes informa ao navegador qual largura a imagem ocupará em diferentes tamanhos de viewport.

• Lazy Loading para Imagens Abaixo da Dobra: O atributo loading="lazy" informa ao navegador para carregar a imagem apenas quando ela estiver perto de entrar na área visível do usuário. Isso economiza recursos e acelera o LCP.

• Cuidado: Não use loading="lazy" para o elemento LCP (a imagem principal visível na primeira dobra)! Para o LCP, considere fetchpriority="high" ou preload.

• Pré-carregamento (Preload) do Elemento LCP: Se você sabe qual imagem será o LCP, pode instruir o navegador a priorizar seu carregamento.

html

• Onde usar: Geralmente no do theme.liquid.

5.2. Otimização de CSS (LCP, CLS)

O CSS pode bloquear a renderização da página.

• Minificação e Compressão: A maioria dos temas Shopify modernos e do próprio Shopify já faz isso, mas certifique-se de que seus arquivos CSS estão minificados (removendo espaços em branco, comentários).
• CSS Crítico (Critical CSS): Identifique o CSS necessário para renderizar o conteúdo acima da dobra e inlinize-o diretamente no do seu theme.liquid. O restante do CSS pode ser carregado de forma assíncrona.
• Conceito: Isso garante que o usuário veja algo rapidamente, mesmo que o CSS completo ainda esteja carregando.
• Ferramentas: Existem geradores de critical CSS online, mas implementá-lo perfeitamente em um tema Shopify pode ser complexo. Considere temas que já implementam isso ou apps específicos.
• Carregamento Assíncrono para CSS Não Crítico:

html

Isso faz com que o navegador carregue o CSS sem bloquear a renderização inicial.

• Evite @import no CSS: Use tags separadas no HTML, pois @import pode causar bloqueio e atrasar o carregamento paralelo.

5.3. Otimização de JavaScript (INP, LCP)

JavaScript é um dos maiores contribuintes para o INP e pode bloquear o LCP.

• defer e async para Scripts:
• : O script é baixado em paralelo com o parsing do HTML e executado após o HTML ser completamente analisado, mas antes do evento DOMContentLoaded.
• : O script é baixado em paralelo com o parsing do HTML e executado assim que estiver disponível, potencialmente antes do HTML estar completamente analisado.
• Quando usar:
• defer: Para scripts que dependem do DOM (ex: galerias, validação de formulário).
• async: Para scripts independentes, como analytics ou pixels de rastreamento.
• Onde colocar: Idealmente no final do ou no com defer/async.

• Remova JavaScript Não Utilizado: Revise seus apps e código de tema. Se um script não é usado em uma página específica, não o carregue. Use condicionais Liquid.

{% if template contains 'product' %}

{% endif %}

• Minificação e Compressão: Assim como no CSS, garanta que seus arquivos JS estejam minificados.
• Tasks Longas (Long Tasks): Divida o JavaScript complexo em tarefas menores para evitar bloquear a thread principal do navegador por muito tempo, o que impacta o INP.

5.4. Otimização de Fontes (LCP, CLS)

Fontes personalizadas são ótimas para o branding, mas podem atrasar o LCP e causar CLS.

• Preload de Fontes Críticas: Pré-carregue as fontes essenciais para o texto acima da dobra.

html

• Onde usar: No do theme.liquid.
• font-display: swap;: Adicione esta propriedade ao seu @font-face CSS. Isso informa ao navegador para usar uma fonte de fallback imediatamente (evitando texto invisível) e depois “trocar” para sua fonte personalizada assim que ela carregar. Isso resolve o Flash of Invisible Text (FOIT) e melhora o LCP percebido.

css

@font-face {
font-family: 'Minha Fonte';
src: url('minha-fonte.woff2') format('woff2');
font-display: swap; / ESSENCIAL /
}

• Auto-hospedagem de Fontes: Se possível, hospede suas fontes localmente em vez de usar serviços como Google Fonts. Isso remove uma requisição de DNS e um servidor externo.
• Dica: Ao usar o Google Fonts, adicione &display=swap na URL: https://fonts.googleapis.com/css?family=Roboto&display=swap.

5.5. Gerenciamento de Aplicativos de Terceiros (INP, LCP, CLS)

Essa é uma das áreas mais críticas e negligenciadas! 😱

• Audite Regularmente: Verifique seus apps instalados. Você realmente usa todos eles? Aplicativos não utilizados ainda podem carregar scripts e estilos. Desinstale o que não for essencial.
• Priorize Apps Leves: Ao escolher novos apps, procure por aqueles que são otimizados para performance. Muitos apps oferecem diferentes métodos de carregamento (assíncrono, síncrono).
• Carregamento Condicional de Apps: Alguns apps permitem que você controle onde seus scripts são carregados. Por exemplo, um app de reviews de produto só precisa carregar na página de produto, não na home ou coleção. Use as configurações do app ou, se for um script que você pode controlar, use condicionais Liquid.

{% if template contains 'product' %}

{% endif %}

• Teste o Impacto: Sempre que instalar um novo app, rode o PageSpeed Insights novamente para ver o impacto.

5.6. Otimização do Código Liquid e Estrutura do Tema (LCP, INP, CLS)

• Minimize Loops Complexos: Loops muito aninhados ou que processam grandes volumes de dados podem atrasar a renderização do servidor.
• Evite paginate excessivo: Use paginate com limites razoáveis para não carregar dezenas ou centenas de produtos em uma única página de coleção.
• Estrutura do DOM: Mantenha a profundidade do DOM (o número de elementos aninhados) o mais rasa possível. Um DOM excessivamente profundo aumenta o tempo de renderização. Evite divs desnecessárias.
• Fragmentos (Snippets) e Seções Eficientes: Organize seu código de forma modular e reutilizável. Use seções para blocos de conteúdo maiores e snippets para componentes menores.

5.7. Server-Side e Shopify Specifics

• CDN Global da Shopify: A Shopify usa uma CDN robusta e global. Seus arquivos de tema (JS, CSS, imagens) são automaticamente servidos de servidores próximos aos seus clientes, o que reduz a latência e acelera o carregamento. Você não precisa configurar isso, a Shopify cuida!
• Cache de Conteúdo: A Shopify tem mecanismos de cache para páginas estáticas e semi-estáticas. Quando um cliente visita uma página pela primeira vez, ela é construída; nas próximas vezes, uma versão em cache pode ser servida, acelerando as visitas subsequentes.
• Servidores e Infraestrutura: A infraestrutura da Shopify é otimizada para e-commerce em larga escala. Embora você não tenha controle sobre os servidores, focar nas otimizações de frontend (o que o navegador do usuário baixa e renderiza) é onde você tem maior impacto.

💻 Exemplos Práticos

Vamos colocar a mão na massa com alguns exemplos chave!

Exemplo 1: Otimizando Imagens em uma Coleção de Produtos

Imagine que você tem uma seção de “Produtos em Destaque” na sua homepage ou uma página de coleção. Queremos garantir que as imagens carreguem rapidamente e não causem CLS.

No arquivo da seção/snippet (ex: sections/featured-products.liquid ou snippets/product-card.liquid):

{% assign img_url_base = product.featured_image | img_url: '1x1' %} {# Imagem base para começar #}
{%- assign img_width = product.featured_image.width -%}
{%- assign img_height = product.featured_image.height -%}

srcset="
{{ img_url_base | img_url: '200x', format: 'webp' }} 200w,
{{ img_url_base | img_url: '400x', format: 'webp' }} 400w,
{{ img_url_base | img_url: '600x', format: 'webp' }} 600w,
{{ img_url_base | img_url: '800x', format: 'webp' }} 800w
"
sizes="(max-width: 768px) 50vw, 25vw" {# Ajuste conforme seu layout #}
alt="{{ product.featured_image.alt | escape }}"
width="{{ img_width }}"
height="{{ img_height }}"
loading="lazy"
class="product-card__image">

{{ product.title }}
{{ product.price | money }}

• Explicação:
• Usamos img_url com format: 'webp' para garantir o formato moderno.
• srcset e sizes garantem que o navegador escolha a imagem do tamanho mais apropriado.
• width e height fixos evitam CLS.
• loading="lazy" para imagens abaixo da dobra.
• Adicionamos um aspect-ratio no CSS para reservar o espaço correto da imagem mesmo antes dela carregar, prevenindo CLS.

Exemplo 2: Otimizando JavaScript no theme.liquid

Vamos supor que você tem um script para um carrossel de produtos que só aparece na homepage e um script de análise que precisa ser carregado de forma assíncrona em todas as páginas.

No arquivo layout/theme.liquid:

{% if template == 'index' %}

{% endif %}



{{ 'theme.css' | asset_url | stylesheet_tag: preload: true }}

 {# Scripts de bibliotecas #}
 {# Scripts do seu tema #}


{% if template == 'index' %}


{% endif %}




{{ content_for_layout }}

• Explicação:
• preload para a imagem LCP na homepage.
• defer para scripts que precisam do DOM completo.
• async para scripts independentes.
• Condicional {% if template == 'index' %} para carregar o script do carrossel apenas na homepage.
• Scripts de chat ou pop-ups podem ir no final do com async para não bloquear o carregamento principal.

Exemplo 3: Usando o PageSpeed Insights na Prática

1. Escolha uma página: Vá para a homepage, uma página de produto popular ou uma página de coleção.

2. Execute a análise: Acesse PageSpeed Insights e cole a URL da sua página.

3. Interprete os resultados:

• Pontuação de Performance: De 0 a 100. Acima de 90 é ótimo, 50-90 precisa de melhorias, abaixo de 50 é crítico.
• Core Web Vitals: Veja as pontuações de LCP, INP e CLS. Elas são verdes, amarelas ou vermelhas. Nosso objetivo é verde! 🟢
• Oportunidades: Esta seção é ouro! Ela lista ações específicas que você pode tomar, como “Remover recursos que bloqueiam a renderização”, “Servir imagens em formatos de próxima geração”, “Adicionar width e height às imagens”.
• Diagnósticos: Detalhes técnicos para desenvolvedores.

[VÍDEO: Demonstração rápida de como usar o PageSpeed Insights, navegando pelos resultados e explicando uma “Oportunidade” comum como “Servir imagens em formatos de próxima geração” ou “Adicionar width e height“.]

🎯 Exercícios e Desafios

Hora de aplicar o que aprendemos!

1. Auditoria de Performance da sua Loja:

• Escolha 3 páginas chave da sua loja Shopify (ex: Home, Página de Produto, Página de Coleção).
• Execute o Google PageSpeed Insights para cada uma, tanto para mobile quanto para desktop.
• Desafio: Identifique o elemento LCP em cada página. Sugira pelo menos uma ação para otimizá-lo.
• Desafio: Verifique se há algum “Layout Shift” (CLS) significativo. Qual elemento o causa? Como você o resolveria?

2. Otimização de Imagens no Código:

• Vá para um dos seus snippets ou seções que exibe imagens de produtos (ex: product-card.liquid ou uma seção de “Produtos em Destaque”).
• Implemente o uso de srcset, sizes, width, height e loading="lazy" para todas as imagens de produto.
• Verificação: Execute o PageSpeed Insights novamente após a mudança para ver a melhora nas métricas de imagem e CLS.

3. Gerenciamento de Apps:

• Vá para a seção “Apps” no seu admin Shopify.
• Faça uma lista de todos os apps instalados.
• Desafio: Identifique pelo menos um app que você raramente usa ou que poderia ser substituído por uma solução mais leve (talvez até mesmo customizada com Liquid/JS simples). Considere desinstalá-lo se não for essencial.

📝 Resumo da Aula

Ufa! Que aula intensa e super importante, não é? Cobrimos bastante terreno hoje:

• Entendemos os Core Web Vitals (LCP, INP, CLS) e como eles são cruciais para SEO, UX e conversão.
• Aprendemos a usar ferramentas poderosas como PageSpeed Insights e Lighthouse para diagnosticar problemas de velocidade.
• Identificamos os principais vilões da performance em Shopify: imagens, JS, CSS, fontes e, claro, os aplicativos de terceiros.
• Vimos estratégias práticas para otimizar cada um desses elementos, desde o uso inteligente de img_url e srcset até o carregamento assíncrono de scripts com defer e async.
• Reforçamos a importância de um código Liquid eficiente e de uma auditoria constante dos apps instalados.

Lembre-se: uma loja rápida não é apenas um “nice-to-have”, é um must-have no e-commerce moderno. Comece com as otimizações mais impactantes e continue iterando! 📈

🚀 Preparação para próxima aula

Com a sua loja agora rodando a toda velocidade, é hora de mergulhar em como podemos medir e analisar o comportamento dos usuários de forma avançada para tomar decisões ainda mais inteligentes.

Na próxima aula (Aula 80), vamos explorar a fundo o Google Analytics 4 (GA4) e outras ferramentas de análise de dados. Vamos aprender a configurar eventos personalizados, relatórios avançados e a interpretar os dados para otimizar ainda mais suas vendas e a experiência do cliente. Será uma aula super prática para transformar dados em ação! 📊

📚 Recursos Adicionais

• Google Web Vitals: web.dev/vitals/ (Documentação oficial e aprofundada)
• Google PageSpeed Insights: developers.google.com/speed/pagespeed/insights
• Documentação Shopify sobre Performance do Tema: shopify.dev/docs/themes/best-practices/optimize-performance
• Guia de Imagens Responsivas (MDN): developer.mozilla.org/pt-BR/docs/Web/HTML/Element/img (Para aprofundar em srcset e sizes)
• Guia sobre async e defer (HTML Standard): html.spec.whatwg.org/multipage/scripting.html#attr-script-async

Até a próxima aula, e que suas lojas voem! 💨