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:
@@ -709,3 +709,68 @@ button:focus:not(:focus-visible) {
|
|||||||
.d-md-block { display: block !important; }
|
.d-md-block { display: block !important; }
|
||||||
.d-md-none { display: none !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; }
|
||||||
|
}
|
||||||
|
|||||||
@@ -29,6 +29,7 @@ define('ROI_DEFERRED_CSS', [
|
|||||||
'roi-fonts', // @font-face inline en critical-bootstrap.css
|
'roi-fonts', // @font-face inline en critical-bootstrap.css
|
||||||
'roi-bootstrap', // Critical inline via CriticalBootstrapService
|
'roi-bootstrap', // Critical inline via CriticalBootstrapService
|
||||||
'roi-variables', // Variables ahora inline en critical CSS
|
'roi-variables', // Variables ahora inline en critical CSS
|
||||||
|
'roi-main-style', // Critical base inline via CriticalBootstrapService
|
||||||
// Componentes específicos (below the fold)
|
// Componentes específicos (below the fold)
|
||||||
'roi-badges',
|
'roi-badges',
|
||||||
'roi-pagination',
|
'roi-pagination',
|
||||||
@@ -178,8 +179,8 @@ function roi_enqueue_main_stylesheet() {
|
|||||||
'roi-main-style',
|
'roi-main-style',
|
||||||
get_template_directory_uri() . '/Assets/css/style.css',
|
get_template_directory_uri() . '/Assets/css/style.css',
|
||||||
array('roi-variables'),
|
array('roi-variables'),
|
||||||
'1.0.5', // Arquitectura: Separación de responsabilidades CSS
|
'1.0.6', // DIFERIDO - critical base inline via CriticalBootstrapService
|
||||||
'all'
|
'print' // DIFERIDO - media='print' → onload="this.media='all'"
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user