perf: Optimización PageSpeed - Score 81→97
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
@@ -226,6 +226,19 @@ button:focus:not(:focus-visible) {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
/* Responsive Display Utilities - Previene CLS en TopNotificationBar */
|
||||
@media (min-width: 992px) {
|
||||
.d-lg-none {
|
||||
display: none !important;
|
||||
}
|
||||
.d-lg-block {
|
||||
display: block !important;
|
||||
}
|
||||
.d-lg-flex {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap !important;
|
||||
}
|
||||
@@ -826,3 +839,34 @@ h6 { font-size: 1rem; }
|
||||
h3 { font-size: 1.75rem; }
|
||||
h4 { font-size: 1.5rem; }
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
CLS PREVENTION - Tables & Main Content
|
||||
========================================================================== */
|
||||
|
||||
/* Prevenir CLS en tablas APU */
|
||||
.analisis table,
|
||||
table.table {
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.analisis table tr,
|
||||
table.table tr {
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.analisis table td,
|
||||
.analisis table th,
|
||||
table.table td,
|
||||
table.table th {
|
||||
padding: 0.5rem;
|
||||
vertical-align: middle;
|
||||
border: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
/* Reservar espacio para main content */
|
||||
.site-main {
|
||||
min-height: 50vh;
|
||||
}
|
||||
|
||||
1
Assets/css/css-global-accessibility.min.css
vendored
Normal file
1
Assets/css/css-global-accessibility.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
Assets/css/style.min.css
vendored
Normal file
1
Assets/css/style.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -348,40 +348,75 @@ function roi_is_analytics_loaded(): bool
|
||||
}
|
||||
|
||||
/**
|
||||
* Renderiza script de Google Analytics 4
|
||||
* Renderiza script de Google Analytics 4 (DIFERIDO)
|
||||
*
|
||||
* Para mejorar Core Web Vitals (TBT), GA4 se carga:
|
||||
* 1. Después de 3 segundos de timeout, O
|
||||
* 2. Al primer scroll/click/touch del usuario
|
||||
*
|
||||
* Esto reduce ~59 KiB de JavaScript bloqueante.
|
||||
*/
|
||||
function roi_render_ga4_script(string $trackingId, bool $anonymizeIp): void
|
||||
{
|
||||
$config = $anonymizeIp ? "{ 'anonymize_ip': true }" : '{}';
|
||||
$escapedTrackingId = esc_attr($trackingId);
|
||||
$escapedConfig = esc_js($trackingId);
|
||||
|
||||
echo '<!-- Google Analytics 4 (ROI Theme) -->' . "\n";
|
||||
echo '<script async src="https://www.googletagmanager.com/gtag/js?id=' . esc_attr($trackingId) . '"></script>' . "\n";
|
||||
echo '<!-- Google Analytics 4 (ROI Theme - Deferred Loading) -->' . "\n";
|
||||
echo '<script>' . "\n";
|
||||
echo '(function(){' . "\n";
|
||||
echo ' var loaded=false;' . "\n";
|
||||
echo ' function loadGA4(){' . "\n";
|
||||
echo ' if(loaded)return;loaded=true;' . "\n";
|
||||
echo ' var s=document.createElement("script");' . "\n";
|
||||
echo ' s.src="https://www.googletagmanager.com/gtag/js?id=' . $escapedTrackingId . '";' . "\n";
|
||||
echo ' s.async=true;' . "\n";
|
||||
echo ' document.head.appendChild(s);' . "\n";
|
||||
echo ' window.dataLayer=window.dataLayer||[];' . "\n";
|
||||
echo ' function gtag(){dataLayer.push(arguments);}' . "\n";
|
||||
echo ' window.gtag=gtag;' . "\n";
|
||||
echo ' gtag("js",new Date());' . "\n";
|
||||
echo 'gtag("config", "' . esc_js($trackingId) . '", ' . $config . ');' . "\n";
|
||||
echo ' gtag("config","' . $escapedConfig . '",' . $config . ');' . "\n";
|
||||
echo ' }' . "\n";
|
||||
echo ' var t=setTimeout(loadGA4,3000);' . "\n";
|
||||
echo ' ["scroll","click","touchstart"].forEach(function(e){' . "\n";
|
||||
echo ' document.addEventListener(e,function(){clearTimeout(t);loadGA4();},{once:true,passive:true});' . "\n";
|
||||
echo ' });' . "\n";
|
||||
echo '})();' . "\n";
|
||||
echo '</script>' . "\n";
|
||||
}
|
||||
|
||||
/**
|
||||
* Renderiza script de Universal Analytics (legacy)
|
||||
* Renderiza script de Universal Analytics (legacy - DIFERIDO)
|
||||
*
|
||||
* Carga diferida para mejorar Core Web Vitals.
|
||||
*/
|
||||
function roi_render_universal_analytics_script(string $trackingId, bool $anonymizeIp): void
|
||||
{
|
||||
$anonymizeConfig = $anonymizeIp ? 'ga("set","anonymizeIp",true);' : '';
|
||||
$escapedTrackingId = esc_js($trackingId);
|
||||
|
||||
echo '<!-- Universal Analytics (ROI Theme) -->' . "\n";
|
||||
echo '<!-- Universal Analytics (ROI Theme - Deferred) -->' . "\n";
|
||||
echo '<script>' . "\n";
|
||||
echo '(function(){' . "\n";
|
||||
echo ' var loaded=false;' . "\n";
|
||||
echo ' function loadUA(){' . "\n";
|
||||
echo ' if(loaded)return;loaded=true;' . "\n";
|
||||
echo ' (function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){' . "\n";
|
||||
echo ' (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),' . "\n";
|
||||
echo ' m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)' . "\n";
|
||||
echo ' })(window,document,"script","https://www.google-analytics.com/analytics.js","ga");' . "\n";
|
||||
echo 'ga("create", "' . esc_js($trackingId) . '", "auto");' . "\n";
|
||||
echo ' ga("create","' . $escapedTrackingId . '","auto");' . "\n";
|
||||
if (!empty($anonymizeConfig)) {
|
||||
echo $anonymizeConfig . "\n";
|
||||
echo ' ' . $anonymizeConfig . "\n";
|
||||
}
|
||||
echo ' ga("send","pageview");' . "\n";
|
||||
echo ' }' . "\n";
|
||||
echo ' var t=setTimeout(loadUA,3000);' . "\n";
|
||||
echo ' ["scroll","click","touchstart"].forEach(function(e){' . "\n";
|
||||
echo ' document.addEventListener(e,function(){clearTimeout(t);loadUA();},{once:true,passive:true});' . "\n";
|
||||
echo ' });' . "\n";
|
||||
echo '})();' . "\n";
|
||||
echo '</script>' . "\n";
|
||||
}
|
||||
|
||||
|
||||
@@ -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'
|
||||
|
||||
60
minify-css.php
Normal file
60
minify-css.php
Normal file
@@ -0,0 +1,60 @@
|
||||
<?php
|
||||
/**
|
||||
* Simple CSS Minifier Script
|
||||
* Run from command line: php minify-css.php
|
||||
*/
|
||||
|
||||
function minify_css($css) {
|
||||
// Remove comments
|
||||
$css = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $css);
|
||||
|
||||
// Remove space after colons
|
||||
$css = str_replace(': ', ':', $css);
|
||||
|
||||
// Remove whitespace
|
||||
$css = str_replace(array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $css);
|
||||
|
||||
// Remove space before and after specific characters
|
||||
$css = preg_replace('/\s*([{};,>+~])\s*/', '$1', $css);
|
||||
|
||||
// Remove last semicolon before closing brace
|
||||
$css = str_replace(';}', '}', $css);
|
||||
|
||||
// Trim
|
||||
$css = trim($css);
|
||||
|
||||
return $css;
|
||||
}
|
||||
|
||||
$files = [
|
||||
'Assets/css/css-global-accessibility.css' => 'Assets/css/css-global-accessibility.min.css',
|
||||
'Assets/css/style.css' => 'Assets/css/style.min.css',
|
||||
];
|
||||
|
||||
$base_path = __DIR__ . '/';
|
||||
|
||||
foreach ($files as $source => $dest) {
|
||||
$source_path = $base_path . $source;
|
||||
$dest_path = $base_path . $dest;
|
||||
|
||||
if (file_exists($source_path)) {
|
||||
$css = file_get_contents($source_path);
|
||||
$minified = minify_css($css);
|
||||
|
||||
file_put_contents($dest_path, $minified);
|
||||
|
||||
$original_size = strlen($css);
|
||||
$minified_size = strlen($minified);
|
||||
$savings = $original_size - $minified_size;
|
||||
$percent = round(($savings / $original_size) * 100, 1);
|
||||
|
||||
echo "Minified: $source\n";
|
||||
echo " Original: " . number_format($original_size) . " bytes\n";
|
||||
echo " Minified: " . number_format($minified_size) . " bytes\n";
|
||||
echo " Savings: " . number_format($savings) . " bytes ($percent%)\n\n";
|
||||
} else {
|
||||
echo "File not found: $source\n";
|
||||
}
|
||||
}
|
||||
|
||||
echo "Done!\n";
|
||||
Reference in New Issue
Block a user