Eu estava com um problema no Blog da Toca do Rapoelho: O Blog estava pesando demais, muito mais do que deveria para um Blog, com um tamanho que chegava a 1,1 MB, de acordo com o teste no Pingdom:

Isso pra mim, era inadmissível, afinal, eu queria um site bem mais leve. Mas, decidi dar uma olhada no que estava dando esse tamanho todo, e vi que o maior responsável eram as fontes. 931 KB em fontes.

Mas, qual era a fonte que estava consumindo isso tudo de espaço? Bingo. Era a symbols-nerd-font. Que é basicamente uma fonte de ícones, e nada mais.

E com isso em mente, pensei: Como otimizar essa fonte e reduzir o tamanho dela?

Como Otimizar a Fonte?

Claramente, eu precisava remover caracteres dessa fonte. Mas como fazer isso? Afinal, essa é uma fonte que tem mais de dez mil caracteres! Não é a toa que ele pesa tanto no site.

E assim, comecei a pesquisar na Internet. Até que cheguei num utilitário chamado glyphhanger, e que ele tinha uma opção para fazer “subsetting¹”. Isso seria uma excelente solução pra mim. Primeiramente, instalei as dependências:

sudo pacman -Syu python-zopfli python-brotli python-fonttools

E depois, usando o npm, instalei o glyphhanger.

sudo npm install -g glyphhanger

Glyphhanger instalado, comecei a selecionar quais caracteres eu iria manter. E acabei chegando a esses aqui:

      󰇮                    󰃭      󱀈      

Como fazer isso? Criei um novo arquivo .md, para o Hugo gerar uma página com os ícones que eu queria manter, peguei o index.html com os ícones gerados e usando o glyphhanger, gerei um subconjunto da symbols-nerd-font. E foi com esse comando que eu fiz isso:

glyphhanger ./index.html --subset=*.woff2

E assim, foi gerado o subconjunto, muito menor do que a fonte original. De mais de dez mil caracteres para vinte. Somente aqueles que são necessários.

Movi os arquivos gerados para a pasta /themes/ficurinia/static/fonts/symbols-nerd-font/ e modifiquei o symbols-nerd-font.css, que estava assim:

/* symbols-nerd-font */
@font-face {
	font-family: Symbols Nerd Font;
	font-style: normal;
	font-weight: 400;
	src: local("Symbols Nerd Font"), local("SymbolsNF"), url(symbols-nerd-font.woff2) format("woff2");
}

Para isso:

/* symbols-nerd-font */
@font-face {
	font-display: swap;
	font-family: Symbols Nerd Font;
	font-style: normal;
	font-weight: 400;
	src: local("Symbols Nerd Font"), local("SymbolsNF"), url(symbols-nerd-font-subset.woff2) format("woff2");
}

E assim, estava sendo usado o Subconjunto ao invés de ser usada a fonte completa.

Resultados da Otimização

Depois de otimizar a fonte, atualizei o site e refiz o teste no Pingdom. E o resultado foi esse aqui:

De 1,1 MB para 240 KB. Uma redução de 79% no tamanho da página, o que foi uma diferença enorme. As fontes reduziram de 931 KB para 65 KB. Uma redução de mais de 90%.

E a fonte que era responsável pelo site passar de 1 MB de tamanho, reduziu de 870 KB para 3,9 KB. Uma redução de mais de 99%, apenas por selecionar aqueles caracteres que estão sendo usados no site.

Palavras Finais

Agora, eu posso realmente migrar o Cantinho do Romeo para o Hugo sem a preocupação com as fontes e tenho um site realmente mais rápido e muito mais leve. Quero garantir que os meus Blogs carreguem o mais rápido possível, seja num WiFi de alta velocidade ou num 4G mais limitado.