Optimitza la càrrega amb un subconjunt de font personalitzat
Aprèn com crear un subconjunt personalitzat que només inclogui els glifs necessaris. Les fonts personalitzades causen parpelleig de text a Firefox. Per veure un gif i més detalls, mira aquesta issue. Per solucionar això, tabi carrega un subconjunt de glifs per a l’encapçalament. Donat que això augmenta lleugerament el temps de càrrega inicial, és una bona idea intentar minimitzar la mida d’aquest subconjunt. Per defecte, tabi inclou fitxers de subconjunts per a caràcters en anglès i espanyol (amb alguns símbols). Aquests fitxers es carreguen quan la pàgina o el lloc web de Zola està en aquest idioma. Si estàs fent servir una font personalitzada, pots crear el teu propi subconjunt (segueix llegint) o desactivar completament els subconjunts predeterminats amb Per a una optimització addicional, a continuació t’expliquem com crear un subconjunt de fonts personalitzat que només inclogui els caràcters utilitzats en el teu encapçalament. Instal·la aquestes eines: Executa El següent script pren un fitxer Guarda l’script a algun lloc com Ara pots executar-lo amb les opcions requerides De forma predeterminada, això generarà un fitxer Col·loca aquest fitxer És possible que canviïs el títol o les opcions del menú del teu lloc web, la qual cosa faria que el subconjunt personalitzat deixés de ser útil. Per automatitzar el procés de creació d’aquest fitxer, pots integrar l’script en un ganxo (hook) pre-commit de Git que s’activi en detectar canvis al fitxer Crea un fitxer Fes-lo executable amb Afegeix el següent codi al fitxer: Asegura’t de modificar l’script perquè coincideixi amb la ruta on has guardat l’script Ara, cada vegada que facis canvis al teu projecte de Git i facis commit, el ganxo pre-commit verificarà les modificacions al fitxer Per cert, si t’interessa una forma d’actualitzar automàticament la data de les teves publicacions a Zola o comprimir automàticament els teus fitxers PNG, fes un cop d’ull a aquesta publicació. Si desitges utilitzar tots els scripts alhora (compressió de fitxers PNG, actualització de la data i creació del subconjunt de fonts), combina el seu codi en un sol fitxer El problema
La solució
enable_subset = false
a config.toml
. Requisits
pip install fonttools brotli
per instal·lar totes dues. L’script
config.toml
i un fitxer de font com a entrada, extreu els caràcters necessaris, crea un subconjunt de la font i genera un fitxer CSS que conté el subconjunt codificat en base64.#!/usr/bin/env bash
# La sortida per defecte és el directori actual.
output_path="."
# Opcions de la línia de comandes.
while [; do
done
# Comprova si s'han proporcionat les opcions -c i -f.
if [; then
fi
if [; then
fi
# Comprova si els fitxers de configuració i de font existeixen.
if [; then
fi
if [; then
fi
# Extreu el títol i els noms del menú del fitxer de configuració.
title=
menu_names=
language_names=
# Si el lloc web és multilingüe, obté les traduccions del menú.
if [; then
for; do
# Find the line with the menu name inside a [languages.*.translations] section and get the translated menus.
menu_translation=
# Add the found menu value to the translations string
menu_names+=""
done
fi
# Combina les cadenes extretes.
combined=""
# Obté els caràcters únics.
unique_chars=
# Crea un fitxer temporal per a subset.woff2.
temp_subset=
# Crea el subconjunto.
# Codifica en base64 el fitxer temporal subset.woff2 i crea el fitxer CSS.
base64_encoded_font=
# Elimina el fitxer temporal subset.woff2.
Ús
~/bin/subset_font
. Fes-lo executable amb chmod +x ~/bin/subset_font
.--config
i --font
:
custom_subset.css
al directori actual. Utilitza -o
o --output
per especificar una ruta diferent:
custom_subset.css
dins del directori static/
del teu projecte de Zola. Automatització amb un Pre-commit Hook
config.toml
, executi l’script i guardi el fitxer CSS resultant al directori static/
del teu lloc web..git/hooks/pre-commit
al teu projecte de Git, si encara no existeix.chmod +x .git/hooks/pre-commit
.# Comprova si config.toml s'ha modificat.
if | ; then
# Executa l'script subset_font.
# Afegeix el fitxer subset.css generat al commit.
fi
subset_font
. Les rutes de configuració i font haurien de funcionar correctament amb la configuració predeterminada de tabi.config.toml
i executarà automàticament l’script subset_font
per actualitzar el fitxer custom_subset.css
..git/hooks/pre-commit
.