[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?