d8fa5cb609
- Agregar font preload en P:-2 para fuentes Poppins críticas (400, 600, 700) - Cambiar font-display: optional → swap para garantizar carga de fuente - Ajustar size-adjust: 106% → 100.6% para minimizar salto visual - Nuevo orden prioridades: P:-2 → P:-1 → P:0 → P:1 → P:2 → P:3 → P:5 Archivos: - CriticalCSSInjector.php: nuevo método preloadFonts() - css-global-fonts.css: @font-face optimizado 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
119 lines
3.4 KiB
PHP
119 lines
3.4 KiB
PHP
<?php
|
|
declare(strict_types=1);
|
|
|
|
namespace ROITheme\Public\CriticalCSS\Infrastructure\Services;
|
|
|
|
use ROITheme\Public\CriticalCSS\Domain\Contracts\CriticalCSSCacheInterface;
|
|
|
|
/**
|
|
* Inyecta CSS critico en wp_head
|
|
*
|
|
* Prioridades:
|
|
* - P:-2 Font preload (antes de variables)
|
|
* - P:-1 Variables CSS (antes de Bootstrap)
|
|
* - P:2 Responsive critico (despues de Bootstrap critico)
|
|
*
|
|
* @package ROITheme\Public\CriticalCSS\Infrastructure\Services
|
|
*/
|
|
final class CriticalCSSInjector
|
|
{
|
|
public function __construct(
|
|
private readonly CriticalCSSCacheInterface $cache
|
|
) {}
|
|
|
|
/**
|
|
* Fuentes criticas para preload (pesos usados en navbar above-the-fold)
|
|
*/
|
|
private const CRITICAL_FONTS = [
|
|
'/Assets/Fonts/poppins-v24-latin-regular.woff2', // 400 - body text
|
|
'/Assets/Fonts/poppins-v24-latin-600.woff2', // 600 - navbar brand
|
|
'/Assets/Fonts/poppins-v24-latin-700.woff2', // 700 - headings
|
|
];
|
|
|
|
/**
|
|
* Registra hooks de WordPress
|
|
*/
|
|
public function register(): void
|
|
{
|
|
// Font preload: P:-2 (antes de todo, incluso variables)
|
|
add_action('wp_head', [$this, 'preloadFonts'], -2);
|
|
|
|
// Variables CSS: P:-1 (antes de CriticalBootstrapService P:0)
|
|
add_action('wp_head', [$this, 'injectVariables'], -1);
|
|
|
|
// Responsive critico: P:2 (despues de CriticalCSSService P:1)
|
|
// NOTA: Cambiado de P:1 a P:2 para evitar colision con roi-critical-css
|
|
add_action('wp_head', [$this, 'injectResponsive'], 2);
|
|
|
|
// Deshabilitar enqueue de archivos que ahora son inline
|
|
add_action('wp_enqueue_scripts', [$this, 'dequeueInlinedCSS'], 999);
|
|
}
|
|
|
|
/**
|
|
* Inyecta preload links para fuentes criticas
|
|
*
|
|
* Resuelve el problema de "font swap" donde el fallback (106% size-adjust)
|
|
* causa un salto visual cuando Poppins se carga.
|
|
* Con preload, las fuentes llegan antes del primer paint.
|
|
*/
|
|
public function preloadFonts(): void
|
|
{
|
|
echo "<!-- TIPO 4: Font preload para evitar CLS -->\n";
|
|
|
|
foreach (self::CRITICAL_FONTS as $font) {
|
|
printf(
|
|
'<link rel="preload" href="%s" as="font" type="font/woff2" crossorigin>' . "\n",
|
|
esc_url(get_template_directory_uri() . $font)
|
|
);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Inyecta variables CSS criticas
|
|
*/
|
|
public function injectVariables(): void
|
|
{
|
|
$css = $this->cache->get('variables');
|
|
|
|
if (empty($css)) {
|
|
return;
|
|
}
|
|
|
|
printf(
|
|
'<!-- TIPO 4: Variables CSS criticas -->' . "\n" .
|
|
'<style id="roi-critical-variables">%s</style>' . "\n",
|
|
$css
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Inyecta media queries criticas
|
|
*/
|
|
public function injectResponsive(): void
|
|
{
|
|
$css = $this->cache->get('responsive');
|
|
|
|
if (empty($css)) {
|
|
return;
|
|
}
|
|
|
|
printf(
|
|
'<!-- TIPO 4: Responsive critico -->' . "\n" .
|
|
'<style id="roi-critical-responsive">%s</style>' . "\n",
|
|
$css
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Deshabilita enqueue de archivos que ahora estan inline
|
|
*/
|
|
public function dequeueInlinedCSS(): void
|
|
{
|
|
// Variables ya inline - no cargar archivo externo
|
|
if ($this->cache->has('variables')) {
|
|
wp_dequeue_style('roi-variables');
|
|
wp_deregister_style('roi-variables');
|
|
}
|
|
}
|
|
}
|