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

fix: eliminate forced reflows in TOC ScrollSpy + revert Bootstrap defer

Browse Source 
- Replace scroll event listener with Intersection Observer in TableOfContentsRenderer
- Eliminates ~100ms forced reflows from offsetTop reads during scroll
- Revert Bootstrap CSS to blocking (media='all') - deferring caused CLS 0.954
- Keep CriticalBootstrapService available for future optimization
- Simplify CriticalCSSHooksRegistrar to only use CriticalCSSService

🤖 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 10:52:25 -06:00
parent d5a2fd2702
commit 6004420620
4 changed files with 95 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
functions-addon.php
View File

@@ -283,28 +283,19 @@ function roi_render_component(string $componentName): string {
* Registra hooks para inyectar CSS crítico en <head>
*
* FLUJO:
* 1. wp_head (priority 0) → CriticalBootstrapService::render()
* - Lee Assets/css/critical-bootstrap.css (subset ~8KB)
* - Output: <style id="roi-critical-bootstrap">...</style>
*
* 2. wp_head (priority 1) → CriticalCSSService::render()
* 1. wp_head (priority 1) → CriticalCSSService::render()
* - Consulta BD por componentes con is_critical=true
* - Genera CSS usando los métodos públicos generateCSS() de los Renderers
* - Output: <style id="roi-critical-css">...</style>
*
* 3. Bootstrap completo se carga diferido (media="print" + onload)
* - Ver Inc/enqueue-scripts.php
* NOTA: CriticalBootstrapService está DESHABILITADO porque diferir
* Bootstrap causa CLS alto (0.954). Bootstrap carga bloqueante.
*
* 4. Cuando los Renderers ejecutan, detectan is_critical y omiten CSS inline
* Cuando los Renderers ejecutan, detectan is_critical y omiten CSS inline.
*/
add_action('after_setup_theme', function() {
$criticalCSSService = roi_get_critical_css_service();
$criticalBootstrapService = \ROITheme\Shared\Infrastructure\Services\CriticalBootstrapService::getInstance();
$hooksRegistrar = new \ROITheme\Shared\Infrastructure\Wordpress\CriticalCSSHooksRegistrar(
$criticalCSSService,
$criticalBootstrapService
);
$hooksRegistrar = new \ROITheme\Shared\Infrastructure\Wordpress\CriticalCSSHooksRegistrar($criticalCSSService);
$hooksRegistrar->register();
});