perf: defer style.css - eliminate last render-blocking CSS

- Add site structure, accessibility, typography to critical-bootstrap.css
- Defer roi-main-style (style.css) with media='print'
- Goal: 0 blocking CSS files (was 1 file, 19KB)

🤖 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 12:19:26 -06:00
parent b4071bf598
commit 9afdd6ee1d
2 changed files with 68 additions and 2 deletions

View File

@@ -709,3 +709,68 @@ button:focus:not(:focus-visible) {
.d-md-block { display: block !important; }
.d-md-none { display: none !important; }
}
/* ==========================================================================
SITE STRUCTURE (Layout crítico)
========================================================================== */
.site {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-main {
flex-grow: 1;
}
/* ==========================================================================
ACCESSIBILITY (Critical - above-the-fold)
========================================================================== */
.screen-reader-text {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
white-space: nowrap;
}
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000;
color: #fff;
padding: 0.5rem 1rem;
z-index: 100000;
text-decoration: none;
}
.skip-link:focus {
top: 0;
}
/* ==========================================================================
TYPOGRAPHY BASE (Critical)
========================================================================== */
p {
margin-top: 0;
margin-bottom: 1rem;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 0.5rem;
font-weight: 500;
line-height: 1.2;
}
h1 { font-size: calc(1.375rem + 1.5vw); }
h2 { font-size: calc(1.325rem + 0.9vw); }
h3 { font-size: calc(1.3rem + 0.6vw); }
h4 { font-size: calc(1.275rem + 0.3vw); }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }
@media (min-width: 1200px) {
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
}

View File

@@ -29,6 +29,7 @@ define('ROI_DEFERRED_CSS', [
'roi-fonts', // @font-face inline en critical-bootstrap.css
'roi-bootstrap', // Critical inline via CriticalBootstrapService
'roi-variables', // Variables ahora inline en critical CSS
'roi-main-style', // Critical base inline via CriticalBootstrapService
// Componentes específicos (below the fold)
'roi-badges',
'roi-pagination',
@@ -178,8 +179,8 @@ function roi_enqueue_main_stylesheet() {
'roi-main-style',
get_template_directory_uri() . '/Assets/css/style.css',
array('roi-variables'),
'1.0.5', // Arquitectura: Separación de responsabilidades CSS
'all'
'1.0.6', // DIFERIDO - critical base inline via CriticalBootstrapService
'print' // DIFERIDO - media='print' → onload="this.media='all'"
);
}