loadCSS
A JavaScript function and HTML pattern for loading CSS files asynchronously to prevent render-blocking.
What is loadCSS?
loadCSS is a JavaScript library and HTML pattern for loading CSS files asynchronously to prevent render-blocking. It provides a function to dynamically inject stylesheets and recommends a simple markup technique to improve page load performance by deferring non-critical CSS.
Frontend developers and web performance engineers who need to optimize CSS delivery and eliminate render-blocking resources.
Developers choose loadCSS for its simplicity, reliability, and focus on performance, offering a lightweight solution without polyfills or complex dependencies.
Overview
Load CSS asynchronously
Use Cases
Best For
- Deferring non-critical CSS to improve Largest Contentful Paint (LCP)
- Dynamically loading stylesheets based on user interactions or conditions
- Implementing performance best practices for CSS delivery
- Optimizing Core Web Vitals by eliminating render-blocking CSS
- Loading third-party CSS asynchronously to prevent performance penalties
- Gracefully loading CSS in older browsers without JavaScript frameworks
Not Ideal For
- Modern projects using build tools like Webpack or Vite that offer native CSS code-splitting and lazy loading without extra libraries
- Teams that prioritize dependency maintenance and security updates, as loadCSS is archived and no longer maintained
- Websites where preventing Flash of Unstyled Content (FOUC) is critical, as async CSS loading can introduce rendering delays if not carefully implemented
- Developers seeking a polyfill for the `rel=preload` attribute, since loadCSS version 3.0 removed this support in favor of a simpler HTML pattern
Pros & Cons
Pros
The README recommends a lightweight <link> with media='print' and onload attribute, which is easy to implement and improves performance without JavaScript, as detailed in the Filament Group article.
Works in all JavaScript-capable browsers with graceful degradation in older ones like IE8, ensuring broad compatibility without complex polyfills.
Provides a straightforward loadCSS() function for dynamic stylesheet injection, with optional callbacks via onloadCSS() for execution after loading.
Prioritizes non-blocking CSS loading to improve perceived performance and Core Web Vitals, favoring utilitarian solutions over bloat.
Cons
The project is no longer updated, so it won't receive bug fixes, security patches, or compatibility updates for new browsers or standards.
Only handles CSS file loading, lacking features for other assets or modern techniques like module preloading, which might necessitate additional tools.
Version 3.0 dropped support for the preload polyfill, which can break existing setups and requires migration to the new HTML pattern, as noted in the README.
Async loading can cause Flash of Unstyled Content if critical styles are deferred, requiring careful planning and testing to avoid user experience issues.
Frequently Asked Questions
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.