Como otimizar seu site para um melhor desempenho
O desempenho na web tem um papel importante na jornada online. Sites com alto desempenho elevam a percepção da marca, garantindo uma vantagem competitiva online e um motivo para que os usuários continuem voltando. Sites mais rápidos geram maior engajamento e retêm os visitantes por mais tempo, aumentando as vendas e os resultados.
Para garantir uma excelente experiência de usuário, você precisa otimizar constantemente o desempenho do seu site. E com as novas métricas de desempenho do Google, o Core Web Vitals (CWV), otimizar seu site ficou mais fácil.
As métricas CWV simplificam a medição e o monitoramento do desempenho avaliando três fatores do site que afetam a velocidade da página. Mas por que você precisa saber disso? Porque o Google está integrando o Core Web Vitals em seu algoritmo de busca, o que significa que essas métricas passarão a exercer um papel importante na forma como o maior mecanismo de busca do mundo classifica seu site.
No Wix, estamos constantemente atualizando nosso software e melhorando nossa infraestrutura para fazer com que os sites de nossos usuários carreguem e operem o mais rápido possível. No entanto, existem muitos outros fatores que contribuem para o desempenho de um site, como aplicativos, recursos de design e mídia — e é aí que você entra.
Neste artigo, apresentaremos os vários componentes que afetam o desempenho de um site para que você possa se antecipar, uma vez que o Core Web Vitals passará a ser um novo padrão de medição de desempenho.
Introdução
Prioridades para a otimização
Nesta seção, abordaremos as perguntas que você pode fazer a si mesmo e as percepções que pode obter para melhorar o desempenho do seu site imediatamente.
Qual é o objetivo do seu site?
Ao pensar em otimização na web, uma boa regra é considerar os objetivos do seu site. Isso ajudará você a entender o tipo de experiência que deseja que seus visitantes tenham e dará uma ideia melhor das ações que quer que eles realizem ao navegar pelo seu site.
Verifique o status de velocidade do seu site
Antes de começar a otimizar, você precisará verificar o tempo de carregamento do seu site e descobrir o que pode estar diminuindo a velocidade. Com o novo painel de controle de velocidade do site, no painel de análise, fica mais fácil ver o desempenho do seu site com base em medições de usuários reais (também conhecido como dados de campo). Você também pode verificar sua pontuação do PageSpeed Insight, com base em dados de laboratório, tanto para desktop quanto para dispositivos móveis.
Ao verificar seu desempenho regularmente, você obterá as percepções necessárias para manter seu site na direção certa.
O que você sabe sobre os visitantes de seu site (e o tempo de carregamento para eles)?
A análise do seu site dirá muito sobre os visitantes do seu site. Eles estão em países com redes mais lentas? Estão usando dispositivos móveis de última geração? Nesse caso, você pode considerar a otimização de alguns aspectos do seu site para garantir o tempo de carregamento ideal, independentemente da rede ou dispositivo que o visitante esteja usando.
Como começar
Otimize suas mídias para um carregamento mais rápido
Fotos, ilustrações e vídeos podem tornar seu site mais atraente, mas também mais lento. Para garantir um carregamento rápido para os visitantes do site, o Wix otimiza automaticamente suas imagens e vídeos. Ao carregar as imagens com um tamanho pequeno (LQIPs) e adiar o carregamento de mídias que estão fora da janela de visualização inicial ("lazy-loading"), seu site carregará rapidamente e sem problemas. E conforme o visitante rola a página para baixo, o Wix substitui os LQIPs por mídias de alta qualidade para otimizar o tempo de carregamento.
Aqui estão algumas recomendações para otimizar suas mídias e melhorar o desempenho do seu site.
Quando possível, use JPGs em vez de PNGs
As imagens JPG podem ser até 10x menores do que as imagens PNG e, como resultado, carregam mais rápido. Você deve usar PNGs quando precisar de transparência em suas imagens (que não são compatíveis com JPGs) ou quando for necessário que elas tenham uma qualidade muito alta.
Use SVGs para formas, ícones e logotipos
PNGs e JPGs funcionam bem para fotos, mas SVGs funcionam melhor para formas e elementos de ilustração, como logotipos. SVGs geralmente são muito menores do que PNGs e JPGs Eles também carregam mais rápido porque estão diretamente incorporados no HTML. Além disso, SVGs permanecem nítidos independentemente do quanto são ampliados, portanto, tente usá-los quando possível.
Recomendamos o uso de imagens/PNG somente quando o SVG for MUITO complexo (por exemplo, um SVG representando a costa da Noruega e aproximadamente 250k) ou as dimensões do elemento no layout forem muito pequenas, especialmente para formas que aparecem abaixo da dobra.
Evite os GIFs animados
Todos adoram uma animação, mas GIFs animados geralmente têm tamanhos de arquivo grandes e tempos de carregamento longos. Se você quiser que seu site tenha animação, tente usar um vídeo, pois eles têm tamanhos de arquivo menores e podem exibir o conteúdo aos usuários antes de serem baixados completamente. Recomendamos o uso de GIFs para imagens ou logotipos animados simples, ou se sua animação de conteúdo contiver alguns quadros e um tamanho pequeno (por exemplo, 100X100).
Dica: garanta um melhor desempenho com o VideoBox do Wix
Usar VideoBox em vez de GIFs animados oferece melhor desempenho do que reprodutores de vídeo externos, como YouTube e Vimeo.
Otimização de mídia
Mais práticas recomendadas para mídias
Aqui estão mais algumas dicas sobre como otimizar as mídias para melhorar o desempenho de seu site.
Combine imagens quando possível
Se você estiver usando sobreposições de imagens, combiná-las em uma única pode reduzir o tamanho total do download. Isso também pode eliminar a necessidade de transparência, permitindo que você use um único JPG e acelere o tempo de carregamento.
Relaxe e aproveite o lazy loading
O Wix utiliza o "lazy loading" para garantir tempos de carregamento mais rápidos. Isso ocorre quando uma imagem de alta resolução é baixada e substituída por um LQIP. Para otimizar o lazy loading, mova as imagens com prioridade mais baixa para a parte inferior da página, de forma que elas tenham tempo para carregar completamente.
Divida imagens de fundo grandes em seções
As páginas da web podem executar várias telas e os usuários podem precisar esperar até que o navegador carregue imagens de fundo grandes. Para acelerar o processo, divida essas imagens de fundo em seções verticais, cada uma ocupando cerca de uma tela. Dessa forma, o lazy loading poderá ajudar sua página a carregar mais rápido, e as imagens só serão baixadas quando um usuário começar a rolar para baixo.
Melhore o desempenho de seu site com o Wix Video Player
Use o reprodutor de vídeo integrado do Wix em vez de reprodutores de vídeo externos, como YouTube e Vimeo, para garantir um melhor desempenho do site.
Alinha as cores de fundo e as cores principais da imagem
Você pode definir uma cor para as imagens de fundo, como listras e colunas. Essa cor ficará visível quando exibida atrás de uma imagem parcialmente transparente, bem como antes de qualquer imagem ser carregada. Selecionar uma cor de fundo que combine com a cor principal de sua imagem também pode melhorar a forma como os usuários percebem a experiência em sua página.
Um site que utiliza lazy loading para tempos de carregamento ideais
Otimização adicional de mídia
Conclusion
Many agencies aren’t upselling soon enough. And they’re risking premature customer churn because of it.
Knowing when to upsell a client can feel more art than science, but a study by Vendasta claims to have found the perfect time to expand your relationship with a client: 3 months.
Ninety days may seem like a short timeline to start upselling, but if a client is satisfied with your work in that time period then upselling can bring them more value quicker than they expected. Alternatively, if they’re not satisfied, it gives you a chance to recalibrate so you can keep their business. Both of those scenarios result in additional revenue you would have missed out on had you not initiated the conversation.
Upsells are easier to approach and able to start earlier than most agencies realize. Here are four critical steps that will help you upsell sooner successfully.
Otimize seu texto
Em geral, o texto carrega mais rápido do que as imagens. Ainda assim, há maneiras de otimizar o texto e as fontes de seu site.
Incluir texto acima da dobra
Ter um texto significativo acima da dobra ajuda os visitantes a saber mais sobre seu site antes de começarem a explorá-lo. Faça com que ele seja envolvente e acionável para que as pessoas queiram continuar navegando. Os visitantes podem abandonar um site quando o texto acima da dobra não é relevante (ou pior, podem ficar com a impressão de que a página não está totalmente carregada porque está muito vazia), então use esse espaço — e suas palavras — com sabedoria para gerar maior impacto e engajamento.
Limite suas fontes
Sabemos que as fontes podem ser lúdicas, mas usar muitas fontes, espessuras e tamanhos pode tornar o texto confuso, de difícil leitura e afetar o desempenho da sua página. Em muitos casos, o texto só se torna visível quando um arquivo de fonte é baixado, portanto, se vários arquivos de fonte precisarem ser baixados, o carregamento da página poderá ficar mais lento. Recomendamos limitar o número de variações de fonte em uma página a, no máximo, cinco.
Faça upload de fontes personalizadas apenas uma vez
Se você optar por usar uma fonte personalizada, certifique-se de não enviar a mesma fonte várias vezes. Isso pode fazer com que a fonte seja baixada repetidamente para a mesma página, prejudicando o desempenho do seu site e tornando-o mais lento. O Editor Wix é uma ótima solução para fazer upload de fontes personalizadas que você deseja, priorizando tempos de carregamento mais rápidos.
Evite usar texto em imagens
Usar textos e imagens juntos pode gerar maior impacto aos visitantes., mas usar texto dentro das imagens pode prejudicar o desempenho do seu site. Os motores de busca ou leitores de tela não conseguem detectar o texto incorporado em uma imagem. Além disso, na maioria dos casos, o texto estará pixelizado e mais difícil de ler. E, em termos de desempenho, ele não será visível até que a imagem seja totalmente carregada.
Use o efeito "reveal animation" com moderação
O efeito "reveal animation" pode chamar a atenção para conteúdos importantes e enriquecer a experiência durante o carregamento. Mas quando usado em excesso, pode desviar a atenção do visitante. Além disso, o texto ficará ilegível até que as animações sejam concluídas, o que aumentará o tempo de carregamento. Por essas razões, recomendamos que você não use esse efeito em demasia.
Utilize um contraste forte
Ao utilizar texto sobre uma imagem, certifique-se de que haja um forte contraste entre a imagem subjacente e a cor de fundo. Desta forma, o texto ficará legível antes do carregamento da imagem.
Exemplo da porção acima da faixa de um site
Otimização de texto
O que mais pode deixar seu site lento?
Se você ainda perceber problemas de desempenho no site, considere os seguintes itens:
Analise a complexidade de seu site e o comprimento da página
Uma maneira de avaliar sua experiência de carregamento é considerar o comprimento de sua página. As páginas de seu site se expandem para suportar a quantidade de conteúdo que você deseja publicar, mas quanto mais informações você tiver em uma página, mais longa ela será — e mais tempo levará para carregar. Considere dividir páginas excessivamente longas em várias páginas menores, com conteúdo específico.
Otimize seu site para dispositivos móveis
Use o Editor mobile para garantir que seu site fique incrível em todos os dispositivos. Escolha um layout, adicione conteúdo diferente da versão desktop, oculte conteúdos menos importantes e reduza o número de itens em galerias e feeds.
Entenda como o iFrames, o Google Ads e as ferramentas de rastreamento afetam o seu site
As integrações de sites como o iFrames (que baixam HTML extra e outros recursos) e o Google Ads podem afetar negativamente o desempenho do site. Use o iFrames com moderação e, se usar o Google Ads, certifique-se de que todas as caixas estejam visíveis. Ferramentas de rastreamento e análise (T&A) também podem causar lentidão, portanto, inclua apenas aquelas necessárias para analisar como os visitantes interagem com seu site. Você também pode testar o desempenho de seu site antes e depois (com e sem) os pixels de rastreamento, para avaliar o impacto que eles têm sobre a experiência de carregamento do seu site.
Limite o uso de lightboxes
Uma lightbox é uma janela pop-up que aparece no topo do conteúdo da página principal. As lightboxes são uma ótima maneira de exibir mensagens e anúncios importantes, mas usar uma lightbox que aparece automaticamente quando uma página é carregada, especialmente uma que apresente o conteúdo principal, gera um atraso até que esse conteúdo fique visível. É altamente recomendável usar lightboxes para informações complementares, como vendas especiais, e não para o conteúdo principal da página, como o nome do negócio.
Conclusão
Com os Core Web Vitals do Google sendo implementados como parte de seu algoritmo de busca, a otimização do desempenho deve ser sempre uma prioridade. No Wix, trabalhamos constantemente para que as centenas de milhões de sites hospedados em nossa plataforma tenham o melhor desempenho possível, mantendo-se à frente das mais recentes novidades com relação ao desempenho.
Dicas gerais de otimização
Ready to learn more?
For an overview of website performance and to get your site up to speed, read our Intro to Performance article. Or to get a detailed understanding of Core Web Vitals, read our in-depth guide.
Author: Dan Shappir
Dan focuses on optimizing all sites hosted on Wix for speed. With over 25 years of software development experience, Dan has worked on systems ranging from multi-user games to missile trajectory simulations. He is a frequent speaker at technical conferences, a panelist on the JavaScript Jabber podcast and a member of the Google Chrome Advisory Board (CAB). Dan holds an M.Sc. in Computer Science.
Quer saber mais informações?
Para um panorama do desempenho do site e para mantê-lo veloz, leia nosso artigo Introdução ao desempenho. Para entender melhor o Core Web Vitals, leia nosso guia detalhado.
O foco de Dan está na otimização de todos os sites hospedados no Wix para aumentar velocidade. Com mais de 25 anos de experiência no desenvolvimento de softwares, Dan trabalhou em sistemas que incluem de games multijogador a simulações de trajetória de mísseis. Ele é um palestrante frequente em conferências sobre tecnologia, palestrante no podcast JavaScript Jabber e membro do Conselho Consultivo do Google Chrome (CAB). Dan tem mestrado em Ciência da Computação.
Autor: Dan Shappir
Líder de tecnologia de desempenho no Wix.com
