perf: Defer fonts.css and variables.css, inline critical CSS
- Add @font-face declarations to critical-bootstrap.css inline - Add critical CSS variables (colors, fonts) inline - Defer fonts.css (utilities only, @font-face inline) - Defer variables.css (critical vars inline) Now only style.css is render-blocking (~19KB) All other CSS deferred with media=print + onload 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -14,6 +14,60 @@
|
||||
* @see Shared/Infrastructure/Services/CriticalBootstrapService.php
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
CRITICAL FONTS (Poppins - LCP optimization)
|
||||
========================================================================== */
|
||||
@font-face {
|
||||
font-family: 'Poppins Fallback';
|
||||
src: local('Arial'), local('Helvetica Neue'), local('sans-serif');
|
||||
size-adjust: 106%;
|
||||
ascent-override: 105%;
|
||||
descent-override: 35%;
|
||||
line-gap-override: 10%;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Poppins';
|
||||
src: url('/wp-content/themes/roi-theme/Assets/fonts/poppins-v24-latin-regular.woff2') format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Poppins';
|
||||
src: url('/wp-content/themes/roi-theme/Assets/fonts/poppins-v24-latin-600.woff2') format('woff2');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Poppins';
|
||||
src: url('/wp-content/themes/roi-theme/Assets/fonts/poppins-v24-latin-700.woff2') format('woff2');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
:root {
|
||||
/* Fonts */
|
||||
--font-primary: 'Poppins', 'Poppins Fallback', sans-serif;
|
||||
--bs-body-font-family: 'Poppins', 'Poppins Fallback', sans-serif;
|
||||
|
||||
/* Theme Colors (críticos para above-the-fold) */
|
||||
--color-navy-dark: #0E2337;
|
||||
--color-navy-medium: #1e3a5f;
|
||||
--color-orange-primary: #FF8600;
|
||||
--color-orange-hover: #e67a00;
|
||||
--bs-primary: #0d6efd;
|
||||
--bs-white: #fff;
|
||||
--bs-body-color: #212529;
|
||||
--bs-body-bg: #fff;
|
||||
--bs-link-color: #0d6efd;
|
||||
--bs-link-hover-color: #0a58ca;
|
||||
|
||||
/* Spacing */
|
||||
--bs-gutter-x: 1.5rem;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
BOX SIZING & RESETS (Bootstrap Reboot crítico)
|
||||
========================================================================== */
|
||||
|
||||
Reference in New Issue
Block a user