Skip to main content

Introdução | Frontend

  • Introdução | Frontend

Performance no Frontend​

Api Speculation Rules​

Artigo explicativo

Imagens​

warning

As técnicas abaixo servem para qualquer frontend, pois se trata de algo do HTML, mas á mostrado com REACT

success

Formato .avif é mais leve para ser carregada

Específico para o React: usar a tag <Image>​

import Image from 'next/image';

export default function Home() {
  return (
    <div>
      <h1>Bem-vindo ao meu site!</h1>
      <Image 
        src="/path/to/image.jpg" 
        alt="Imagem de exemplo"
        width={600} 
        height={400}
      />
    </div>
  );
}

Benefícios:

  • Lazy Loading: O Next.js carrega as imagens somente quando elas entram na tela, o que ajuda a melhorar a pontuação do LCP e FCP.
  • Otimização Automática: O Next.js redimensiona e serve a imagem no formato e tamanho adequado para o dispositivo do usuário (por exemplo, serve WebP para navegadores que suportam).
  • Carregamento prioritário: Use a propriedade priority para marcar imagens críticas, como a imagem principal da página, para que ela seja carregada imediatamente.

Ajustar o tamanho das imagens​

<Image
  src="/path/to/image.jpg"
  alt="Imagem responsiva"
  width={800}
  height={600}
  sizes="(max-width: 600px) 100vw, 50vw" // Ajusta o tamanho com base na largura da tela
/>

Carregamento lento loading="lazy"​

<Image
  src="/path/to/image.jpg"
  alt="Imagem carregada de forma assíncrona"
  width={600}
  height={400}
  loading="lazy" // Lazy load manual
/>

Prioridade de carregamento priority="low"​

<Image
  src="/path/to/image.jpg"
  alt="Imagem carregada de forma assíncrona"
  width={600}
  height={400}
  priority="low"
/>

Fontes​

warning

A aplicação do conceito será para o React usando o google fonts

import { Pixelify_Sans  } from 'next/font/google'

const pixelify_Sans = Pixelify_Sans({
    weight: ["400", "700"],
    subsets: ['latin'],
    display: "swap" // carregar sem bloquear a página
})
danger

Melhor é usar as fonts locais e não do google fonts. Houve uma alteração de performance quando movidas as fonts para dentro do projeto

import localFont from "next/font/local";

export const pixelifySans = localFont({
  src: '../public/fonts/PixelifySans-Bold.woff2',
  display: "swap",
  preload: true,

});

Defer and Async for JavaScript (Deferir e Assincronizar o Carregamento de Scripts)​

<!--O script será executado após a renderização do HTML, mas na ordem que foi incluído.-->
<script src="/path/to/script.js" defer></script>

<!--O script será carregado de forma assíncrona e executado assim que estiver pronto, sem bloquear a renderização da página.-->
<script src="/path/to/script.js" async></script>

Css crítico​

<link
    rel="stylesheet"
    href="styles.css"  <!-- Arquivo CSS não crítico -->
    media="print" <!-- O CSS será carregado somente após a renderização inicial -->
    onload="this.media='all'" <!-- Altera o media para 'all' quando o CSS estiver carregado -->
  >
  <noscript>
    <!-- Caso o JavaScript esteja desativado, o CSS será carregado normalmente -->
    <link rel="stylesheet" href="styles.css">
  </noscript>

Cache no Frontend​

Cache no Frontend: 🔗 Clique aqui

Diferença entre biblioteca e Framework​

  • Biblioteca: Você consegue adicionar coisas sem ter muitas regras
  • Framework: É mais fechado na questão das regras de adicionar. Ex: Angular você tem as maneiras exatas de fazer as coisas, não tem como fugir muito daquilo, diferente do React