Compartilhamento de tecnologia

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Manter os clientes satisfeitos é o segredo do sucesso no varejo. Foi comprovado que fornecer uma experiência on-line rápida e consistente melhora significativamente todas as métricas com as quais os varejistas se preocupam, desde taxas de conversão e receita até retenção e reconhecimento da marca.

Esboço deste artigo:

• A velocidade da página afeta os dados de negócios de varejo online

• Como comparar a velocidade do seu site com a de seus concorrentes

• Comece com a otimização de desempenho: analise o que está deixando suas páginas mais lentas, desde imagens e terceiros até folhas de estilo e fontes personalizadas, e o que você pode fazer a respeito

A velocidade da página afeta os dados de negócios de varejo online

Para a maioria dos varejistas online, a velocidade da página tem um impacto mensurável nos lucros. Mesmo pequenas melhorias podem melhorar significativamente métricas como taxas de conversão.por exemplo

Como analisar a relação entre o desempenho do site e os dados de conversão de negócios

Mas e o seu site? Para entender o impacto das melhorias na velocidade da página em seu próprio site, você precisa examinar seus próprios dados de monitoramento de usuário real (RUM).Diagrama de associação é uma ótima maneira de comunicar o desempenho a todos em sua empresa. Você pode usar o RUM para criar essas visualizações que permitem que até mesmo as partes interessadas menos técnicas vejam facilmente como o desempenho se correlaciona com o envolvimento do usuário e as métricas de negócios, como taxa de rejeição e taxa de conversão.

O gráfico de correlação fornece uma visualização de histograma de todo o tráfego do usuário, dividido em diferentes grupos com base em métricas de desempenho, como início da renderização, consumo máximo de conteúdo e número de interações até o próximo sorteio. O gráfico inclui uma sobreposição que mostra métricas de engajamento do usuário ou métricas de negócios (como taxa de rejeição ou taxa de conversão) associadas a cada grupo. Dessa forma, você pode ver rapidamente a relação entre desempenho, envolvimento do usuário e seu negócio.

Como você pode ver neste gráfico de correlação, com um tempo máximo de extração de conteúdo (LCP) de 1,1 segundos, a taxa de conversão atinge o pico de pouco mais de 6%. À medida que o LCP desacelera, a taxa de conversão cai rapidamente e cai abaixo de 3% em 2 segundos. Como pode ser visto acima, otimizar o desempenho do site para reduzir o tempo de LCP pode levar a conversões gerais mais altas e mais receitas.

Como seu site se compara aos seus concorrentes?

Com SpeedCurve Sintético Assim como o Monitoramento abrangente de desempenho, você pode executar um teste de velocidade da página em qualquer outro site, como faria sozinho. Isso significa que você obtém todos os mesmos dados, capturas de tela e slides ricos e excelentes para comparação.

SeuBenchmarking competitivo O painel também permite que você se aprofunde e se concentre em coisas como a construção de páginas. Essa página é renderizada duas vezes mais rápido que a sua... o que eles fizeram de diferente? Eles têm mais JavaScript? menos? Você fez 400 solicitações e eles fizeram apenas 80? Este é o lugar para descobrir.

Referências de velocidade de página é um painel público que mostra um instantâneo do desempenho atual dos principais varejistas nos EUA, UE, Reino Unido e Japão.

Primeiros passos com otimização de desempenho

Para fornecer uma experiência on-line excelente e rápida, comece perguntando a si mesmo duas perguntas:

• O que faz com que minha página pareça lenta para os usuários?

• O que posso fazer?

A boa notícia é que a maioria dos problemas que retardam a página do comprador acontecem na sua página, o que significa que você pode controlá-los. Esta é uma visão geral dos problemas de desempenho mais comuns em sites de varejo e como rastreá-los e corrigi-los.

O que faz com que sua página da web fique lenta? A grande maioria dos problemas de desempenho é causada por quatro motivos:

• Terceiros, como rastreadores e analisadores

• folha de estilos

• Fonte personalizada

• Tamanho da página, especialmente tamanho da imagem

roteiro de terceiros

Hoje, uma página web de varejo típica pode conter até 75 scripts de terceiros, como rastreadores e beacons analíticos.

Terceiros agregam muito valor aumentando as conversões (por meio de beacons de localização) e ajudando você a entender seus usuários como nunca antes (por meio de tags analíticas), para que eles não desapareçam tão cedo. Mas eles podem afetar significativamente a forma como sua página é renderizada (ou até mesmo se ela é renderizada!).

O que você pode fazer: monitorar o desempenho de terceiros

Comece adotando uma abordagem proativa para compreender qualquer dano potencial ao desempenho que terceiros possam causar.

Você não pode consertar o que não é medido.Isto é o que criamos no SpeedCurvePainéis dedicados de terceirosmotivos para que você possa ver rapidamente o desempenho de terceiros, rastrear scripts individuais eDefina um orçamento de desempenho.

Depois de compreender o desempenho dos seus scripts de terceiros, você poderá usar dados históricos para desenvolver um SLA com o fornecedor.

estudo de caso: M&S revoluciona o desempenho ao focar em conteúdo de terceiros

Tamanho da imagem e da página

Embora o tamanho da página nem sempre esteja relacionado a uma experiência do usuário mais lenta, muitas vezes isso acontece. Imagens grandes que não são otimizadas costumam ser as culpadas.

Além de otimizar suas imagens (para garantir que você não forneça 1 MB de recursos aos seus usuários!), você também deve garantir que suas imagens mais importantes (como a imagem principal do produto) sejam renderizadas o mais cedo possível.

O que você pode fazer: criar um orçamento de desempenho para métricas relacionadas a imagens

Orçamentos e alertas de desempenho são uma ótima maneira de lidar com a degradação do desempenho . O orçamento de desempenho começa com sua equipe (todos: profissionais de marketing, designers e desenvolvedores) concordando com os princípios de experiência do usuário e velocidade do site. Primeiro, você precisa decidir quais métricas deseja acompanhar e, em seguida, definir limites com base no desempenho anterior.

Para imagens, aqui estão algumas métricas a serem consideradas:

• Desenho máximo de conteúdo – Este é o tamanho do maior elemento visual (imagem ou vídeo) na janela de visualização. LCP é do GoogleMétricas da rede principalPor um lado, é um conjunto de métricas para o algoritmo de classificação de pesquisa do Google, por isso é uma boa ideia rastreá-lo.

• Tamanho da imagem – O tamanho total de todas as imagens na página. Esta é uma ótima maneira de ver rapidamente se imagens grandes e não otimizadas foram adicionadas à sua página.

• Solicitações de imagens – O número total de imagens na página.

estudo de caso: Como a Zillow se tornou maior, mais rápida e mais envolvente com um orçamento apertado

folha de estilos

As folhas de estilo são uma bênção para a web moderna. Eles resolvem uma ampla gama de problemas de design, desde compatibilidade de navegador até manutenção e atualizações de design. Sem folhas de estilo, não teríamos grandes coisas como design responsivo.

No entanto, folhas de estilo mal executadas podem causar uma série de problemas de desempenho. Esses problemas incluem CSS demorando muito para baixar e analisar e folhas de estilo mal posicionadas, impedindo a renderização do restante da página.

O que você pode fazer: saiba quais folhas de estilo podem estar impedindo a renderização da sua página

Novamente, você não pode consertar o que não mede. Sua ferramenta de monitoramento abrangente pode lhe dizer:

• Quantas folhas de estilo existem na minha página e quantas delas estão impedindo a renderização da página?

• Esse número aumentou ou diminuiu?

• Qual o tamanho das solicitações CSS?

• Como a folha de estilo se comportará para cada um dos meus terceiros?

Fonte personalizada

As fontes personalizadas oferecem aos designers um controle sem precedentes sobre as fontes usadas em seus designs. Esse desejo de controle é o motivo pelo qual as fontes personalizadas cresceram em popularidade. Mas por trás dessa popularidade está um preço de desempenho.

Algumas fontes exigem muito código CSS, enquanto outras exigem muito JavaScript ou hospedagem externa - tudo isso pode retardar significativamente a renderização da página.

O que você pode fazer: monitorar o tamanho da fonte e a velocidade de renderização

Além de rastrear o tamanho da fonte e o número de solicitações, você também pode usar o SpeedCurve para medir quando o primeiro elemento H1 termina a renderização. (No SpeedCurve, chamamos esse indicador de Hero H1. São os trêsTempo de renderização do herói um. ) Se o seu site usa fontes personalizadas, essas fontes provavelmente serão aplicadas à cópia H1, tornando essa métrica uma forma eficaz de medir a rapidez com que as fontes personalizadas são renderizadas.

Como todas as outras métricas que rastreamos para você, você podeCrie orçamentos de desempenho e receba alertas quando excederem os limites.

estudo de caso: NerdWallet usa métricas de renderização H1 para ajudar a aumentar a velocidade de carregamento de fontes em 30%