Dominando os principais pontos vitais da Web: um guia para aprimorar a experiência do usuário

Como o comércio eletrônico continua a dominar o mercado on-line, as empresas devem ficar à frente do jogo em termos de otimização de sites. Um fator chave que surgiu nos últimos anos é o conceito de Core Web Vitals. Em 2020, o Google estabeleceu métricas específicas para esses elementos vitais do site, fornecendo às empresas de comércio eletrônico um caminho mais direto para uma melhor classificação do site. Mas o que exatamente são os Core Web Vitals e como as empresas podem otimizá-los para obter o máximo impacto? Neste artigo, examinaremos mais de perto os Core Web Vitals e compartilharemos ferramentas essenciais para otimizá-los, para que seu site de comércio eletrônico fique à frente da concorrência.

Postagem relacionada: 7 coisas que os proprietários de empresas precisam saber sobre os principais sinais vitais da Web

Por que os Core Web Vitals são tão importantes

1. As principais métricas da Web afetam as classificações de pesquisa do Google do seu site

2. Eles são cruciais para proporcionar uma excelente experiência ao usuário

3. A otimização do Core Web Vitals pode aumentar o tráfego e a receita do seu site

A otimização do Core Web Vitals é essencial para proprietários e desenvolvedores de lojas on-line para fornecer uma experiência de usuário ideal, classificação mais alta nos resultados de pesquisa do Google e, por fim, aumentar sua receita. Essas três métricas principais – Largest Contentful Paint (LCP), First Input Delay (FID) e Cumulative Layout Shift (CLS) – são baseadas na velocidade de carregamento, interatividade e apresentação visual do seu site.

Ao priorizar essas métricas, seu site pode fornecer aos clientes uma experiência suave, responsiva e visualmente atraente. Não negligencie os principais pontos vitais da Web ao projetar ou otimizar seu site, pois eles podem ser a diferença entre uma boa e uma excelente experiência do usuário e, por fim, afetar sua receita.

O que é a maior pintura de conteúdo (LCP)

Largest Contentful Paint (LCP) é uma métrica crucial que mede o tempo de carregamento do elemento de conteúdo mais significativo de uma página da web, como uma imagem ou caixa de texto. É um dos componentes críticos do Core Web Vitals, um conjunto de métricas essenciais para fornecer uma experiência de usuário perfeita. A otimização do LCP do seu site pode reduzir o tempo de carregamento da página e melhorar a experiência geral do usuário, levando a uma maior retenção e aquisição de clientes.

Nós da Perspective recebemos pedidos frequentes para melhorar o LCP do Core Web Vitals. Veja abaixo um exemplo de otimização do Largest Contentful Paint (LCP), que fizemos para um de nossos clientes:

1. Maior exibição de conteúdo antes da otimização

2. Maior exibição de conteúdo após a otimização

Leia também: Chromebooks Acer vs Lenovo: qual é o certo para você?

Quais são as causas mais comuns de baixa pintura de conteúdo maior:

1. tempo de resposta lento do servidor

2. JS e CSS não otimizados

3. carregamento lento de recursos

4. renderização lenta no lado do cliente.

Como aumentar a maior pintura de conteúdo

Criamos uma pequena lista de métodos de otimização, que são constantemente aplicados em nosso trabalho e, portanto, recomendamos o seguinte:

1. Exclua o código JS que não está em uso e minimize os arquivos no modo de produção.

2. É melhor escrever regras CSS em módulos (blocos) para que a estilização de alguns seletores não impeça outros. Além disso, recomendamos evitar fazer uma longa cadeia de seletores. Todos os arquivos CSS, ou bibliotecas a serem testadas, devem ser armazenados localmente, não baixados via CDN.

3. Comprima as imagens para carregamento mais rápido e use novos formatos. Por exemplo, converta JPEG em WebP, que tem tamanho 1/3 sem perder qualidade.

4. Recomendamos o uso de imagens responsivas (link) para otimizar as imagens em termos de velocidade de download e experiência do usuário. Há um ponto importante aqui. A tag img tem dois atributos críticos:

1. src – para indicar a fonte da imagem original. As imagens do atributo src são digitalizadas e consideradas no ranking pelos motores de busca, por isso é necessário especificar aqui a imagem de melhor qualidade.

2. srcset – permite especificar uma variedade de versões da imagem. Das imagens no atributo srcset, o navegador seleciona uma imagem para carregar e exibir, dependendo do tamanho da tela dos dispositivos de desktop ou dispositivos móveis em que é executado.

5. não recomendamos adicionar loading=”lazy” no atributo da tag <img>.

Remova o atributo preguiçoso para aumentar a maior pintura de conteúdo

O que é Deslocamento Cumulativo de Layout (CLS)

Deslocamento cumulativo de layout (CLS) é uma métrica de estabilidade visual crucial que quantifica a extensão de deslocamentos inesperados de layout durante o carregamento da página. É medido pela soma de todas as pontuações de mudança de layout que excedem um limite de 0,1. Melhorar o CLS tornou-se uma prioridade para as empresas, pois a experiência do usuário ocupa o centro do palco no desenvolvimento moderno da web. Portanto, não é surpresa que os clientes frequentemente solicitem melhorias neste indicador-chave de desempenho.

Leia também: O crescimento dos cassinos ao vivo em 2023

Quais são as causas mais comuns de mudança cumulativa de layout (CLS) ruim

Os indicadores de estabilidade visual são essenciais para garantir uma experiência de usuário suave e contínua. No entanto, a baixa estabilidade visual pode ser causada por vários fatores técnicos. Alguns culpados comuns incluem o dimensionamento de arquivos de imagem e multimídia, consultas GraphQL e carrosséis não otimizados.

DIMENSIONAMENTO INCORRETO DE ARQUIVOS DE IMAGEM E MULTIMÍDIA

Quando imagens ou arquivos multimídia não têm um tamanho especificado, o navegador não pode alocar a quantidade de espaço apropriada quando o item é carregado. Isso pode resultar em um layout de página que muda constantemente, causando uma experiência ruim para o usuário.

CONSULTAS DE GRAPHQL NÃO OTIMIZADAS

Ao carregar imagens ou blocos GraphQL em um Progressive Web App (PWA), não reservar espaço pode fazer com que a página “pule” após o carregamento. Isso pode levar a mudanças de layout ruins e afetar negativamente as métricas de desempenho.

CARROSSÉIS NÃO OTIMIZADOS

Um carrossel não otimizado que usa animações não suaves e não combinadas pode acionar um recálculo do layout da página, resultando em pontuações ruins de CLS (Cumulative Layout Shift). Embora uma ligeira mudança possa ser quase imperceptível para o usuário, ela pode afetar significativamente a alteração geral do layout e a estabilidade visual da página.

Como melhorar o indicador de estabilidade visual e a mudança cumulativa de layout

USANDO ESPAÇOS RESERVADOS

A implementação de espaços reservados é uma técnica amplamente adotada para melhorar o desempenho percebido de um site. Os espaços reservados servem como dicas visuais que indicam que o download está em andamento e o site está funcionando corretamente. A abordagem mais eficaz para imagens é definir os atributos de altura e largura.

Usando espaços reservados para melhorar a pontuação de desempenho no Core Web Vitals

Essa estratégia permite que o navegador reserve o espaço necessário para as imagens antes do carregamento completo, evitando mudanças inesperadas de layout. Aqui está um exemplo de implementação dessa técnica usando a tag img.

<img data-src=”image.webp” width=”380″ height=”120″ alt=”image”>

Ao definir os atributos de altura e largura, o navegador pode alocar espaço para a imagem e evitar que o layout mude quando a imagem for carregada. Como resultado, os usuários terão uma experiência de navegação mais suave e visualmente estável.

FRONT-DASPLAY: SWAP

Para obter a pontuação ideal do CLS (Cumulative Layout Shift), os desenvolvedores podem utilizar a propriedade font-display: swap para exibir o texto na fonte do sistema antes que o arquivo de fonte personalizada seja totalmente carregado. A regra font-face no arquivo de fonte CSS necessário deve especificar os caminhos do arquivo de fonte e incluir a propriedade font-display: swap.

Aqui está um exemplo de como definir a regra font-face com a propriedade font-display: swap:

@font-face {Font-family: “Proxima Nova”;src: url(“../fonts/proximanova-regular.woff2”) format(“woff2”);font-display: swap;}

Usando a propriedade font-display: swap, o navegador exibirá imediatamente o texto na fonte do sistema até que o arquivo de fonte personalizada seja totalmente carregado. Essa técnica pode evitar mudanças inesperadas de layout e melhorar a estabilidade visual da página, resultando em uma melhor experiência do usuário.

Leia também: O impacto das condições econômicas globais no valor da criptomoeda

CSS TRANSFORM

O recurso de transformação CSS é uma ferramenta influente que os desenvolvedores podem utilizar para aprimorar o desempenho de seus sites e a experiência do usuário. Por exemplo, usar a transformação CSS pode ajudar a mitigar problemas relacionados ao carregamento de carrosséis de imagens, resultando em uma experiência de navegação mais rápida e amigável.

Ao otimizar o carregamento de blocos CMS (especialmente em projetos PWA) por meio de elementos HTML GraphQL, é recomendável definir as propriedades CSS com uma altura fixa. Essa abordagem pode ajudar a evitar mudanças de layout inesperadas e garantir uma página visualmente estável após o carregamento.

Ao implementar essas técnicas, as empresas podem melhorar a pontuação do Core Web Vitals e fornecer uma experiência de usuário mais tranquila e agradável. Em um de nossos casos recentes, melhoramos significativamente a pontuação do CLS adicionando a propriedade font-display: swap no arquivo CSS, definindo uma altura mínima e otimizando o carregamento da fonte (@font-face).

1. LOJA ONLINE ANTES DA OTIMIZAÇÃO DE VITAIS DA Web Principal

2. LOJA ONLINE DEPOIS DA OTIMIZAÇÃO DO Core Web VITALS

O que é o primeiro atraso de entrada (FID)?

First Input Delay (FID) é uma métrica crítica que mede a interatividade de um site. O primeiro atraso de entrada mede quanto tempo um site leva para responder à primeira interação de um usuário com uma página, como clicar em um botão ou digitar em um campo de formulário.

Usando o FID no Magento 2

No Magento 2, muitas interações do usuário podem afetar o FID do site, como clicar em um botão de chat ao vivo, adicionar um produto à cesta ou concluir uma compra. Se essas interações não forem responsivas e não fornecerem feedback imediato ao usuário, isso poderá resultar em uma experiência de usuário lenta e frustrante.

Para garantir a experiência ideal do usuário, é essencial atingir uma pontuação FID inferior a 100ms. Isso pode ser obtido por meio de várias técnicas de otimização, como minimizar o tempo de execução do JavaScript, otimizar scripts de terceiros e otimizar o tempo de resposta do servidor. Ao otimizar o FID, as empresas podem fornecer um site mais responsivo e envolvente que mantém os usuários envolvidos e satisfeitos.

Como otimizar o atraso da primeira entrada

DECOMPOSIÇÃO DE TAREFAS

Uma abordagem recomendada para aprimorar o First Input Delay (FID) é particionar tarefas mais longas em subtarefas menores e mais gerenciáveis. Tarefas demoradas podem sobrecarregar o thread principal, obstruindo o processamento e a execução da entrada do usuário. Qualquer segmento de código que impeça o fluxo por mais de 50 milissegundos é considerado uma tarefa demorada.

A determinação do FID requer a realização de medições em condições do mundo real, pois a interação genuína do usuário com a página da web é essencial para a obtenção de medições precisas.

TESTE EM CONDIÇÕES DA VIDA REAL

Para medir com precisão o First Input Delay (FID), é recomendável empregar ferramentas especializadas que avaliam o desempenho em condições do mundo real. Algumas dessas ferramentas incluem:

1. Teste de insights de velocidade de página;

2. Search Console (relatório Core Web Vitals);

3. Relatório de experiência do usuário Chrome;

Como o FID exige interação do usuário, a realização de testes em um ambiente de laboratório não é viável. Por outro lado, as métricas de campo capturam o desempenho do mundo real analisando o comportamento do usuário. No entanto, o Tempo Total de Bloqueio (TBT), uma métrica que avalia o período entre a Primeira Pintura do Conteúdo (FCP) e o Tempo para Interatividade (TTI), pode ser medido em um ambiente de laboratório e está bem correlacionado com o FID em condições de campo. O TBT também é especialista em identificar problemas relacionados à interatividade. Consequentemente, qualquer otimização que aprimore o TBT em um ambiente de laboratório também melhorará o FID para os usuários. O Lighthouse é uma ferramenta que pode medir o TBT de forma eficaz.

Leia também: Um guia passo a passo para criar uma vitrine personalizada da Shopify

ATIVAR DOWNLOAD SOB DEMANDA

Você pode usar código de terceiros para habilitar o download sob demanda de páginas da web. Por exemplo, você pode habilitar o download sob demanda para que o banner na parte inferior da página ou anúncio seja exibido apenas quando eles rolarem para perto da visualização. A ideia principal é fazer o download de elementos da Web que fornecem o valor mais significativo para os usuários, não aqueles que podem ser baixados no final da linha, como prioridade.

OTIMIZAR JAVASCRIPT

Para melhorar o desempenho do site, é crucial eliminar todos os arquivos JavaScript desnecessários. Uma abordagem recomendada é adiar o download de arquivos JavaScript até que sejam necessários. Essa técnica inicialmente permite que o navegador obtenha elementos críticos da Web, como HTML e CSS. A seguir, os scripts podem ser avaliados, facilitando assim um carregamento mais rápido. Adotar essa estratégia é especialmente útil para sites com extensões JavaScript substanciais, como a extensão Mega Menu utilizada por muitas lojas Magento. Essa técnica permite que os proprietários de sites simplifiquem o processo de carregamento e forneçam uma experiência de usuário mais eficiente. Portanto, remover o JavaScript não utilizado é uma técnica de otimização fundamental que deve ser considerada para aumentar o desempenho do site.

Mais indicadores para melhorar os Core Web Vitals

Além dos três principais principais indicadores vitais da Web acima, existem várias métricas complementares.

Primeira exibição de conteúdo (FCP)

First Contentful Paint (FCP) é uma métrica valiosa que ajuda a medir o tempo que uma página leva para exibir sua imagem inicial ou bloco de texto. Essa métrica inclui o tempo de processamento para solicitações de DNS, solicitações de servidor, operações do lado do servidor e renderização primária do DOM. Embora fatores como DNS e velocidade da rede estejam fora de nosso controle, reduzir o tempo de processamento de tarefas do lado do servidor e otimizar o carregamento de estilos e scripts pode afetar significativamente o desempenho. Especificamente, o Google recomenda priorizar a inclusão apenas de estilos críticos na seção principal da página da Web e, se possível, usar tags de estilo em vez de tags de link para minimizar solicitações desnecessárias do servidor.

Para melhorar ainda mais o desempenho do site, o Google Analytics fornece uma grande quantidade de informações sobre o comportamento e o envolvimento do usuário. Por exemplo, usando o relatório Tempos do usuário, os proprietários de sites podem monitorar a duração de ações e eventos específicos, incluindo carregamentos de página, interações do usuário e outros eventos personalizados. Esses dados podem ajudar a identificar áreas do site que requerem otimização e acompanhar a eficácia de quaisquer alterações feitas.

Métrica do índice de velocidade

Enquanto o FCP mede o tempo para a exibição do primeiro elemento, a métrica Speed ​​Index (SI) captura a velocidade geral de carregamento de páginas da Web, considerando o tempo necessário para que a página se torne totalmente visível para o usuário. Ele fornece uma visão geral abrangente do desempenho do carregamento da página e considera os efeitos da velocidade da rede e do tempo de processamento do servidor. Aproveitando uma combinação de FCP e SI, os proprietários de sites podem obter uma visão geral abrangente do desempenho do site e tomar as medidas adequadas para aprimorar a experiência do usuário.

O SI considera vários fatores que afetam o desempenho da página da Web, incluindo a velocidade da rede, o tempo de processamento do servidor e o tamanho dos recursos que estão sendo carregados. A métrica calcula a completude visual de uma página da Web em intervalos regulares durante o processo de carregamento e atribui uma pontuação que representa a velocidade da página. Quanto menor a pontuação do SI, mais rápido a página carrega e melhor a experiência do usuário.

Para melhorar o SI, os desenvolvedores da Web podem usar várias técnicas de otimização, incluindo minimizar recursos externos, como CSS e JavaScript, reduzir tamanhos de imagem e aproveitar o cache do navegador para acelerar o carregamento de recursos. Ao analisar as pontuações do SI com ferramentas como Google Analytics e WebPageTest, os proprietários de sites podem identificar áreas que requerem otimização e fazer alterações para melhorar o desempenho do site. Em última análise, ao melhorar o desempenho do site e aprimorar a experiência do usuário, os proprietários de sites podem melhorar o engajamento, aumentar as conversões e expandir seus negócios.

Interação para a próxima pintura

A interação com a próxima pintura (INP) é uma métrica crítica que mede o tempo entre a interação de um usuário com a página da Web e a exibição de uma resposta visual. Essa métrica é particularmente relevante para páginas que exigem interações frequentes do usuário, como plataformas de mídia social e sites de comércio eletrônico. O INP fornece informações valiosas sobre a capacidade de resposta de uma página da Web e ajuda a identificar áreas que requerem otimização para melhorar a experiência do usuário.

O INP é calculado selecionando a interação do usuário mais recente durante a visita atual à página da Web e medindo o tempo necessário para a página da Web responder com uma atualização visual. Esta atualização pode incluir várias alterações, como a aparência de uma nova imagem ou bloco de texto, ajuste de posição ou tamanho de um elemento ou a execução de uma animação complexa. Ao medir o tempo entre a interação do usuário e a resposta visual, o INP pode fornecer informações valiosas sobre o desempenho percebido de uma página da Web e ajudar a identificar áreas que requerem otimização.

Para melhorar o INP, os desenvolvedores web podem implementar diversas técnicas de otimização, como minimizar o uso de JavaScript e reduzir o tamanho de imagens e vídeos. Além disso, a utilização de tecnologias modernas da Web, como a API Intersection Observer e Web Workers, pode ajudar a melhorar o desempenho, descarregando tarefas com uso intensivo de recursos e reduzindo a carga de trabalho no thread principal.

Leia também: Como a tradução francesa afetará positivamente o seu negócio?

Hora da primeira mordida (TTFB)

O tempo até o primeiro byte (TTFB) é uma métrica crucial para o desempenho da página. Representa o tempo que o servidor leva para receber o primeiro byte de dados após o envio de uma solicitação. O valor TTFB é influenciado por vários fatores, como latência da rede, tempo de processamento do servidor e complexidade do código do site. Um valor de TTFB mais baixo é desejável, pois indica tempos de carregamento mais rápidos e uma melhor experiência do usuário. O tempo de resposta ideal para um site é entre 250 e 350 milissegundos, enquanto qualquer valor acima de 500 é considerado um tempo de resposta longo e pode afetar negativamente o desempenho do site.

Para melhorar os valores TTFB, os proprietários de sites podem usar várias ferramentas e técnicas. Uma dessas técnicas é o cache de consulta, armazenando dados acessados ​​com frequência em um cache, permitindo acesso e recuperação mais rápidos. Ferramentas como o Varnish podem atuar como uma camada de cache entre o servidor e o usuário, melhorando a velocidade do site e reduzindo a carga do servidor. Para projetos PWA, os service workers podem ser usados ​​para armazenar em cache o conteúdo HTML, que pode ser atualizado quando o conteúdo é alterado, fornecendo acesso mais rápido ao conteúdo acessado com frequência.

Para projetos Magento, o cache de página inteira também pode melhorar os valores de TTFB. O cache de página inteira permite que toda a página seja armazenada em cache, reduzindo a necessidade de o servidor executar muitos códigos e recuperar informações do banco de dados. Com o cache de página inteira ativado, o navegador pode ler a página diretamente do cache, levando a tempos de carregamento mais rápidos e experiência de usuário aprimorada.

Portanto, você não deve fazer tantas páginas e blocos, mas reduzi-los ao máximo.

Ferramentas recomendadas para auditoria de Core Web Vitals

O Lighthouse é uma poderosa ferramenta de auditoria de desempenho da Web que pode ajudar os desenvolvedores a diagnosticar problemas de interatividade e velocidade do site. Ele combina tecnologias modernas da Web e práticas recomendadas para fornecer uma análise aprofundada do desempenho do site e oferece insights de otimização acionáveis. Ao executar auditorias Lighthouse, os desenvolvedores podem identificar rapidamente oportunidades para melhorar a velocidade do site, a interatividade e outras métricas importantes.

O relatório Lighthouse tem várias seções:

1. Desempenho do site: análise da velocidade de download do site

2. Recursos: descreve como acelerar seu site e melhorar o desempenho.

3. Diagnóstico: indica o que precisa ser observado e corrigido

4. Programa web progressivo: auditoria detalhada

5. Disponibilidade: seção sobre como melhorar o design UX

6. Melhores práticas: as melhores formas de otimização confiável da maioria dos sites

Antes de executar uma auditoria, você pode usar o botão Analisar carregamento da página para ajustar o nível de auditoria de acordo com seus interesses (Desempenho, SEO, Acessibilidade, etc.).

Seu relatório de auditoria será exibido na nova janela quando a auditoria for iniciada. Também está disponível para medição no site PageSpeed ​​Insights.

Não se esqueça de que as métricas dos principais sinais vitais da Web serão obtidas nos últimos 28 dias.

Leia também: Quais são os melhores laptops Apple MacBook Air e MacBook Pro?

Conclusões

Em conclusão, considere entrar em contato com nossa equipe de auditoria do Core Web Vitals para garantir uma boa experiência do usuário em sua loja online. Embora as métricas do Core Web Vitals possam parecer abstratas, elas tornam seu site mais fácil de usar. Além disso, essas métricas têm uma conexão clara com a funcionalidade do código do seu site, tornando-as relativamente fáceis de melhorar.

Com base em nossa experiência, otimizar essas métricas pode levar a melhorias rápidas na classificação e nas taxas de conversão. Ao medir os Core Web Vitals, você pode identificar áreas para otimização e aprimorar a experiência geral do usuário em seu site. Portanto, não hesite em entrar em contato com a equipe de auditoria do Core Web Vitals e veja o impacto positivo que isso pode ter em seus negócios online!