fix(cls): Preload Poppins fonts to prevent font swap CLS

- Agrega preload de fuentes criticas (regular, 600) en wp_head priority 1
- Fuentes disponibles antes de que CSS las necesite
- Elimina flash de fuente de respaldo que causa layout shift

CLS body.wp-singular esperado: 0.171 -> ~0

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
FrankZamora
2025-12-01 10:51:52 -06:00
parent c0172467b3
commit 3b9a1cb299

View File

@@ -26,6 +26,36 @@ spl_autoload_register(function ($class) {
} }
}); });
// =============================================================================
// FONT PRELOAD - Previene CLS por font swap
// =============================================================================
/**
* Precarga fuentes críticas para prevenir CLS por font swap
*
* Las fuentes Poppins se precargan con alta prioridad para que estén
* disponibles cuando el CSS las necesite, evitando el "flash" de
* fuente de respaldo que causa layout shift.
*/
add_action('wp_head', function() {
$theme_url = get_template_directory_uri();
// Fuentes críticas: regular y 600 (usadas en títulos y body)
$critical_fonts = [
'poppins-v24-latin-regular.woff2',
'poppins-v24-latin-600.woff2',
];
foreach ($critical_fonts as $font) {
printf(
'<link rel="preload" href="%s/Assets/fonts/%s" as="font" type="font/woff2" crossorigin>%s',
esc_url($theme_url),
esc_attr($font),
"\n"
);
}
}, 1); // Priority 1 = muy temprano en wp_head
// ============================================================================= // =============================================================================
// HELPER FUNCTION: roi_get_component_setting() - GENÉRICA // HELPER FUNCTION: roi_get_component_setting() - GENÉRICA
// ============================================================================= // =============================================================================