Optimiza la carga con un subconjunto de fuente personalizado
Aprende cómo crear un subconjunto personalizado que solo incluya los glifos necesarios. Las fuentes personalizadas causan parpadeo de texto en Firefox. Para ver un gif y más detalles, mira esta issue. Para solucionar esto, tabi carga un subconjunto de glifos para el encabezado. Dado que esto aumenta ligeramente el tiempo de carga inicial, es una buena idea tratar de minimizar el tamaño de este subconjunto. Por defecto, tabi incluye archivos de subconjuntos para caracteres en inglés y español (con algunos símbolos). Estos archivos se cargan cuando la página o el sitio de Zola está en ese idioma. Si estás usando una fuente personalizada, puedes crear tu propio subconjunto (ver más abajo) o desactivar completamente los subconjuntos predeterminados con Para una optimización adicional, a continuación verás cómo crear un subconjunto de fuentes personalizado que solo incluya los caracteres utilizados en tu encabezado. Instala estas herramientas: Ejecuta El script que sigue toma un archivo Guarda el script en algún lugar como Ahora puedes ejecutarlo con las opciones requeridas De forma predeterminada, esto generará un archivo Coloca este archivo Es posible que cambies el título o las opciones del menú de tu sitio, lo que haría que el subconjunto personalizado deje de ser útil. Para automatizar el proceso de creación de este archivo, puedes integrar el script en un gancho (hook) pre-commit de Git que se active al detectar cambios en el archivo Crea un archivo Hazlo ejecutable con Agrega el siguiente código al archivo: Asegúrate de modificar el script para que coincida con la ruta donde has guardado el script Ahora, cada vez que hagas cambios en tu proyecto de Git y los confirmes, el gancho pre-commit verificará las modificaciones en el archivo Por cierto, si te interesa una forma de actualizar automáticamente la fecha de tus publicaciones en Zola o comprimir automáticamente tus archivos PNG, echa un vistazo a esta publicación. Si deseas utilizar todos los scripts a la vez (compresión de archivos PNG, actualización de la fecha y creación del subconjunto de fuentes), combina su código en un solo archivo El problema
La solución
enable_subset = false
en tu config.toml
. Requisitos
pip install fonttools brotli
para instalar ambas. El script
config.toml
y un archivo de fuente como entrada, extrae los caracteres necesarios, crea un subconjunto de la fuente y genera un archivo CSS que contiene el subconjunto codificado en base64.#!/usr/bin/env bash
# La salida predeterminada es el directorio actual.
output_path="."
# Analiza las opciones de la línea de comandos.
while [; do
done
# Comprueba si se proporcionan las opciones -c y -f.
if [; then
fi
if [; then
fi
# Comprueba si existen los archivos de configuración y de fuentes.
if [; then
fi
if [; then
fi
# Extrae el título y los nombres de los menús del archivo de configuración.
title=
menu_names=
language_names=
# Si el sitio es multilingüe, obtiene las traducciones de los menús.
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 las cadenas extraídas.
combined=""
# Obtiene los caracteres únicos.
unique_chars=
# Crea un archivo temporal para subset.woff2.
temp_subset=
# Crea el subconjunto.
# Codifica en Base64 el archivo temporal subset.woff2 y crea el archivo CSS.
base64_encoded_font=
# Elimina el archivo temporal subset.woff2.
Uso
~/bin/subset_font
. Hazlo ejecutable con chmod +x ~/bin/subset_font
.--config
y --font
:
custom_subset.css
en el directorio actual. Usa -o
o --output
para especificar una ruta diferente:
custom_subset.css
dentro del directorio static/
. Automatización con un Pre-commit Hook
config.toml
, ejecute el script y guarde el archivo CSS resultante en el directorio static/
de tu sitio..git/hooks/pre-commit
en tu proyecto de Git, si aún no existe.chmod +x .git/hooks/pre-commit
.# Comprueba si config.toml se ha modificado.
if | ; then
# Ejecuta el script subset_font.
# Añadie el subset.css recién generado al commit.
fi
subset_font
. Las rutas de configuración y fuente deberían funcionar correctamente con la configuración predeterminada de tabi.config.toml
y ejecutará automáticamente el script subset_font
para actualizar el archivo custom_subset.css
..git/hooks/pre-commit
.