Como medir e otimizar a maior pintura de conteúdo para UX superior

Quando se trata de sucesso online, há muitas maneiras de fazer isso. Uma experiência de usuário otimizada é uma dessas maneiras. O Google usará diferentes experiências do usuário e métricas relacionadas para classificar sites para SEO. Ele continuou a produzir várias ferramentas para melhorar o desempenho da web. Veremos abaixo algumas das maneiras pelas quais o Google procura melhorar a experiência do usuário.

O que é o Google Core Web Vitals?

Em sua recente tentativa de modificar a medida e a compreensão do que se qualifica como experiência decente do usuário, o Google regulamentou as métricas da página. Essas métricas padronizadas são chamadas de principais elementos vitais da web e facilitam as classificações da experiência do usuário do mundo real em seu site.

O que é a maior pintura de conteúdo?

Para começar, vejamos a maior pintura de conteúdo (LCP). É uma das principais métricas de vitals da web. Ele mede o tempo de carregamento do maior componente de conteúdo na janela de visualização à medida que se torna visível. Métricas alternativas como TTFB e First Contentful Paint facilitam conjuntamente a experiência da página ao vivo, elas não estão presentes quando a página se torna “significativa” para o usuário.

Normalmente, a menos que o componente mais importante da página fique totalmente visível, a página pode não oferecer contexto suficiente para o usuário. O LCP é, portanto, representativo das expectativas do usuário. Como uma métrica principal do web vitals, o LCP é responsável por vinte e cinco por cento da pontuação de desempenho, e é por isso que é uma das métricas mais importantes para otimizar.

Verificando seu tempo de LCP

De acordo com o Google, as categorias de peças pensadas para a maior pintura de conteúdo são:

• elementos <img>
• Elementos <image> dentro de um elemento <svg>
• Elementos <video> (imagem de pôster usada)
• Um elemento com uma imagem de plano de fundo carregada por meio da função URL
• Elementos em nível de bloco compostos por nós de texto e/ou outros elementos de texto em nível embutido

Como o LCP é medido?

Claro, existem várias maneiras de medir o LCP de sua página da web. A maneira mais fácil de fazer isso é usando uma das plataformas disponíveis que inclui Lighthouse, PageSpeed ​​Insights, Search Console e Relatório de experiência do usuário do Chrome. Por exemplo, o Google PageSpeed ​​Insights em seu relatório indica o componente para calcular o LCP.

O que é um bom LCP?

Para fornecer uma experiência de usuário decente, você deve tentar manter um LCP de 2,5 segundos ou menos em seu site. A maioria dos carregamentos de sua página deve estar acontecendo abaixo desse limite. Agora que todos sabemos o que são os LCPs e qual deve ser nosso alvo, vamos examinar maneiras de aprimorar o LCP.

(Por favor, adicione a imagem chamada A maioria das páginas deve carregar em um LCP de 2,5 segundos ou menos.jpg)

Como otimizar a maior pintura de conteúdo (LCP)

O sistema subjacente de reduzir completamente o LCP é reduzir os dados baixados no dispositivo do usuário e reduzir o tempo necessário para gerenciar esse conteúdo e garantir uma experiência perfeita do usuário.

Otimize suas fotos

Na maioria dos sites, o conteúdo acima da dobra normalmente contém uma imagem superdimensionada necessária para o LCP. Pode ser uma imagem de herói, um carrossel ou um banner. Você deve otimizar essas imagens para um LCP mais robusto.

Para otimizar suas fotos, você deve usar um CDN de imagem de terceiros como ImageKit.io. A vantagem de empregar um CDN de imagem de terceiros é que você simplesmente direciona seu negócio real e deixa a otimização de imagem para o CDN de imagem.

Transformações em tempo real para imagens responsivas

O Google usa a compartimentação mobile-first para quase todos os sites. É por isso que é necessário otimizar o LCP para dispositivos móveis sobre desktop. Cada imagem deve ser reduzida de acordo com a demanda do layout.

Por exemplo, você quer a imagem em um tamanho menor na página de listagem e um tamanho maior na página de detalhes do produto. Esse redimensionamento garante que você não pareça estar usando bytes extras além do necessário para essa página exata.

Armazene imagens em cache e melhore o tempo de entrega

As CDNs de imagens usam a Content Delivery Network (CDN) para entregar as fotografias. Empregar um CDN garante que as imagens sejam carregadas de um local próximo, em vez de um servidor que pode estar do outro lado do mundo.

Pré-carregar recursos essenciais

Há casos em que o navegador pode não carregar um visual se impactar o LCP. Como exemplo, uma imagem de banner no topo da dobra pode ser vista como uma imagem de fundo dentro de um arquivo CSS. Como o navegador não saberia isso sobre a imagem até que o arquivo CSS fosse baixado, ele não o carregaria.

Agora, se você está perguntando: “Como faço para pré-carregar a maior imagem de pintura Contentful?”, a resposta é simples. Você poderá pré-carregá-los usando uma tag com um atributo rel= “preload” na seção superior de seu documento de linguagem de marcação de hipertexto.

Embora você possa pré-carregar vários recursos em um documento, você deve limitá-lo a imagens ou vídeos acima da dobra, arquivos de fonte de página inteira ou arquivos CSS e JS essenciais.

Reduza os tempos de resposta do servidor

Se o seu servidor demorar mais para carregar do que o normal, o tempo que leva para carregar a página na tela aumenta. Isso afeta negativamente cada métrica de velocidade de página, juntamente com o LCP. Para melhorar os tempos de resposta do servidor, você pode:

• Analise e otimize seus servidores
• Use uma rede de entrega de conteúdo
• Pré-conexão com origens de terceiros
• Sirva o conteúdo em cache primeiro com um service worker
• Compactar arquivos de texto

Melhore os tempos de resposta do dispositivo cliente

Se sua página demorar muito para carregar, pode ser desanimadora para clientes em potencial. Felizmente, existem algumas coisas que você pode fazer para garantir que ele seja carregado corretamente e crie uma experiência de usuário perfeita. Isso inclui:

• Inlining CSS essencial
• Minificando e pressione o conteúdo
• Otimizando o LCP para renderização do lado do cliente
• Usando renderização do lado do servidor
• Usando a pré-renderização

O LCP se tornou um grande fator de classificação de pesquisa que se correlaciona poderosamente com a experiência e a jornada do usuário. Portanto, se você administra um negócio na web, deve otimizar esses componentes para garantir o sucesso do empreendimento.

Biografia do autor

Ghia Marnewick é escritora, gerente de mídia social e gerente digital. Ela escreve conteúdo para a Aumcore e é apaixonada por encontrar novas maneiras de compartilhar informações com o mundo.