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

22
Inc/enqueue-scripts.php
View File

@@ -17,16 +17,12 @@ if (!defined('ABSPATH')) {
* Estos CSS se cargan con media="print" y onload="this.media='all'"
* para evitar bloquear el renderizado inicial.
*
* IMPORTANTE: Bootstrap se difiere porque su CSS crítico se inyecta
* inline via CriticalBootstrapService (~8KB subset en <head>).
* El Bootstrap completo (31KB) carga después sin bloquear.
* NOTA: Bootstrap NO está diferido porque causa CLS alto (0.954).
* Bootstrap debe cargar bloqueante para evitar layout shifts.
*
* @since 1.0.21
* @since 1.0.22 Added roi-bootstrap to deferred list
*/
define('ROI_DEFERRED_CSS', [
// Framework CSS (critical subset inline, full deferred)
'roi-bootstrap',
// Componentes específicos (below the fold)
'roi-badges',
'roi-pagination',
@@ -99,22 +95,18 @@ add_action('wp_enqueue_scripts', 'roi_enqueue_fonts', 1);
/**
* Enqueue Bootstrap 5 styles and scripts
*
* OPTIMIZACIÓN PageSpeed: Bootstrap CSS se carga diferido.
* El CSS crítico (container, navbar, flexbox) se inyecta inline
* via CriticalBootstrapService antes de que Bootstrap cargue.
*
* @see Shared/Infrastructure/Services/CriticalBootstrapService.php
* @see Assets/css/critical-bootstrap.css
* NOTA: Bootstrap debe cargar BLOQUEANTE (media='all').
* Diferirlo causa CLS alto (0.954) por layout shifts.
* CriticalBootstrapService queda disponible para futuras optimizaciones.
*/
function roi_enqueue_bootstrap() {
// Bootstrap CSS - DIFERIDO: critical subset inline, full deferred
// media='print' + onload cambia a 'all' cuando carga (ver ROI_DEFERRED_CSS)
// Bootstrap CSS - BLOQUEANTE para evitar CLS
wp_enqueue_style(
'roi-bootstrap',
get_template_directory_uri() . '/Assets/Vendor/Bootstrap/Css/bootstrap.min.css',
array('roi-fonts'),
'5.3.2',
'print' // Diferido - CSS crítico inline via CriticalBootstrapService
'all' // Bloqueante - diferirlo causa CLS alto
);
// Bootstrap Icons CSS - SUBSET OPTIMIZADO (Fase 4.1 PageSpeed)