Garantir tempos de carregamento de menos de segundo para o seu site de comércio eletrónico é um trabalho árduo. Na Layer0, tentámos tornar este processo muito mais simples, e a Layer0 está aqui para o ajudar a alcançar este marco. O que fizemos aqui é criar uma lista de verificação que pode ser seguida para garantir que o seu local de produção é incrivelmente rápido e que você gasta menos tempo a realizá-lo.
Primeiro, vamos falar sobre como medimos a velocidade:
Medir o desempenho
** Utilizámos SpeedCurve (SC) nesta instância, mas pode usar o WebPageTest ou qualquer outro produto
Estamos a concentrar-nos nas métricas LCP para as nossas medições. Os nossos objetivos são:
- Página inicial <1.5s
- PLP para navegação PDP: 0,5s
Também é importante ter em mente os seguintes 3 casos, pois afeta a experiência do consumidor quando A) Ir diretamente para os PLPs/PDP em resultado do tráfego orgânico de pesquisa e. (b) ao navegar para as páginas de carrinho/check-out – crucial para os nossos clientes do ponto de vista do negócio:
- PLP como uma página de destino
- PDP como uma página de destino
- PWA -> Origem/legado (por exemplo, ao carrinho/check-out)
Vamos começar com algumas verificações básicas que nos podem ajudar a obter alguns grandes ganhos de velocidade
- Certifique-se de que são usados esqueletos e que o layout esteja estável.
- Mensagem “Waiting for…” (ou similar) na janela do navegador (um problema conhecido no WebPageTest que a SC usa): Inspecionar as imagens em cascata para ver se essa é a única causa de degradação nas métricas.
- A mudança de imagem de baixa resolução para imagem de alta resolução também pode causar degradação nas métricas em SC – inspecionar as imagens em cascata para ver se essa é a única causa.
- Artefactos de componentes personalizados (em comparação com componentes RSF nativos que são construídos com as melhores práticas em mente) – estilos/elementos que fazem com que os componentes sejam re-renderizados excessivamente. Mais uma vez, inspecionar as imagens em cascata para ver se existem artefactos visíveis (por exemplo, imagem de baixa resolução -> carrossel de imagens em PLP-> transição PDP)
Navegação PLP para PDP
Navegar a partir do PLP (Resultados da Pesquisa ou Páginas de Categoria/Marca) para páginas PDP é o elemento de navegação mais importante de toda a viagem do consumidor. Por cada compra feita, um utilizador médio navega para 8,8 páginas PDP. Mesmo um pequeno abrandamento de páginas com uma frequência tão elevada pode ter um grande impactos negativo na experiência do utilizador. Aqui estão algumas coisas que você pode seguir para garantir uma experiência de usuário perfeita de PLP para PDP:
- Use um esqueleto para a página acima da dobra e garanta a estabilidade do layout
- Certifique-se de que o conteúdo acima da dobra corresponde à altura do ecrã do dispositivo do utilizador.
- Certifique-se de que o armazenamento em cache está devidamente configurado. Isto significa armazenar em cache dados genéricos de páginas e não armazenar em cache pontos de dados específicos do utilizador. (Veja o nosso guia no Caching para mais detalhes)
- Usar pré-busca (Finalizar o nosso guia sobre pré-busca para mais detalhes)
- Use a mesma instância de miniaturas em todos os lugares para evitar cintilação com o componente ForwardThumbnail
- Passe o máximo de informação do PLP para o PDP nos adereços da página para exibir essa informação no PDP
Carregamento da página inicial
A Home Page é geralmente a primeira interação que um utilizador tem com o website. Garantir um excelente início para a viagem é fundamental para proporcionar um fluxo feliz do utilizador até à colocação de encomendas e encomendas. A seguir estão algumas das coisas que você pode seguir para garantir uma ótima experiência na Home Page:
- Certifique-se de que o armazenamento em cache está devidamente configurado. Isto significa armazenar em cache dados genéricos de páginas e não armazenar em cache pontos de dados específicos do utilizador.
- Carga preguiçosa abaixo do conteúdo da dobra
- Use a etiqueta de pré-ligação
- Optimizar imagens
- Atrasar a hidratação até que a página seja concluída
- Outras melhorias
Carregamento de página PDP
Gastar tempo a otimizar a Home Page e o PLP para a navegação por PDP seria inútil se o utilizador não tivesse uma grande experiência na própria página do PDP. Assegurar que a informação mais importante está disponível para o utilizador o mais rapidamente possível e atrasar objetos que não são imediatamente visíveis ou acionáveis é fundamental para otimizar o carregamento de páginas do PDP. Abaixo estão algumas das coisas a ter em mente ao otimizar páginas PDP:
- Armazenar em cache ativos e dados genéricos, incluindo respostas de API, para garantir a recuperação imediata de dados e reduzir gargalos em sistemas back-end.
- Carregar conteúdo preguiçoso abaixo da dobra
- Use uma primeira imagem otimizada para reduzir os tempos de carga.
- Use miniaturas separadas e imagens de zoom e zoom, e apenas carregue imagens a pedido.
Carregamento de página PLP
- Pré-carregar imagens PDP para obter resultados acima da dobra.
- Carregar conteúdo preguiçoso abaixo da dobra
- Reduzir ou evitar pedidos para determinar alterações de página PLP, por exemplo, alterações de cor de fundo ou outros elementos visuais.
Mais alguns ponteiros
Os métodos mencionados acima cobrem a maioria das coisas com que um utilizador interage durante a viagem. Mas há mais em uma plataforma do que o que é visível. Garantir que o funcionamento interno da plataforma seja otimizado é o próximo passo que precisamos de dar. A seguir estão algumas coisas para verificar para recuperar ganhos adicionais no desempenho:
- TTL:Verifique o tamanho do pacote usando a compilação de execução de npm
- FCP :Se um cliente optar por usar um WebFont, a pontuação de LH pode ser experimentada.
- Índice de velocidade : ter pop-ups no ecrã reduz o índice de velocidade da página
- Evite tarefas de execução longas no âmbito do módulo, ou seja, do lado do cliente.
- Os ganchos de reação são propensos a uma re-renderização desnecessária. Embora seja improvável afetar as métricas, elas fazem um site de sentimento lento.
- Use pontuações de PSI para entender o impactos das mudanças de código em vez das pontuações de LH da máquina local e/ou resultados de SpeedCurve. Use o modo 4G na produção para obter resultados de esquerda realistas.
