Executando verificação de segurança...
1

[AJUDA] Fonte customizada diminui performance do site

Estou criando um Landing Page com HTML, Tailwindcss(CDN)/css e js, como é algo simples, decidi não utilizar nenhuma framework como NextJS para isso.

Estou tentando conseguir uma nota 100 em todos os pontos do site (lighthouse). Porém quando implementei fontes customizadas no meu site por meio do @font-face, a performance que estava em 96-98 desceu para 75 após isso. Implementei preload das fontes, mas ainda continua com perfomance baixa.

Parte do meu <head/>

<link rel="preload" href="./src/global.css" as="style" fetchpriority="high" />
<link rel="preload" href="./src/styles/fonts.css" as="style" fetchpriority="high" />

<link rel="preload" href="./src/assets/fonts/title/MarmelatBlack.woff" as="font" type="font/woff" crossorigin />
<link rel="preload" href="./src/assets/fonts/title/MarmelatMedium.woff" as="font" type="font/woff" crossorigin />

<link rel="stylesheet" href="./src/styles/variables.css" />
<link rel="stylesheet" href="./src/styles/fonts.css" />
<link rel="stylesheet" href="./src/global.css" />
@font-face {
  font-family: 'title';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: local('MarmelatBlack'), url('../assets/fonts/title/MarmelatBlack.woff') format('woff');
  font-weight: 900;
}
@font-face {
  font-family: 'title';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: local('MarmelatMedium'), url('../assets/fonts/title/MarmelatMedium.woff') format('woff');
  font-weight: normal;
}

Imagem com a nota do lighthouse

O alerta ocorre no <h1/>, justamente o elemento que está utilizando a fonte customizada

<div>
        <h1 class="heroTitle font-[title] font-black text-center text-3xl md:text-5xl sm:text-4xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </h1>

        <p class="text-center text-sm md:text-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>

O que eu poderia fazer para resolver esse problema?

Carregando publicação patrocinada...
2

O que eu poderia fazer para resolver esse problema?

Fonte geralmente é um arquivo pesado. Olhe o tamanho do arquivo, tente compactar, ache outra fonte que não pese tanto. Use outros formatos em conjunto

1

Fiz a conversão da minha fonte de .woff para .woff2, o tamanho da fonte foi de mais ou menos 70 kB para uns 50 kB, abaixo eu deixei o tamanho de cada fonte. Porém continua com a mesma nota. Eu gostaria de manter essa mesma fonte, pois combina bastante com o projeto.

MarmelatBlack.woff2: 49.5 kB

MarmelatMedium.woff2: 49.9 kB
1

Mesmo 70KB não deveria impactar. O problema está em outro lugar.

Tente colocar seu site atrás de uma CDN pra entregar os arquivos mais rapidamente.

Cloudflare é bem facil de configurar e pode te ajudar

1