Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
How to load CSS files asynchronously in WordPress (using Scott Jehl's "loadCSS")
<?php
// This is the cleaner code per request of a thread in the LinkedIn group "WordPress"
// ...
// register and enqueue loadCSS
function load_scripts_and_styles() {
// register loadCSS
wp_register_script( 'load-css-async', get_stylesheet_directory_uri() . '/path/to/js/loadCSS.js', array(), '', false );
// enqueue loadCSS
wp_enqueue_script( 'load-css-async' );
}
add_action('wp_enqueue_scripts', 'load_scripts_and_styles', 999);
// ...
?>
// This is the cleaner code per request of a thread in the LinkedIn group "WordPress"
// this is a modified file for demonstration purposes
// original repository https://github.com/filamentgroup/loadCSS/
/*!
loadCSS: load a CSS file asynchronously.
[c]2014 @scottjehl, Filament Group, Inc.
Licensed MIT
*/
function loadCSS( href, before, media ){
"use strict";
var ss = window.document.createElement( "link" );
var ref = before || window.document.getElementsByTagName( "script" )[ 0 ];
ss.rel = "stylesheet";
ss.href = href;
ss.media = "only x";
ref.parentNode.insertBefore( ss, ref );
setTimeout( function(){
ss.media = media || "all";
} );
return ss;
}
// here's where you specify the CSS files to be loaded asynchronously
// load Google Web Font
loadCSS( "http://fonts.googleapis.com/css?family=Lato|Open+Sans" );
// load Font Awesome from CDN
loadCSS( "//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" );
// load a local CSS file
loadCSS( "http://yourserver.tld/path/to/your/css/file.css" );
@Nadareh
Copy link

Nadareh commented Oct 5, 2017

Hi there,

This is really great! It help me a lot. I was just thinking if there's a way to do this on mobile? I was able to rank up the score to 95/100 on Desktop but the mobile is still score is still very low.

Thanks!

@minabm
Copy link

minabm commented Jul 17, 2021

Hello,
Sorry I'm a beginner :)
are these functions safe to use? doesn't it have any security issue or web browser support problem?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment