Desempenho e velocidade da Web: as melhores técnicas
Publicados: 2021-08-30A velocidade de carregamento e o desempenho da web estão na boca de todos nas comunidades de SEO e webperf, e mais amplamente no e-marketing e e-commerce.
Como lembra Andy Davies, consultor e referência em performance web:
“O contexto influencia a experiência,
A experiência influencia o comportamento,
comportamento influencia as receitas do negócio”.
Portanto, se você está tentando aumentar sua receita, seu SEO ou ambos, certamente saberá que páginas rápidas são essenciais para a qualidade da experiência do usuário. A velocidade também ajuda a enviar os sinais certos para o Google, que leva em consideração a velocidade desde a atualização do Page Experience.
Como você também sabe, um site deve atender às expectativas dos usuários antes de atender às dos mecanismos de pesquisa. Assim, a velocidade de exibição e a interatividade fazem parte dos pré-requisitos para uma experiência de usuário de qualidade, principalmente para promover engajamento e conversões! Observe, por exemplo, que, de acordo com um estudo do Google, 77% dos usuários da Internet estão mais inclinados a fazer pedidos em um site ou aplicativo que permita finalizar sua compra rapidamente.
Mas quais técnicas têm o impacto mais visível em seus visitantes, para oferecer a eles uma experiência de navegação suave e uma sensação real de velocidade?
Aqui está uma lista de verificação organizada por alavancas de otimização, para melhor velocidade de exibição e interatividade.
Otimize a velocidade de exibição de um site
Quanto mais leve for uma página, menos tempo ela precisa para ser exibida.
Além da otimização de recursos, você pode definir a taxa de exibição e as dimensões dos diferentes elementos que compõem uma página para melhorar a sensação de velocidade e usabilidade. Aqui estão algumas técnicas essenciais:
- Compressão de imagens para os formatos mais eficientes
A nova geração de formatos WebP (recomendado pelo Google) e AVIF (que oferece resultados ainda melhores) permitem reduzir o peso das imagens em até 50% em relação ao JPEG, mantendo a qualidade visual ideal. Sabendo que o peso das imagens representa cerca de 50% do peso das páginas, é uma alavanca essencial para tornar as suas páginas rápidas. - Adapte a exibição de mídia e imagens a diferentes telas
Redimensione e defina o tamanho da mídia e das imagens dependendo se o usuário visita seu site de um celular ou computador. - Reduza o peso dos recursos da página
Otimize seu código: minificação (remoção de caracteres desnecessários) de arquivos HTML, JS e CSS, e compactação de recursos (formatos Gzip e Brotli) e, em alguns casos, concatenação, são boas práticas para reduzir o peso das páginas e, portanto, acelerar a exibição no navegador. - Carregamento lento
Essa técnica consiste em carregar apenas o que está visível na tela, em vez de carregar a página inteira. Ou seja, o navegador fornece apenas o esforço estritamente necessário em relação ao que o visitante precisa ver em sua tela. - Otimizar fontes
Você pode otimizar o formato de suas fontes (por exemplo, WOFF2, que economiza de 30 a 50% no tamanho do arquivo) e também optar por exibir texto mesmo que a fonte ainda não tenha sido carregada pelo navegador, para acelerar a renderização. - Elimine recursos de bloqueio e carregue-os de forma assíncrona
Evite bloquear a renderização de suas páginas: prefira carregar recursos de forma assíncrona, principalmente para CSS (CSS crítico), JS (async e defer) e fontes (display:swap).
Claro, se você não tiver escolha porque alguns recursos são essenciais no início do carregamento da página, esses recursos devem ser os mais leves possíveis. - Adote a estratégia de cache correta
Para fazer com que as páginas sejam exibidas o mais rápido possível para seus usuários, armazene em cache os elementos estáticos.
Para fazer isso, você precisa identificar previamente o conteúdo dinâmico e o conteúdo estático e definir as regras para armazenar em cache o conteúdo estático: por quanto tempo e em qual cache (navegador, origem ou CDN).
[Estudo de caso] Gerenciando o rastreamento de bot do Google
Leia o estudo de casoMelhore a interatividade: páginas instantaneamente responsivas
Além da velocidade com que os elementos são exibidos no navegador, a capacidade de interação é essencial para proporcionar total satisfação aos seus usuários.
Caso contrário, você os expõe à frustração que se traduz em comportamentos como cliques de raiva, o mouse se movendo freneticamente na página ou a rolagem aleatória para verificar se a página está funcionando.
Na pior das hipóteses, seus visitantes voltam para a página anterior, ou saem de vez do seu site para fazer uma nova busca no Google, ou vão até seus concorrentes.
Lembre-se que em caso de experiência negativa, 43% dos internautas irão ao site de um concorrente para sua próxima compra. Você deve, portanto, dar-se os meios para atrair, mas também para manter seus visitantes.
Na maioria das vezes, são os scripts de terceiros e o Javascript que podem ser responsáveis por uma interatividade ruim. De fato, enquanto o navegador estiver ocupado recuperando, analisando e executando JavaScript, ele não poderá responder às interações do usuário.
Aqui, novamente, existem técnicas para otimizar seu código e seus terceiros, e permitir que seus visitantes desfrutem de uma ótima experiência:
- Reduza o impacto de Terceiros atrasando seu carregamento
Você pode começar a carregar e executar scripts depois que os elementos de conteúdo prioritários forem exibidos em sua página. Mas cuidado: tenha em mente que adiar o carregamento do JavaScript não o torna livre em termos de desempenho!
Pode ser uma questão de adiar o carregamento de algumas funcionalidades (chat, widgets, tracking…) após a exibição dos principais elementos para tranquilizar o usuário, mas não anula o tempo necessário para o navegador processar o código, apenas muda no tempo. - Reduza o tempo de execução do JavaScript
Divida as tarefas que consomem tempo do seu navegador (Tarefas Longas) e também certifique-se de favorecer o processamento curto em resposta às interações do usuário (por exemplo, evite ouvir ativamente certos eventos, como rolagem; e aproveite os momentos em que o navegador tempo livre para executar certos processamentos JavaScript). - Reduza o trabalho da linha principal
O navegador poderá responder mais rapidamente às interações, reduzindo o número de solicitações e o tamanho das trocas.
Economize tempo também: automatize as técnicas de otimização do seu site
Acabamos de abordar dois aspectos muito importantes da experiência do usuário: velocidade de exibição e interatividade. A boa notícia é que todas as otimizações que acabamos de mencionar nesta lista de verificação podem ser automatizadas!
Além disso, você pode ter vinculado a dois dos principais Vitais da Web do Google que permitem avaliar esses aspectos, respectivamente: a maior pintura de conteúdo e o atraso da primeira entrada.
Claro, você também deve pensar em melhorar a estabilidade visual de suas páginas para uma experiência de usuário ideal, trabalhando em sua pontuação de Mudança de layout cumulativa.
Você deve saber que essas 3 métricas (LCP, CLS e Total Blocking Time, ou TBT, um equivalente de FID) respondem por 70% da pontuação atribuída pelo PageSpeed Insights.
Portanto, logicamente, qualquer coisa que você fizer para acelerar suas páginas e otimizar essas métricas terá um impacto positivo em seus usuários, bem como em suas pontuações de desempenho.
Resumindo, você pode aplicar no seu UX a mesma abordagem que faz no SEO: conteúdo e experiência de qualidade garantem a satisfação do usuário e contribuem para ser melhor indexado pelo Google.
Além disso, como no SEO, as otimizações do webperf devem ser mantidas ao longo do tempo.
Isso requer tempo e experiência porque as técnicas e métricas evoluem rapidamente. Além disso, mesmo em grandes equipes, os recursos técnicos nem sempre têm tempo ou conhecimento para manter efetivamente a velocidade de um site; e empregar recursos e energia para uma operação de comando que cai como um suflê é muito frustrante e até desencorajador.
Então, ao invés de perder tempo com manutenção, temendo os efeitos colaterais a cada evolução do site, e multiplicando os plugins correndo o risco de sobrecarregá-lo, é melhor automatizar a aplicação de todas as técnicas de otimização de frontend com uma única ferramenta!
Você deve saber que, na maioria dos casos, para sites de comércio eletrônico de alto tráfego, o ROI de uma solução de otimização de webperf é fácil de medir.
De fato, o Google estimou que -0,1 segundo de tempo de carregamento pode levar a +8% de conversões, o que uma solução de otimização de front-end pode alcançar com muita facilidade.
Na Fasterize, descobrimos que, muitas vezes, mesmo um aumento nas taxas de conversão de menos de 1 ponto é suficiente para garantir o ROI de nossa solução SaaS; sem falar no tempo economizado pelas equipes técnicas.
Sendo os negócios os tendões da guerra, você pode fazer o cálculo sozinho, e é fácil de fazer! Ele permite que você entenda o interesse de automatizar a otimização de desempenho e convença e envolva suas equipes internas.
Economize tempo em todas as frentes!