DEV Community

Cover image for Porque usar o componente Image do NextJs e o conceito CLS e LCP
André Peixoto
André Peixoto

Posted on

2 1

Porque usar o componente Image do NextJs e o conceito CLS e LCP

A tag IMG do HTML é uma velha conhecida, uma senhora da terceira idade, mas que negócio é esse de <Image> do NextJs?

Acredite meu camarada, se você trabalha com Front deve se preocupar com isso agora, seu SEO tem relação com essa tag.


Pra que serve e porque usar?

Vamos entender porque a Vercel criou essa tag estendida do HTML e quais as vantagens de usar nos seus projetos.

Primeiro é preciso entender as principais métricas que o Google usa para analisar seu site e ranqueá-lo, isso foi divulgado em Jul/21, quando o Google deixou claro as principais métricas.

web vitals google SEO

A tag <Image> tem relação direta com as métricas CLS e LCP, mas o que é isso?

LCP (Largest Contentful Paint) é basicamente o tempo de carregamento da página, quanto tempo leva pra que o usuário tenha todos os elementos na tela e que possa ler, visualizar.

CLS (Cumulative Layout Shift) é a métrica que identifica mudanças bruscas de layout no site durante o carregamento.

Você já deve ter vivido essa experiência, veja esse exemplo... você acessa um site, um determinado item carrega na página, mas quando você vai clicar, de repente aparece outro elemento e causa uma mudança no layout, empurrando o item que você queria pra baixo e te fazendo clicar em outra coisa.

Isso afeta a experiência do usuário e por isso é analisado e ranqueado pelo Google.


Bom, agora que entendemos o que é CLS e LCP podemos voltar propriamente a tag <Image> e entender como ela trabalha e como auxilia seu SEO.

Essa tag trabalha com 3 princípios:

1. Otimização

O Next utiliza o Lazy Loading, carregando imagens apenas quando estão visíveis na tela. Além disso, ela gera várias versões otimizadas de uma imagem, escolhendo automaticamente a melhor para exibir com base no tamanho do dispositivo e na resolução da tela.

2. Estabilidade

Previne mudança de layout automática quando as imagens estão sendo carregadas, esse é o principal conceito pra uma bom ranqueamento em CLS.

3. Cargas mais Rápidas

Melhora a experiência do usuário, fornecendo imagens mais rápidas, reduzindo a quantidade de dados transferidos e melhorando a velocidade de carregamento. Aqui afeta diretamente o LCP.


Como usar em seus projetos

Primeiro você importa o componente Image

import Image from 'next/image';
Enter fullscreen mode Exit fullscreen mode

Aqui pode ser de duas forma, neste exemplo abaixo eu importei a imagem e chamo ela dentro do componente <Image>.

import Pexels1 from "../public/pexels-1.jpg";
Enter fullscreen mode Exit fullscreen mode

E no local onde eu usaria a tag <img> eu substituo pela <Image>

<Image
  width={600}
  height={400}
  src={Pexels1} //estou chamando a imagem
  alt="descrição da imagem - também importante pro SEO"
  className="rounded-lg"
/>
Enter fullscreen mode Exit fullscreen mode

Simples assim!

Você também pode colocar o caminho da imagem diretamente no componente, como nesse exemplo:

<Image
  width={600}
  height={400}
  src="../public/pexels-1.jpg" // chamando a imagem diretamente
  alt="descrição da imagem - também importante pro SEO"
  className="rounded-lg"
/>
Enter fullscreen mode Exit fullscreen mode

Mas lembre-se, você precisa fornecer o Width e Height nas props do componente, isso é importante pro Next calcular o tamanho da imagem de acordo com a tela e criar as versões de otimização da imagem.

Comparativo

Agora vamos aos comparativos, essa é a parte legal.

Numa mesma página eu chamei o mesmo arquivo pelo componente <Image> e pela tag <img>

Nessa primeira imagem está o jpg que chamei pela tag <img>. Ela tem 2.7 Mb e demorou 45ms pra carregar, mas lembre-se que estou rodando em localhost, por isso ainda foi rápido.

Image JPG - Sem tratamento algum


Agora veja a mesma imagem que chamei pelo componente <Image>.
O Next converteu automaticamente pro formato Webp e a imagem agora tem 115Kb e demorou 1ms pra carregar.

image webp - nextjs

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay