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

perf: Optimización PageSpeed - Score 81→97

Browse Source 
Cambios implementados:

1. CSS Crítico (critical-bootstrap.css):
   - Agregar clases responsive d-lg-none, d-lg-block, d-lg-flex
   - Prevenir CLS en TopNotificationBar al ocultar en móvil
   - Agregar estilos para tablas y main content (CLS fix)

2. Google Analytics Diferido (adsense-placement.php):
   - GA4 ahora carga después de 3s o primera interacción
   - Reduce ~59 KiB de JavaScript bloqueante
   - TBT mejorado significativamente

3. CSS Minificado (enqueue-scripts.php):
   - Usar style.min.css y css-global-accessibility.min.css
   - Ahorro ~6 KiB en transferencia

4. Nuevo script minify-css.php para generar versiones .min.css

Resultados PageSpeed Mobile:
- Performance: 81 → 97 (+16 puntos)
- FCP: 2.8s → 1.0s (-64%)
- LCP: 3.5s → 1.3s (-63%)
- Core Web Vitals: SUPERADA

🤖 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 13:23:20 -06:00
parent 0fba2d567c
commit c7e8f14d83
6 changed files with 195 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
Inc/enqueue-scripts.php
View File

@@ -172,19 +172,52 @@ add_action('wp_enqueue_scripts', 'roi_enqueue_bootstrap', 5);
/**
* Enqueue main theme stylesheet
* FASE 1 - Este es el archivo CSS principal del tema
*
* OPTIMIZACIÓN PageSpeed: Diferido con media='print' + onload
* Los estilos críticos ya están en critical-bootstrap.css (inline en <head>)
* @see Shared/Infrastructure/Services/CriticalBootstrapService.php
*/
function roi_enqueue_main_stylesheet() {
wp_enqueue_style(
'roi-main-style',
get_template_directory_uri() . '/Assets/css/style.css',
get_template_directory_uri() . '/Assets/css/style.min.css',
array('roi-variables'),
'1.0.7', // Bloqueante - estilos base del tema
'all'
'1.0.9', // Minificado + Diferido - estilos no críticos del tema
'print' // Diferido: no bloquea renderizado
);
}
add_action('wp_enqueue_scripts', 'roi_enqueue_main_stylesheet', 5);
/**
* Agregar onload para cambiar media de 'print' a 'all' en style.css
*
* Esto permite que el CSS se cargue de forma asíncrona sin bloquear
* el renderizado inicial, mejorando LCP y FCP.
*
* @param string $html El tag link del estilo encolado.
* @param string $handle El handle registrado del estilo.
* @return string Tag link modificado
*/
function roi_defer_main_style( $html, $handle ) {
if ( 'roi-main-style' !== $handle ) {
return $html;
}
// Agregar onload para cambiar media a 'all' después de cargar
$html = str_replace(
"media='print'",
"media='print' onload=\"this.media='all'\"",
$html
);
// Agregar fallback noscript para navegadores sin JS
$html .= '<noscript><link rel="stylesheet" href="' . esc_url( get_template_directory_uri() . '/Assets/css/style.min.css' ) . '"></noscript>';
return $html;
}
add_filter( 'style_loader_tag', 'roi_defer_main_style', 10, 2 );
/**
* Enqueue FASE 2 CSS - Template RDash Component Styles (Issues #58-64)
*
@@ -399,7 +432,7 @@ function roi_enqueue_accessibility() {
// DIFERIDO: Fase 4.3 - no crítico para renderizado inicial
wp_enqueue_style(
'roi-accessibility',
get_template_directory_uri() . '/Assets/css/css-global-accessibility.css',
get_template_directory_uri() . '/Assets/css/css-global-accessibility.min.css',
array('roi-main-style'),
ROI_VERSION,
'print'