git.admin/roi-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(pagespeed): Fase 4.3 - Preload fuentes para reducir CLS

Browse Source 
- Agregar preload de Poppins regular (400) y semibold (600)
- Agregar fallback font con size-adjust para minimizar layout shift
- Actualizar font stack con 'Poppins Fallback'

Impacto esperado: CLS 0.133 → ~0.05-0.08

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
FrankZamora
2025-11-27 15:45:01 -06:00
parent d7915d372b
commit 83717771c0
2 changed files with 41 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
Assets/css/css-global-fonts.css
View File

@@ -24,11 +24,12 @@
--font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
/* Fuente primaria - Poppins según template y documentación */
--font-primary: 'Poppins', sans-serif;
/* Fuente primaria - Poppins con fallback ajustado (Fase 4.3 PageSpeed)
'Poppins Fallback' tiene size-adjust para reducir CLS durante font swap */
--font-primary: 'Poppins', 'Poppins Fallback', sans-serif;
/* Fuente para encabezados - Poppins según template */
--font-headings: 'Poppins', sans-serif;
/* Fuente para encabezados - Poppins con fallback ajustado */
--font-headings: 'Poppins', 'Poppins Fallback', sans-serif;
/* Fuente para código (monospace) */
--font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono',
@@ -56,8 +57,22 @@
Pesos incluidos: 400, 500, 600, 700
Formato: WOFF2 (mejor compresión)
Fase 4.3 PageSpeed: Fallback con size-adjust para reducir CLS
- size-adjust: 106% ajusta métricas del fallback para coincidir con Poppins
- Reduce layout shift cuando las fuentes se intercambian
============================================ */
/* Fallback font con métricas ajustadas para Poppins */
@font-face {
font-family: 'Poppins Fallback';
src: local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('sans-serif');
size-adjust: 106%;
ascent-override: 105%;
descent-override: 35%;
line-gap-override: 10%;
}
@font-face {
font-family: 'Poppins';
src: url('../fonts/poppins-v24-latin-regular.woff2') format('woff2');