I've got a weird issue. I'm trying to get as much as possible from my WordPress theme & google speed insight. Yet all of my JS scripts are being mentioned as the one which block rendering the page. This is the way i call scripts via functions.php
function custom_styles() {
wp_register_style( 'bootstrap',get_stylesheet_directory_uri().'/css/bootstrap.min.css', false, false );
wp_enqueue_style( 'bootstrap' );
wp_register_style( 'bootstraptheme',get_stylesheet_directory_uri().'/css/bootstrap-theme.min.css', false, false );
wp_enqueue_style( 'bootstraptheme' );
wp_register_style( 'fontawesome',get_stylesheet_directory_uri().'/css/font-awesome.min.css', false, false );
wp_enqueue_style( 'fontawesome' );
wp_register_style( 'defaultstyle',get_stylesheet_directory_uri().'/css/default/style.css', false, false );
wp_enqueue_style( 'defaultstyle' );
wp_register_style( 'responsivestyle',get_stylesheet_directory_uri().'/css/responsive/responsive.css', false, false );
wp_enqueue_style( 'responsivestyle' );
wp_register_style( 'languages',get_stylesheet_directory_uri().'/css/languages.min.css', false, false );
wp_enqueue_style( 'languages' );
wp_register_style( 'flags',get_stylesheet_directory_uri().'/css/flags.min.css', false, false );
wp_enqueue_style( 'flags' );
wp_register_style( 'owlcarousel',get_stylesheet_directory_uri().'/css/owl.carousel.min.css', false, false );
wp_enqueue_style( 'owlcarousel' );
wp_register_style( 'owltheme',get_stylesheet_directory_uri().'/css/owl.theme.min.css', false, false );
wp_enqueue_style( 'owltheme' );
wp_register_style( 'flexslider',get_stylesheet_directory_uri().'/vendors/flexslider/flexslider.css', false, false );
wp_enqueue_style( 'flexslider' );
wp_register_style( 'datepicker',get_stylesheet_directory_uri().'/vendors/bootstrap-datepicker/css/datepicker3.css', false, false );
wp_enqueue_style( 'datepicker' );
wp_register_style( 'settings',get_stylesheet_directory_uri().'/vendors/rs-plugin/css/settings.css', false, false );
wp_enqueue_style( 'settings' );
}
add_action( 'wp_enqueue_scripts', 'custom_styles' );
function pr_scripts_styles() {
if( !is_admin()){
wp_deregister_script('jquery');
wp_register_script('jquery',get_stylesheet_directory_uri().'/js/jquery.min.js', false);
wp_enqueue_script('jquery');
}
wp_deregister_script('twitter-indent', '//platform.twitter.com/widgets.js');
/* REGISTER ALL JS FOR SITE */
wp_register_script('vps_bootstrap',get_stylesheet_directory_uri().'/js/bootstrap.min.js');
wp_register_script('vps_cycle',get_stylesheet_directory_uri().'/js/jquery.cycle.all.min.js');
wp_register_script('vps_owl',get_stylesheet_directory_uri().'/js/owl.carousel.min.js');
wp_register_script('vps_counterup',get_stylesheet_directory_uri().'/vendors/counterup/jquery.counterup.min.js');
wp_register_script('vps_theme',get_stylesheet_directory_uri().'/js/theme.js');
wp_register_script('vps_waypoints',get_stylesheet_directory_uri().'/vendors/waypoints/waypoints.min.js');
wp_register_script('vps_datepicker',get_stylesheet_directory_uri().'/vendors/bootstrap-datepicker/js/bootstrap-datepicker.js');
wp_register_script('vps_flexslider',get_stylesheet_directory_uri().'/js/jquery.flexslider-min.js');
wp_register_script('vps_themepunch1',get_stylesheet_directory_uri().'/vendors/rs-plugin/js/jquery.themepunch.tools.min.js');
wp_register_script('vps_themepunch2',get_stylesheet_directory_uri().'/vendors/rs-plugin/js/jquery.themepunch.revolution.min.js');
wp_register_script('vps_revs',get_stylesheet_directory_uri().'/js/revs.js');
wp_register_script('google-map-api',get_stylesheet_directory_uri().'/js/gmaps-api.min.js');
wp_register_script('vps_gmap',get_stylesheet_directory_uri().'/js/google-map.js');
/* CALL ALL JS AND SCRIPTS FOR SITE */
wp_enqueue_script('vps_bootstrap');
wp_enqueue_script('vps_cycle');
wp_enqueue_script('vps_owl');
wp_enqueue_script('vps_counterup');
wp_enqueue_script('vps_waypoints');
wp_enqueue_script('vps_datepicker');
wp_enqueue_script('vps_flexslider');
wp_enqueue_script('vps_themepunch1');
wp_enqueue_script('vps_themepunch2');
wp_enqueue_script('vps_revs');
wp_enqueue_script('google-map-api');
wp_enqueue_script('vps_gmap');
wp_enqueue_script('vps_theme');
}
add_action( 'wp_enqueue_scripts', 'pr_scripts_styles' );
What's wrong with this approach? I thought its ok and done according to best practices. ANd yet = the page is mentioned as slow.. thanks!
Just a note, you don't need to wp_register_script and wp_enqueue_script unless you're purposely only enqueueing scripts under certain conditions, otherwise you can replace
wp_register_style( 'bootstrap',get_stylesheet_directory_uri().'/css/bootstrap.min.css', false, false );
wp_enqueue_style( 'bootstrap' );
wp_register_style( 'fontawesome',get_stylesheet_directory_uri().'/css/font-awesome.min.css', false, false );
wp_enqueue_style( 'fontawesome' );
with just:
wp_enqueue_style( 'bootstrap',get_stylesheet_directory_uri().'/css/bootstrap.min.css', false, false );
wp_enqueue_style( 'fontawesome',get_stylesheet_directory_uri().'/css/font-awesome.min.css', false, false );
Also, a personal preference of mine is that if I need to call a function multiple times, I like to define it as a variable, so it's not constantly being invoked, such as:
$stylesheet_directory_uri = get_stylesheet_directory_uri();
wp_enqueue_style( 'bootstrap', $stylesheet_directory_uri.'/css/bootstrap.min.css', false, false );
wp_enqueue_style( 'fontawesome', $stylesheet_directory_uri.'/css/font-awesome.min.css', false, false );
Lastly, since you have sooo many, you may consider just looping through them to make it a bit easier at a glance:
function custom_styles(){
$uri = get_stylesheet_directory_uri();
$stylesheets = array(
array( 'bootstrap', '/css/bootstrap.min.css' ),
array( 'fontawesome', '/css/font-awesome.min.css' ),
// …
array( 'settings', '/vendors/rs-plugin/css/settings.css' )
);
foreach( $stylesheets as $stylesheet ){
wp_enqueue_style( $stylesheet[0], $uri.$stylesheet[1] );
}
}
Now to the source of your issue - you have so many stylesheets. For each one, your site needs to make an HTTP request to the requested resource and load it. Since you're already baking the CSS into your theme (be careful with this, it makes adjusting to future versions of libraries more difficult), you could just combine them all into a single minified CSS file manually or with a preprocessor.
You could also look at plugins like Autoptimize that will combine and cache all your stylesheets for you. What it will do is fetch all the content of them and combine them into as few .css files as it can, typically between 1 and 3, depending on the plugins you have installed.
Now, you also mention render-blocking. The "super ideal" way to load CSS is to only load the CSS that's necessary for content that's visible above the fold when the page loads, and load the rest later. In practice this is more difficult, especially for WordPress sites with so many plugins.
I'd start with weighing whether you really need all those CSS libraries, and then combining and caching them.