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

feat(pagespeed): implementar campo is_critical para CSS crítico dinámico (Phase 4.2)

Browse Source 
Implementación completa del sistema de Critical CSS dinámico según plan 13.01:

Domain Layer:
- Crear CriticalCSSCollectorInterface para DIP compliance

Infrastructure Layer:
- Implementar CriticalCSSCollector (singleton via DIContainer)
- Crear CriticalCSSHooksRegistrar para inyección en wp_head
- Actualizar DIContainer con getCriticalCSSCollector()

Schemas:
- Agregar campo is_critical a navbar, top-notification-bar, hero
- Sincronizar con BD (18+39+31 campos)

Renderers (navbar, top-notification-bar, hero):
- Inyectar CriticalCSSCollectorInterface via constructor
- Lógica condicional: si is_critical=true → CSS a <head>

Admin (FormBuilders + FieldMappers):
- Toggle "CSS Crítico" en sección visibility
- Mapeo AJAX para persistencia

Beneficios:
- LCP optimizado: CSS crítico inline en <head>
- Above-the-fold rendering sin FOUC
- Componentes configurables desde admin panel

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
FrankZamora
2025-11-29 09:29:45 -06:00
parent 6d03076032
commit 4f25297f14
17 changed files with 340 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
Public/Hero/Infrastructure/Ui/HeroRenderer.php
View File

@@ -5,6 +5,7 @@ namespace ROITheme\Public\Hero\Infrastructure\Ui;
use ROITheme\Shared\Domain\Contracts\RendererInterface;
use ROITheme\Shared\Domain\Contracts\CSSGeneratorInterface;
use ROITheme\Shared\Domain\Contracts\CriticalCSSCollectorInterface;
use ROITheme\Shared\Domain\Entities\Component;
/**
@@ -28,8 +29,13 @@ use ROITheme\Shared\Domain\Entities\Component;
*/
final class HeroRenderer implements RendererInterface
{
/**
* @param CSSGeneratorInterface $cssGenerator Servicio de generación de CSS
* @param CriticalCSSCollectorInterface $criticalCollector Colector de CSS crítico
*/
public function __construct(
private CSSGeneratorInterface $cssGenerator
private CSSGeneratorInterface $cssGenerator,
private CriticalCSSCollectorInterface $criticalCollector
) {}
public function render(Component $component): string
@@ -47,6 +53,17 @@ final class HeroRenderer implements RendererInterface
$css = $this->generateCSS($data);
$html = $this->buildHTML($data);
// Verificar si el CSS debe ser crítico (inyectado en <head>)
$isCritical = isset($data['visibility']['is_critical']) &&
$data['visibility']['is_critical'] === true;
if ($isCritical) {
// CSS crítico: agregar al collector para inyección en <head>
$this->criticalCollector->add('hero', $css);
return $html; // Solo HTML, CSS se inyecta en <head>
}
// CSS no crítico: incluir inline con el componente
return sprintf("<style>%s</style>\n%s", $css, $html);
}