How to defer non-critical CSS in an HTML5 page?
To effectively improve page loading performance, you need to inline the critical CSS first and load the non-critical CSS asynchronously; 1. Use tools or manually identify the critical CSS and inline it to
; 2. Use rel="preload" to combine onload, JavaScript dynamic loading or requestIdleCallback asynchronously; 3. Use media attributes to delay loading conditional styles such as print or topics; 4. Merge and compress non-critical CSS to reduce requests; you can use the media="print" technique to achieve JavaScript-free asynchronous loading, thereby significantly optimizing the first-screen rendering speed.
Deferring non-critical CSS in an HTML5 page helps improve page load performance by ensuring only the CSS needed for above-the-fold content is loaded initially. The rest—non-critical styles—are loaded later, without blocking rendering.
Here's how to do it effectively:
1. Identify Critical vs. Non-Critical CSS
Critical CSS is the minimum set of styles required to render the visible portion of your page (above the folder). Everything else is non-critical.
- Use tools like Penthouse , Critical , or online generators to extract critical CSS automatically.
- Manually review your page and isolate styles for headers, hero sections, and early-rendering components.
Once identified, inline the critical CSS directly in the :
<head>
<style>
/* Inlined critical CSS */
h1 { font-size: 2rem; color: #333; }
.hero { margin: 0; padding: 20px; }
/* ... */
</style>
</head>2. Load Non-Critical CSS Asynchronously
Standard <link rel="stylesheet"> tags block rendering. To defer non-critical CSS, load it asynchronously using JavaScript or HTML tricks.
Option A: Use rel="preload" with onload
Preload the CSS file and switch the rel to stylesheet once loaded:
<link rel="preload" href="non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript><link rel="stylesheet" href="non-critical.css"></noscript>
Include a small script to handle fallback if JavaScript is disabled:
<script>
// Optional: ensure the onload event triggers
function loadCSS(href) {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = href;
document.head.appendChild(link);
}
// Call loadCSS('non-critical.css') after page idle
</script>Option B: Dynamic Loading with JavaScript
Load non-critical CSS after the page has rendered:
<script>
window.addEventListener('load', function() {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'non-critical.css';
document.head.appendChild(link);
});
</script> Or use requestIdleCallback for even better performance:
<script>
if (window.requestIdleCallback) {
requestIdleCallback(function() {
loadCSS('non-critical.css');
});
} else {
// Fallback to load event
window.addEventListener('load', function() {
loadCSS('non-critical.css');
});
}
function loadCSS(href) {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = href;
document.head.appendChild(link);
}
</script>3. Use Media Attributes to Defer Print or Conditional Styles
Move styles that aren't needed immediately (like print or theme styles) using media attributes:
<link rel="stylesheet" href="print.css" media="print"> <link rel="stylesheet" href="dark-theme.css" media="prefers-color-scheme: dark">
These are still loaded, but with lower priority, helping reduce render-blocking impact.
4. Minify and Combine Non-Critical Files
Reduce HTTP requests by combining all non-critical CSS into a single minified file before deferring it. Tools like Webpack, Parcel, or build scripts (eg, with cssnano ) can help.
Bonus: Use media="print" Trick for Immediate Deferral
A clever trick to load CSS asynchronously without JavaScript:
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">
The browser downloads the file quickly (since print is low priority), and once loaded, onload switches it to all , applying the styles.
Basically, defer non-critical CSS by inlining what's essential and loading the rest asynchronously with preload , JavaScript, or smart media tricks. It's not hard, but it makes a real difference in perceived performance.
The above is the detailed content of How to defer non-critical CSS in an HTML5 page?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undresser.AI Undress
AI-powered app for creating realistic nude photos
ArtGPT
AI image generator for creative art from text prompts.
Stock Market GPT
AI powered investment research for smarter decisions
Hot Article
Popular tool
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
20516
7
13630
4
How to achieve smooth fade-out of page switching using CSS_Using animation mask
Apr 02, 2026 pm 07:45 PM
Transition realizes the lightest and controllable page fade-out. It needs to cooperate with the two-step control of opacity and visibility. JS listens to the transitionend and then uninstalls the component. The animation mask is prone to lag, z-index conflicts and the status is difficult to synchronize. It is only necessary in a few scenarios such as sensitive information.
How to make a simple jitter tip with CSS_using keyframes and rotation
Apr 03, 2026 pm 03:42 PM
Shake animation should use translateX() to achieve left and right displacement instead of rotate(); it needs to be combined with @keyframes to define a 0%/25%/50%/75%/100% offset sequence, and the offset is controlled within ±2px~±6px; animation-fill-m must be added ode:forwards (or use both), select cubic-bezier(.36,.07,.19,.97) for easing; the old animation must be cleared and forced to rearrange before JS is triggered; use will-change with caution on the mobile terminal, and only add translateZ(0) to ensure hardware acceleration.
How to add styles to Bootstrap switch components with CSS_Transformation through checkbox pseudo-element
Apr 03, 2026 pm 03:54 PM
The default style of the Bootstrap switch cannot be changed because it draws visual effects through pseudo elements::before/::after, which needs to cover .form-switch.form-check-input .form-check-label::before (track) and ::after (slider) and handle all states such as: checked, :disabled and :checked:disabled.
How to set a transparent frosted sidebar with CSS_using rgba color through background-filter
Apr 03, 2026 pm 03:57 PM
In Safari, the background-filter needs to be prefixed with -webkit- and the background is opaque to take effect; the blur value cannot be 0; the size of the blurred area affects performance more than the numerical value; text needs to be enhanced with contrast and strokes to ensure readability.
How to implement Bootstrap fixed header scrolling with CSS_Set the position attribute of thead
Apr 03, 2026 pm 04:00 PM
The fundamental reason is that the browser does not support the direct application of position:sticky to the thead, because the display:table of the parent container table limits the sticky behavior; the tbody must be moved into an independent scrolling container and a display:block split structure must be set up to unify the column width with colgroup to achieve a stable fixed header.
How to implement custom scroll bar styles on the mobile side with CSS_through pseudo-element webkit-scrollbar
Apr 03, 2026 pm 03:45 PM
Mobile side::-webkit-scrollbar often fails because Android WebView and Safari before iOS 16.4 do not support this pseudo element; iOS 16.4 only has limited support, and Android basically does not support it; the alternative is to disable the native scroll bar and customize it with CSS JS.
How CSS solves the absolute positioning offset bug under IE_Fixed by setting the hasLayout attribute
Apr 03, 2026 pm 03:48 PM
The essence of the inaccurate offset of position:absolute in IE6–8 is that the parent container does not trigger hasLayout, causing the absolute positioning reference to the wrong containing block; it needs to be actively triggered by reliable methods such as zoom:1, rather than relying solely on position:relative.
How to modify the Bootstrap form validation color with CSS_by overriding the pseudo-class style
Apr 03, 2026 pm 03:51 PM
The input:valid and input:invalid pseudo-classes do not take effect because the browser does not trigger native verification due to the lack of required attributes or type semantic types (such as email, url); Bootstrap's is-valid/is-invalid relies on JS rather than pseudo-classes, so you need to ensure that HTML constraints exist and CSS weight is sufficient.
