Otimização de desempenho Web (WPO): Um guia completo

Quem nunca passou por aquele momento crítico em que estamos prestes a fazer uma compra importante, como uma passagem de avião ou reservas para um jantar, e a página simplesmente para de carregar? Seu coração acelera quando você se pergunta se a transação foi concluída e entra em pânico ao pensar na possibilidade de ser cobrado duas vezes. A frustração se instala: você precisava reservar alguma coisa e perdeu a chance porque uma página não carregou como deveria.

Se você se identifica com essa montanha-russa de emoções, então entende a importância da otimização ao criar um site.

O desempenho de site mede a velocidade com que as páginas de um site são carregadas e exibidas no navegador de um usuário em qualquer tipo de dispositivo, isso impacta a interatividade e a usabilidade em geral. Em resumo: quanto mais rápido um site carrega e é exibido, melhor é o seu “desempenho”.

A infraestrutura do servidor e da plataforma são fundamentais para o bom desempenho de um site, mas outros fatores podem afetar a performance, como sobrecarregar sem necessidade o site com conteúdo e imagens. Neste guia, vamos abordar os fundamentos do desempenho de sites, além de explorar o que você pode fazer para monitorar, oferecer suporte e otimizar seu site.

Dica: o desempenho dos sites Wix agora está melhor do que nunca.

Aprimoramentos constantes da infraestrutura — como a otimização contínua do código e conversões automáticas de imagens para o formato WebP — permitem que os sites carreguem mais rápido, independentemente do seu dispositivo ou localização.

Seja qual for o seu setor ou nicho, pense no desempenho de site como um empurrão para o seu sucesso on-line: muitas vezes um bom desempenho inicial é tudo o que um visitante precisa para garantir que não apenas interaja novamente com seu site, mas também que se converta em um cliente. Por exemplo, se um visitante de um site sofrer com o congelamento de uma página ou se um conteúdo demorar um segundo a mais para carregar, ele provavelmente não vai retornar ao seu site. Isso pode causar um impacto duradouro não só em relação ao seu site, mas também na forma como o público percebe a sua marca.

Como Niya Noneva, Especialista Sênior em Soluções do Contentsquare, colocou no relatório de benchmark digital de 2022:

“Com tantas pessoas no mundo sofrendo de fadiga por causa das inúmeras teleconferências e buscando reduzir ainda mais seu tempo em frente às telas, cada segundo de atenção e engajamento do usuário conta. Tempos de carregamento lentos são intoleráveis pelos usuários ocupados e com atenção limitada. Os clientes querem que suas experiências em um site valham a pena."

Vamos falar mais sobre o motivo pelo qual o desempenho é tão importante, ele impacta:

● A experiência do usuário

● A taxa de rejeição e retenção de visitantes

● As taxas de conversão

● A percepção da marca

● A cultura mobile

● O SEO

Ao criar um site, é fundamental considerar o quanto o design afeta o desempenho. Se um site tem uma aparência incrível, mas demora para carregar, se comporta de maneira irregular ou demora para reagir, é muito provável que seus visitantes percam a paciência, fiquem frustrados e até saiam da página. Isso ocorre porque esses elementos estéticos prejudicam a experiência do usuário no seu site.

“O desempenho do site está diretamente ligado à experiência do usuário,” diz Lara Hogan, autora de Designing for Performance (Design com foco no desempenho, em tradução livre). “Ao trabalhar no design de um novo site, você precisa considerar os elementos da experiência do usuário, como: layout, hierarquia, intuitividade, facilidade de uso e muito mais.”

Ao fornecer uma experiência de usuário que leva em consideração o desempenho do site, você terá maiores chances de garantir o sucesso nos negócios.

Os proprietários de sites têm um prazo extremamente curto para causar uma boa primeira impressão nos visitantes — por isso, é essencial que o site tenha um bom desempenho. A taxa de rejeição mede a porcentagem de visitantes que chegam a um site e saem depois de visitar apenas uma página ou que entraram e não clicaram em nenhum link. De acordo com o Google, se uma página leva três segundos para carregar, ao contrário de um segundo, a taxa de rejeição pode chegar a 32%.

Se o seu site for leve e rápido e o usuário tiver uma boa experiência, é provável que ele não saia da página e até clique em alguns links. Essa experiência pode até levá-lo a retornar ao seu site e comprar alguma coisa ou solicitar seus serviços. De acordo com a Cloudflare, “quanto mais rápido uma página carregar, maior será a probabilidade de um usuário realizar a ação pretendida nessa página”.

Porém, um estudo da Portent de 2019 descobriu que os primeiros cinco segundos do tempo de carregamento de uma página são cruciais na taxa de conversão. Até mesmo um atraso de apenas um segundo pode reduzi-la em 4,42%.

Monitorar o desempenho e a aparência geral do seu site pode sinalizar para os clientes que você valoriza o tempo e os gastos deles. Apenas uma experiência ruim com um site de baixo desempenho pode influenciar a confiança que os clientes têm na marca e a percepção geral dela.

Imagine o seguinte: um membro de uma família famosa posta um Story no Instagram usando um moletom da sua marca. Então, um micro-influenciador publica o link para a página de produtos do seu site, o que dá um call-to-action para os seguidores que são predominantemente da Geração Z, mostrando que o moletom não só está disponível, como também está à venda. Milhares de visitantes de alta intenção de compra decidem entrar no seu site e comprar por impulso, mas se deparam com uma página que demora para carregar. Se esses compradores impulsivos são como 60% de seus pares, é provável que saiam de um site ou aplicativo se ele demorar muito para carregar.

E o estrago não para por aí. A decepção deles pode persistir e afetar a forma como veem sua marca. Um estudo da IBM afirma que “as empresas que não conseguem atender às expectativas extremamente altas da Geração Z correm o risco de cair rapidamente em desuso — e abrir caminho para os concorrentes”.

Em média, olhamos para o smartphone mais de 200 vezes por dia, ou seja, uma vez a cada 4 minutos, então não é de se surpreender que 60% de todo o tráfego da internet venha de telefones celulares. Criar um design de alto desempenho e rápido voltado para dispositivos móveis é um elemento importante da experiência do usuário. Os usuários de smartphones provavelmente navegam em seu site durante trajetos ou enquanto esperam um café, o que significa que estão cercados por distrações, portanto, a velocidade é fundamental.

Pesquisas mostram que uma melhoria de apenas 0,1 segundo na velocidade de um site mobile aumenta as taxas de conversão em 8,4% para sites de varejo. Você pode verificar se seu site é compatível com dispositivos móveis usando este teste simples.

O desempenho afeta não só a forma como o usuário percebe seu site, mas também a forma como os visitantes encontram seu site.

Os Core Web Vitals (que vamos explicar mais abaixo) fazem parte do Google Page Experience (um conjunto de indicadores que medem como o usuário percebe sua experiência em uma página) e podem afetar a forma como um site aparece em uma página de resultados de motores de busca (SERP — Search Engine Results Page, na sigla em inglês).

No entanto, é importante notar que o Google não considera os Core Web Vitals como fatores de ranqueamento fundamentais.

John Mueller, Especialista em SEO da Google, disse que “a relevância ainda é muito mais importante.”

“A experiência na página é apenas um dos muitos fatores usados para ranquear as páginas”, explica ele. “Lembre-se de que a intenção de busca ainda é um fator muito forte, então, uma página com uma experiência abaixo da média ainda pode ter um ranqueamento alto se tiver conteúdo excelente e relevante”.

Por exemplo, se sua empresa aparece ao lado de um concorrente na página de resultados de um motor de busca, o site que tiver o melhor desempenho talvez tenha um ranqueamento mais alto entre os resultados.

O desempenho de um site é medido por vários testes de velocidade e qualidade, incluindo a rapidez com que um site carrega quando um visitante o acessa, a velocidade de resposta às interações do usuário e a fluidez das mídias, como animações. Esses testes são feitos em laboratórios, através de simulações controladas, ou em campo, usando experiências de usuários e medições reais.

Como existem muitas ferramentas e métricas disponíveis, a iniciativa Core Web Vitals da Google criou um padrão unificado e alinhado para o setor a fim de ajudar os sites a se concentrarem nas métricas mais importantes. Embora sejam fundamentais para medir o desempenho de um site, é importante observar que elas não são as únicas métricas que influenciam o desempenho.

Os Core Web Vitals medem velocidade de carregamento, estabilidade visual e interatividade usando três indicadores:

● Largest Contentful Paint (LCP) ou Exibição do Maior Conteúdo mede o tempo que leva para renderizar a maior imagem ou bloco de texto da página.

● Cumulative Layout Shift (CLS) ou Mudança de Layout Cumulativa mede todas as mudanças de layout que aconteceram durante a vida útil de uma página. Uma mudança de layout ocorre sempre que um elemento visível muda de posição enquanto a página carrega.

● First Input Delay (FID) ou Latência de Entrada mede o intervalo entre a primeira

interação do usuário com uma página (ao clicar em um link ou botão, por exemplo) e

o momento em que o navegador processa essa interação.

Dica: saiba mais sobre Core Web Vitals e o desempenho dos sites Wix, incluindo as

diferenças de pontuação entre as versões mobile e desktop.

Em sua conferência "Web Performance Made Easy" de 2018, o Google deu muita ênfase à velocidade de carregamento, dizendo: “A maioria dos usuários (75%) classifica a velocidade como a mais importante na hierarquia de UX dentre suas necessidades.”

A velocidade de carregamento refere-se à rapidez com a qual o conteúdo de uma página carrega. Essa velocidade pode ser medida de várias formas, incluindo:

● Speed Index (SI) ou Índice de Velocidade mede a rapidez com que o conteúdo é exibido durante o carregamento da página.

● First Contentful Paint (FCP) ou Primeira Exibição de Conteúdo mede o intervalo entre o início do carregamento da página e o momento em que uma parte do seu conteúdo (como textos, imagens e outros elementos gráficos) renderiza na tela.

● Time to Interactive (TTI) ou Tempo até a Interatividade mede o intervalo em segundos entre o momento em que um usuário entra na página até o ponto em que ela se torna totalmente interativa (ou seja, quando se torna possível clicar em botões e interagir com seu site).

● Total Blocking Time (TBT) ou Tempo Total de Bloqueio mede o tempo total que sua página ficou bloqueada, impedindo o usuário de interagir com ela.

● Time to First Byte (TTFB) ou Tempo até o Primeiro Byte mede o intervalo de tempo entre o momento em que o navegador solicita uma página e o momento em que ele recebe o primeiro byte de informação do servidor.

Para otimizar o desempenho do seu site, vamos entender um pouco mais sobre os parâmetros que você deve considerar.

Requisições HTTP

Requisições HTTP (ou protocolo de transferência de hipertexto) estruturam como os

navegadores e os servidores da web se comunicam. Quando você digita um URL no navegador, você está pedindo que o seu navegador requisite ao servidor que hospeda o site cada um dos arquivos de uma página. Em geral, quanto mais complexa for uma página, mais requisições HTTP serão necessárias para carregar o site completamente, dessa forma, mais lento será o carregamento.

Normalmente, quanto menos requisições HTTP um site receber, melhor será seu desempenho. Imagens, JavaScript, arquivos CSS e recursos de terceiros são alguns dos elementos que afetam o número de requisições HTTP.

Peso da página

Enquanto que o número de requisições afeta o desempenho, o mesmo acontece com o conteúdo que está sendo requisitado. O peso da página, também chamado de tamanho da página, refere-se ao volume dos seus arquivos — o HTML, imagens ou outras mídias, JavaScript, CSS e recursos de terceiros presentes na página. Quanto mais pesado for um site e quanto mais elementos e recursos precisem carregar, pior será o desempenho da página.

● Tamanho da imagem: as imagens desempenham um papel fundamental no design do seu site. Elas transmitem a mensagem da marca, cativam os visitantes, dão suporte ao conteúdo do blog e podem até atuar como calls-to-action (CTA). Porém, as imagens pesam mais do que arquivos simples de texto HTML, demoram para carregar e, portanto, podem afetar bastante o desempenho de um site.

Para garantir a melhor performance possível, todas as imagens precisam desempenhar um papel estratégico no seu site e serem otimizadas. Otimização de imagem refere-se ao processo de conversão de imagens para o menor tamanho de arquivo possível sem diminuir a qualidade. Você pode usar uma ferramenta de redimensionamento de imagens para deixá-las do tamanho desejado.

Você pode então baixá-las nos formatos de arquivo JPG, PNG ou GIF. O melhor formato em termos de desempenho é o JPG, porque imagens nesse formato podem ser até dez vezes menores do que imagens em PNG e, por essa razão, carregam muito mais rápido. É uma boa prática evitar GIFs, porque essas imagens animadas geralmente são muito pesadas e, portanto, demoram mais tempo para carregar. Em vez disso, experimente usar um vídeo, porque o tamanho do arquivo é menor e pode ser visualizado pelo usuário antes do arquivo baixar totalmente.

Dica: todas as imagens que são adicionadas a um site Wix são automaticamente otimizadas e convertidas para formatos de imagens mais modernos (como o WebP) para garantir downloads mais rápidos e de alta qualidade. Os sites Wix também usam o “lazy loading” (ou carregamento lento) para otimizar o desempenho, de forma que os navegadores atrasem o carregamento do conteúdo ou mídia que estiver fora do campo de visão inicial do usuário.

● Tamanho do arquivo: quanto menor o arquivo, mais rápido ele é enviado e baixado. Para otimizar o desempenho, os arquivos podem ser “compactados” por um servidor da web ou reduzidos ao máximo sem perda de informações e, depois, são enviados a um navegador que vai recebê-los e renderizá-los normalmente.

Dica: o Wix compacta automaticamente todos os arquivos usando o Brotli ou gzip para downloads mais rápidos e eficientes.

Hospedagem de sites

Hospedagem de sites refere-se à entrega dos arquivos de um site para o navegador de um usuário. Opções diferentes de hospedagem podem afetar o desempenho do seu site com base no tamanho do site, tráfego e escalabilidade.

Dica: o Wix cuida da hospedagem do seu site para você, ao contar com servidores em vários locais ao redor do mundo, automaticamente entregues e armazenados em cache por CDNs (ou Redes de Fornecimento de Conteúdo), o que garante tempos de resposta rápidos, especificamente em relação ao Time To First Byte (TTFB).

Armazenamento em cache

O armazenamento em cache é o processo de armazenamento de dados (seja no servidor ou por meio de um navegador) que permite que os dados sejam acessados mais facilmente no futuro para evitar um ciclo de requisição e resposta HTTP.

Por exemplo, se você tem um site de e-commerce que vende achados de brechós, você terá certos ativos, como o seu logo, que aparece no mesmo lugar em todas as páginas. Sem o armazenamento em cache, a página teria que baixar o logo toda vez que o usuário clicasse em um novo produto. Os sites Wix usam o armazenamento em cache automático em todas as páginas.

Localização geográfica

Apesar de parecer que a internet é onipresente e que está e não está em todos os lugares ao mesmo tempo, a infraestrutura que faz com que os sites funcionem não é apenas física, mas espalhada por todo o mundo. Cada requisição HTTP precisa viajar do navegador para o servidor e, por sua vez, as informações precisam voltar do servidor e ser entregues ao navegador. Quanto maior a distância física que os dados precisem percorrer entre servidores e navegadores, maior será o tempo necessário para que um ciclo de requisição e resposta seja concluído.

Por exemplo, um site hospedado em um servidor localizado em Seattle, Washington, teria um desempenho melhor para uma requisição proveniente de um navegador em Seattle, ao contrário de uma requisição vinda de Madagascar, porque os dados têm menos quilômetros físicos para percorrer.

Para reduzir a distância que os dados precisam percorrer para responder às requisições, os provedores de hospedagem espalham servidores em locais estratégicos (chamados de servidores de proxy) ao redor do mundo como parte das Redes de Fornecimento de Conteúdo. Esses servidores hospedam cópias em cache de páginas da web, imagens e vídeos e respondem rapidamente às requisições dos navegadores mais próximos deles.

Dica: o Wix hospeda todos os seus sites em CDNs e data centers distribuídos globalmente, além de habilitar automaticamente o cache no servidor, salvando sem interrupções em nossas CDNs para garantir a entrega de conteúdo de forma rápida e eficiente, seja qual for a localização.

Add-ons de terceiros adicionam funcionalidades complementares ao seu site ao acessarem dados armazenados em outro servidor. Como eles fazem requisições HTTP para esses servidores, geralmente demoram mais para carregar. Para otimizar o desempenho, mantenha apenas os add-ons que contribuem bastante para a experiência do usuário.

Redirecionamentos de URL

Os visitantes e os motores de busca são redirecionados do seu site para URLs diferentes da página requisitada originalmente. Isso acontece quando um navegador envia uma requisição HTTP a um servidor para uma determinada página URL que foi redirecionada para outra página.

O servidor responde à requisição do navegador com a nova página URL e depois, o navegador responde com uma nova requisição para essa URL. Como isso exige a conclusão de um ciclo de requisição e resposta HTTP adicional, existe a possibilidade de o desempenho da página ser afetado negativamente. Várias requisições de redirecionamento podem sobrecarregar demais os recursos do navegador e diminuir o tempo de carregamento da página.

À medida que seu negócio cresce e seu conteúdo on-line muda, talvez seja necessário atualizar o fluxo do seu site usando redirecionamentos. Por exemplo, você criou várias postagens de blog sobre o mesmo tópico e quis reuni-las em apenas uma postagem estratégica com base em um modelo de clusters de tópicos. Embora os redirecionamentos sejam, em geral, inevitáveis e necessários para o SEO, garanta que eles sejam os mais simples possíveis para ter um bom desempenho.

Dica: use os relatórios de log do bot para determinar problemas/códigos de erro, ou o aplicativo Deepcrawl (pago), para definir redirecionamentos usando o Gerenciador de Redirecionamento do Wix. (Vá ao seu painel de controle, clique em Recursos de SEO e clique em Gerenciador de redirecionamento de URL.

O primeiro passo para verificar o desempenho do seu site é testá-lo.

Dica: no Painel de controle Velocidade do Site do Wix, você pode visualizar o TTI (time to interactive, ou tempo para interatividade) do seu site, além de testar, analisar e otimizar o desempenho dele seja nas versões desktop ou mobile. Você também pode monitorar a velocidade de carregamento por página, compará-la com a dos seus concorrentes, e ainda aprender como melhorar a experiência geral do usuário.

Antes de começar os testes, considere o seguinte:

● Preste atenção na sua fonte de dados. Dados de campo ou dados de monitoramento real de usuários (RUM) são as métricas mais precisas porque incluem dados de seus usuários reais e de visitas reais e refletem as verdadeiras condições dos dispositivos, redes e localizações dos seus usuários.

Mas nem todos os sites têm tráfego suficiente para obter tais dados de campo, então eles podem usar dados de laboratório. Ao contrário dos dados de campo, os dados de laboratório vêm de um ambiente simulado. Em um site mobile, as condições simuladas são testadas em um dispositivo de baixo custo com condições de rede não-ideais, portanto, não são 100% precisas porque não refletem necessariamente a experiência de um usuário do mundo real.

Embora sejam menos precisos, os dados de laboratório são úteis caso você queira

descobrir se uma alteração no design do site afetaria o desempenho. Digamos que você queira incorporar uma nova galeria ao site, então você precisa verificar se isso pode causar algum impacto perceptível no desempenho antes de publicar. Como não é possível obter dados de monitoramento real (RUM) porque o design ainda não está ativo, os dados de laboratório podem ser usados para obter resultados imediatos a fim de detectar uma hipotética queda de desempenho durante a experiência típica do usuário das versões desktop e mobile do site.

● Preste atenção ao cache. Para testes em laboratório, os resultados mudam sempre que você atualiza uma página. Para cada teste, é recomendável atualizar entre três a cinco vezes e calcular uma média para obter resultados mais precisos e confiáveis.

● Testes diferentes geram resultados diferentes. Cada teste funciona de forma

diferente e calibra sua própria métrica e pontuação de desempenho. Além disso, ao

analisar um URL, você receberá dois relatórios diferentes — um para a versão desktop e outra para a mobile. Eles provavelmente trarão resultados de desempenho diferentes devido aos recursos de processamento, condições de rede e conteúdo do site, que às vezes difere entre as versões desktop e mobile. Para obter um resultado preciso, faça de um a três testes — mas preste atenção às especificidades de cada teste e de onde os dados vêm para entender melhor as diferenças.

O Google tem várias ferramentas gratuitas que medem o desempenho de sites, incluindo o PageSpeed Insights e o Google Lighthouse. Outras ferramentas que vale a pena conferir são a GTmetrix, Treo e Calibre.

Por Bernardo Schanz

Blogger & Growth Marketing Specialist - Português