A velocidade de carregamento impacta diretamente a experiência do visitante e a taxa de conversão. Pesquisas mostram que cada segundo adicional de carregamento pode reduzir as conversões em até 7%. Neste artigo, você vai aprender cinco formas práticas de acelerar suas páginas na Marketek.
Como Medir a Velocidade Atual
Antes de otimizar, saiba como está. Use ferramentas gratuitas para medir:
- Google PageSpeed Insights (pagespeed.web.dev): analisa desktop e mobile com notas de 0 a 100
- GTmetrix (gtmetrix.com): relatório detalhado com sugestões de melhória
- Lighthouse (integrado ao Chrome DevTools): análise completa incluindo acessibilidade e SEO
Meta: busque uma nota acima de 80 no PageSpeed para desktop e acima de 60 para mobile.
1. Comprima Suas Imagens
Imagens são a principal causa de lentidão nas páginas. Uma foto de alta resolução pode ter vários megabytes, quando o ideal séria poucos kilobytes.
O que fazer
- Redimensione antes de subir: se a imagem será exibida em 800px de largura, não suba uma imagem de 4000px
- Comprima sem perda visível: use ferramentas como TinyPNG, Squoosh ou ShortPixel
- Use o formato correto: JPEG para fotos, PNG para gráficos com transparência, WebP quando possível
- Resolução adequada: 72 DPI é suficiente para telas, não use 300 DPI (resolução de impressão)
Na Marketek
Ao fazer upload de imagens no editor, prefira arquivos já comprimidos. O ideal é que cada imagem tenha no máximo 200 KB.
2. Minimize Scripts Personalizados
Código customizado inserido no header ou no corpo da página pode atrasar significativamente o carregamento:
O que fazer
- Revise todos os scripts: acesse Sites > Configurações > Código do Header e avalie cada script
- Remova o que não usa: scripts de ferramentas que você não utiliza mais
- Carregue de forma assíncrona: adicione o atributo
asyncoudefernas tags de script quando possível - Consolide scripts: em vez de vários scripts separados, combine quando possível
Exemplo de carregamento otimizado
<!-- Carregamento assíncrono -->
<script src="seu-script.js" async></script>
<!-- Carregamento diferido -->
<script src="seu-script.js" defer></script>
3. Ative o Lazy Loading
O lazy loading faz com que imagens e elementos pesados sejam carregados apenas quando o visitante rola até eles, em vez de carregar tudo de uma vez:
O que fazer
- Na Marketek, o lazy loading está disponível para imagens e vídeos
- Ative a opção em Sites > Configurações > Performance > Lazy Loading
- Imagens abaixo da dobra (que não aparecem na primeira visualização) serão carregadas sob demanda
Quando não usar
- Imagens da seção hero: a primeira imagem da página deve carregar imediatamente
- Elementos críticos: qualquer elemento que precisa ser visível instantaneamente
4. Reduza o Número de Seções
Páginas com muitas seções e elementos aumentam o DOM (estrutura da página) e exigem mais processamento do navegador:
O que fazer
- Simplifique o layout: cada seção adicional aumenta o tempo de renderização
- Combine seções similares: em vez de 3 seções de benefícios, use uma com layout em colunas
- Remova seções ocultas: seções escondidas no mobile mas presentes no código ainda afetam o desempenho
- Limite o número de elementos por página: o ideal é manter entre 10 e 20 seções no máximo
Regra prática
Pergunte-se: “Essa seção contribui diretamente para a conversão?” Se a resposta for não, considere removê-la.
5. Otimize as Fontes
Fontes personalizadas podem adicionar centenas de kilobytes ao carregamento:
O que fazer
- Limite a quantidade: use no máximo 2 famílias de fonte (uma para títulos, outra para corpo)
- Selecione apenas os pesos necessários: não carregue Light, Regular, Medium, Semi-Bold, Bold e Extra-Bold se você só usa Regular e Bold
- Prefira fontes do sistema: fontes como Arial, Helvética e Georgia não precisam ser baixadas
- Use font-display: swap: garante que o texto seja exibido imediatamente com uma fonte substituta enquanto a personalizada carrega
Na Marketek
Em Sites > Configurações > Estilos Globais > Tipografia, selecione as fontes e pesos que realmente vai usar. Remova os que não são necessários.
Resumo de Otimizações
| Ação | Impacto na Velocidade | Dificuldade |
|---|---|---|
| Comprimir imagens | Alto | Baixa |
| Minimizar scripts | Alto | Média |
| Ativar lazy loading | Médio | Baixa |
| Reduzir seções | Médio | Baixa |
| Otimizar fontes | Baixo a Médio | Baixa |
Leia Também
🤖 Ficou com alguma dúvida?
Converse com o TekBot, nosso assistente IA especialista em Marketek. Ele pode te ajudar com configurações, dúvidas técnicas e melhores práticas — 24h por dia.