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-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-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'"
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user