Home Como fazer Garanta uma carga de sub-segunda para o seu site de comércio eletrônico
Applications

Garanta uma carga de sub-segunda para o seu site de comércio eletrônico

About The Author

Outline

Garantir tempos de carregamento de sub-segundos para o seu site de comércio eletrônico é um trabalho árduo. Na Layer0, tentamos tornar um processo muito mais simples, e Layer0 está aqui para ajudá-lo a alcançar esse marco. O que fizemos aqui é criar uma lista de verificação que você pode seguir para garantir que seu site de produção seja incrivelmente rápido e você gaste a menor quantidade de tempo realizando isso.

Primeiro, vamos falar sobre como medimos a velocidade:

Medição do desempenho

** Nós usamos SpeedCurve (SC) nesta instância, mas você pode usar WebPageTest ou qualquer outro produto
Estamos nos concentrando nas métricas LCP para nossas medições. 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/checkout – crucial para os nossos clientes a partir de uma perspetiva de negócio:

  • PLP como uma landing page
  • PDP como uma landing page
  • PWA -> Origem/legado (por exemplo, para carrinho/checkout)

Vamos começar com algumas verificações básicas que podem nos ajudar a obter alguns grandes ganhos de velocidade

  • Certifique-se de que os esqueletos sejam usados e que o layout esteja estável.
  • “Esperando por…” Mensagem (ou similar) na janela do navegador (um problema conhecido no WebPageTest que o SC usa): Inspecione as imagens em cascata para ver se essa é a única causa de degradação nas métricas.
  • O switch de imagem de baixa resolução para imagem de alta resolução também pode causar degradação nas métricas no SC – inspecione as imagens em cascata para ver se essa é a única causa.
  • Artefatos de componentes personalizados (em comparação com componentes RSF nativos que são construídos com as melhores práticas em mente) – styling/elementos que fazem com que o(s) componente(s) re-renderize excessivamente. Novamente, inspecione as imagens em cascata para ver se existem artefactos visíveis (por exemplo, imagem de baixa resolução -> carrossel de imagens em transição PLP- PDP>)

PLP para navegação PDP

Navegar a partir das páginas PLP (Resultados da Pesquisa ou Páginas de Categoria/Marca) para páginas PDP é o elemento de navegação mais importante de toda a jornada do consumidor. Para cada compra feita, um usuário médio navega para 8,8 páginas PDP. Mesmo uma pequena desaceleração da página em uma frequência tão alta pode ter um grande impactos prejudicial na experiência do usuário. Aqui estão algumas coisas que você pode seguir para garantir uma experiência de usuário PLP para PDP perfeita:

  • 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 da tela do dispositivo do usuário.
  • Certifique-se de que o cache esteja configurado adequadamente. Isso significa armazenar em cache dados de página genéricos e não armazenar em cache pontos de dados específicos do usuário. (Confira nosso guia sobre o Caching para mais detalhes)
  • Usar pré-busca (Finalizar 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ções do PLP para o PDP nos props da página para exibir essa informação no PDP

Carregamento da página inicial

Página Inicial geralmente é a primeira interação que um usuário tem com o site. Garantir um ótimo começo para a jornada é a chave para fornecer um fluxo de usuário feliz até o checkout e colocação de pedidos. 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 cache esteja configurado adequadamente. Isso significa armazenar em cache dados de página genéricos e não armazenar em cache pontos de dados específicos do usuário.
  • Carga preguiçosa abaixo do conteúdo da dobra
  • Utilize a etiqueta de pré-ligação
  • Otimize imagens
  • Retarda a hidratação até que a carga da página seja concluída
  • Outras melhorias

Carregamento de página PDP

Gastar tempo otimizando Home Page & PLP para PDP Navigation seria inútil se o usuário não tiver uma grande experiência na própria página PDP. Garantir que as informações mais importantes estejam disponíveis para o usuário o mais rápido possível e atrasar objetos que não sejam imediatamente visíveis ou acionáveis é fundamental para otimizar as cargas de páginas do PDP. Abaixo estão algumas das coisas a ter em mente ao otimizar páginas PDP:

  • Cache de 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
  • Utilize uma primeira imagem otimizada para reduzir os tempos de carregamento.
  • Use miniaturas separadas e imagens de zoom e zoom e carregue apenas imagens a pedido.

Carga Página PLP

  • Pré-carregue imagens PDP para obter resultados acima da dobra.
  • Carregar conteúdo preguiçoso abaixo da dobra
  • Reduza ou evite solicitações 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 as quais um usuário interage durante a jornada. 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 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 real
  • FCP :Se um cliente optar por usar um WebFont, as quedas de pontuação LH podem ser experimentadas.
  • Índice develocidade : ter pop-ups na tela reduz o índice de velocidade da página
  • Evite tarefas de execução longas no escopo do módulo, ou seja, no lado do cliente.
  • Os ganchos React 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 PSI para entender o impactos das alterações de código em vez das pontuações LH da máquina local e/ou resultados SpeedCurve. Use o modo 4G na construção de produção para obter resultados de LH realistas.