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
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
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)
How to change the list style in CSS
Aug 17, 2025 am 10:04 AM
To change the CSS list style, first use list-style-type to change the bullet or numbering style. 1. Use list-style-type to set the bullet of ul to disc, circle or square, and the number of ol is decimal, lower-alpha, upper-alpha, lower-roman or upper-roman. 2. Remove the tag completely with list-style:none. 3. Use list-style-image:url('bullet.png') to replace it with a custom image. 4. Use list-style-position:in
How to use CSS gradients for backgrounds
Aug 17, 2025 am 08:39 AM
CSSgradientsprovidesmoothcolortransitionswithoutimages.1.Lineargradientstransitioncolorsalongastraightlineusingdirectionsliketobottomorangleslike45deg,andsupportmultiplecolorstopsforcomplexeffects.2.Radialgradientsradiatefromacentralpointusingcircleo
What is a definition list in HTML5?
Aug 20, 2025 pm 02:01 PM
AdefinitionlistinHTML5iscreatedusingtheelementtogroupterms()withtheirdefinitions(),allowingmultipletermstoshareadefinitionoratermtohavemultipledefinitions,makingitidealforFAQs,glossaries,metadata,andcontactdetailswhileimprovingaccessibilityandSEOthro
How to create a glassmorphism effect with CSS
Aug 22, 2025 am 07:54 AM
To create a glass mimicry effect of CSS, you need to use backdrop-filter to achieve background blur, set a translucent background such as rgba(255,255,255,0.1), add subtle borders and shadows to enhance the sense of hierarchy, and ensure that there is enough visual content behind the elements; 1. Use backdrop-filter:blur(10px) to blur the background content; 2. Use rgba or hsla to define the transparent background to control the degree of transparency; 3. Add 1pxsolidrgba(255,255,255,0.3) borders and box-shadow to enhance the three-dimensionality; 4. Ensure that the container has rich backgrounds such as pictures or textures to present a blurred penetration effect; 5. It is compatible with old browsers
How to add a box shadow in CSS
Aug 18, 2025 am 11:39 AM
To add box shadows, use box-shadow attribute; 1. The basic syntax is box-shadow: horizontal offset vertical offset blur radius expansion radius shadows in color; 2. The first three values are required, the rest are optional; 3. Use rgba() or hsla() to achieve transparent effect; 4. The positive expansion radius expands shadows and the negative value is reduced; 5. Multiple shadows can be added by commas separation; 6. Overuse should be avoided to ensure that visibility is tested on different backgrounds; this attribute is well supported by the browser, and reasonable use can improve the design texture.
How to create a custom scrollbar with CSS
Aug 18, 2025 am 06:08 AM
Yes, you can create custom scrollbars through WebKit pseudo-elements, which mainly support Chrome, Edge and Safari. Firefox requires scrollbar-width and scrollbar-color attributes. Old browsers such as IE do not support them and need to rely on the default style. Developers can define scrollbar width, track background and slider style through pseudo-elements such as::-webkit-scrollbar, ::-webkit-scrollbar-track and ::-webkit-scrollbar-thumb, etc., and define the scope of action with class selectors. At the same time, set scrollbar-col for Firefox.
How to use grid-template-areas in CSS
Aug 22, 2025 am 07:56 AM
Thegrid-template-areaspropertyallowsdeveloperstocreateintuitive,readablelayoutsbydefiningnamedgridareas;eachstringrepresentsarowandeachwordacolumncell,withgrid-areanamesonchildelementsmatchingthoseinthetemplate,suchas"headerheaderheader"for
How to implement a dark mode theme with CSS
Aug 22, 2025 am 09:55 AM
There are two main ways to implement dark mode: one is to use prefers-color-scheme media to query automatically to adapt system preferences, and the other is to add manual switching function through JavaScript. 1. Use prefers-color-scheme to automatically apply dark themes according to the user system. There is no need for JavaScript, just define the styles in the media query; 2. To achieve manual switching, you need to define light-theme and dark-themeCSS classes, add toggle buttons, and use JavaScript to manage the theme status and localStorage to save user preferences; 3. You can combine both to read localSt first when the page is loaded.
