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

perf: defer Bootstrap CSS with critical subset inline

Browse Source 
- Created Assets/css/critical-bootstrap.css (~10KB subset)
  Contains only Bootstrap classes used in above-the-fold components:
  container, navbar, flexbox, dropdown, spacing utilities

- Created CriticalBootstrapService (singleton)
  Injects minified critical Bootstrap in <head> at priority 0
  Output: <style id="roi-critical-bootstrap">...</style>

- Modified enqueue-scripts.php
  Bootstrap now loads with media="print" + onload="this.media='all'"
  Full 31KB Bootstrap loads async, doesn't block rendering

- Updated CriticalCSSHooksRegistrar
  Now registers both CriticalBootstrapService (priority 0)
  and CriticalCSSService (priority 1)

Flow:
1. wp_head (priority 0) → Critical Bootstrap (~10KB inline)
2. wp_head (priority 1) → Critical Component CSS (~4KB inline)
3. Bootstrap full (31KB) loads deferred, non-blocking

Expected PageSpeed improvement: ~400-600ms LCP reduction

🤖 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:26:24 -06:00
parent ce0179a134
commit d5a2fd2702
5 changed files with 691 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
Inc/enqueue-scripts.php
View File

@@ -17,9 +17,16 @@ 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.
*
* @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',
@@ -91,15 +98,23 @@ 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
*/
function roi_enqueue_bootstrap() {
// Bootstrap CSS - with high priority
// Bootstrap CSS - DIFERIDO: critical subset inline, full deferred
// media='print' + onload cambia a 'all' cuando carga (ver ROI_DEFERRED_CSS)
wp_enqueue_style(
'roi-bootstrap',
get_template_directory_uri() . '/Assets/Vendor/Bootstrap/Css/bootstrap.min.css',
array('roi-fonts'),
'5.3.2',
'all'
'print' // Diferido - CSS crítico inline via CriticalBootstrapService
);
// Bootstrap Icons CSS - SUBSET OPTIMIZADO (Fase 4.1 PageSpeed)