Rendimiento y Core Web Vitals

Cómo alojar las Google Fonts en local en PrestaShop para el RGPD

Cargar una fuente desde los servidores de Google desencadena una petición saliente desde el navegador del visitante, antes de cualquier consentimiento. Esa petición transmite su dirección IP, la dirección de la página consultada y su agente de usuario a un tercero situado fuera de la Unión Europea. Es un tratamiento de datos personales sin base legal, y resulta trivialmente comprobable por cualquiera que abra el inspector del navegador.

Una resolución del tribunal regional de Múnich en 2022 condenó a un operador de sitio precisamente por ese motivo, y el caso sirvió de base a una oleada de requerimientos en Alemania. Las autoridades de protección de datos retomaron el asunto en sus recomendaciones. El riesgo no es teórico.

Por qué el consentimiento no resuelve el problema

Se podría pensar en bloquear las fuentes hasta el consentimiento, como un script de medición de audiencia. En la práctica ese enfoque no aguanta: una página que espera el consentimiento para cargar sus fuentes se muestra primero con la fuente del sistema y luego cambia, lo que produce un desplazamiento visual importante y degrada la experiencia para todos.

El autoalojamiento es la única respuesta que resuelve a la vez el cumplimiento y el rendimiento. Descargas los archivos una vez, los sirves desde tu propio dominio, y ninguna petición sale hacia un tercero.

Dónde se esconden las llamadas en PrestaShop

Es la parte que la mayoría de las migraciones olvida. Una llamada suprimida del tema no significa que el sitio esté limpio.

  1. El tema. Una etiqueta de enlace hacia fonts.googleapis.com en el archivo de cabecera, a veces acompañada de una directiva de preconexión.
  2. Las hojas de estilo. Una regla de importación al inicio de un archivo CSS, a menudo olvidada porque no aparece en el código de las plantillas.
  3. Los módulos. Un módulo de carrusel, de cuenta atrás o de ventana emergente que carga su propia fuente. Cada módulo añade potencialmente una llamada.
  4. Los iconos. Las bibliotecas de iconos alojadas por el mismo proveedor plantean exactamente el mismo problema.
  5. El contenido. Una página CMS o una descripción de producto pegada desde un editor externo puede contener una etiqueta de estilo que importa una fuente remota.
Módulo Google Fonts Local PrestaShop 8/9 — Fuentes Autoalojadas RGPDTus Google Fonts, alojadas en tu propio servidor. Cero peticiones a Google, cero archivos de tema modificados.59,00

El procedimiento

Cuatro etapas, en este orden.

1. Inventariar. Abre la pestaña Red de tu navegador, filtra por dominios de fuentes y recarga varias páginas tipo: inicio, categoría, ficha de producto, carrito, página CMS. Anota cada familia y cada grosor realmente solicitado.

2. Descargar. Recupera los archivos en formato WOFF2, que cubre todos los navegadores actuales. Conserva solo los grosores que usas de verdad: una familia cargada en seis grosores cuando el tema emplea dos representa varios cientos de kilobytes inútiles.

3. Declarar. Coloca los archivos en tu tema y declara cada familia con una regla de fuente personalizada, indicando un comportamiento de visualización de tipo intercambio para evitar el texto invisible durante la carga.

4. Limpiar. Elimina todas las referencias remotas encontradas en la etapa 1, incluidas las directivas de preconexión, que abren una conexión incluso sin descarga de archivo.

El control final

La prueba se hace en la pestaña Red, navegación privada, caché vaciada. Filtra por los dominios de fuentes remotas: cero peticiones esperadas, en todas las páginas tipo, con sesión iniciada y sin ella.

Merece la pena hacer dos verificaciones complementarias. El back office carga a veces sus propias fuentes remotas, lo que no afecta a tus visitantes pero merece tratarse por tus equipos. Y los emails transaccionales en formato HTML también pueden contener llamadas de fuentes, lo que transmite datos cada vez que se abre un mensaje.

El beneficio de rendimiento

El autoalojamiento elimina una resolución DNS, una negociación TLS y una conexión hacia un dominio de terceros, en el camino crítico del renderizado. En una conexión móvil media, eso representa habitualmente varios cientos de milisegundos ganados en la visualización del texto.

Dos ajustes completan la ganancia. La precarga de la fuente principal, a declarar en la cabecera, la hace arrancar antes del análisis del CSS. Y la reducción del juego de caracteres a los alfabetos realmente usados aligera cada archivo, a menudo a la mitad al retirar los caracteres cirílicos y griegos de una fuente universal.

El punto de vigilancia sobre la licencia

La casi totalidad de las fuentes distribuidas por Google están bajo licencia libre, lo que autoriza el autoalojamiento sin trámite. Verifica de todos modos la licencia de las familias que te llevas a casa, sobre todo si las has obtenido en otro sitio, y conserva el archivo de licencia junto a los archivos de fuente.

Automatizar la migración

El módulo Google Fonts Local para PrestaShop trata esta cadena en PrestaShop 8 y 9: detección de llamadas remotas en el tema y los módulos, descarga y alojamiento local de las familias usadas, reescritura de las referencias y comprobación de que no queda ninguna petición.

Sigue leyendo

Artículos relacionados