Eliminate Render-blocking Javascript and CSS WordPress – Possibly all the users of WordPress face this dangerous looking warning in Google PageSpeed Insights. As Google has not developed WordPress or possibly do not use WordPress, they unfortunately has set some rules which have to follow. We have nothing to do but solve this issue. It does not mean that Google has set a wrong rule. But it means that, it is not easy to do by an average user, which Google has not considered. This Eliminate Render-blocking Javascript and CSS warning is normal and comes as default with WordPress and almost all Content Management System. Run the test for `wordpress.org’ and you will also get the same error – Eliminate Render-blocking Javascript and CSS. As WordPress and Google do not need hundreds of Social Media buttons, for WordPress dot org, the score hits towards 90/100, we score around 84/100.
Update on 14th Oct, 2016.
Quick info on Eliminate Render-blocking Javascript and CSS For WordPress:
This is non-blocking way for individual CSS :
1 | <link rel="stylesheet" href="https://cdn.domain.com/my.css" media="none" onload="if(media!='all')media='all'"> |
Why, that is explained in How to Load CSS Without Blocking Rendering.
This is non-blocking way for individual Js :
1 | <script type='text/javascript' src='https://cdn.domain.com/my.js' async defer>execOnReady(function(){execOnReady(function(){});});</script> |
Eliminate Render-blocking Javascript and CSS WordPress : The Pathophysiology of the Errors
Eliminate Render-blocking Javascript and CSS can be of two types, at least for WordPress :
- The verbatim language – Eliminate Render-blocking Javascript and CSS… ; which means the source is Internal or from your own domain.
- With External word added – Eliminate External Render-blocking Javascript and CSS…; which means the source is External or from other domain like social network.
You must know what is WP Enqueue Script For WordPress Themes. With that, you must have idea about wp deregister script function :
1 | http://codex.wordpress.org/Function_Reference/wp_deregister_script |
Unfortunately, unlike wp_Enqueue function, wp deregister script has limitations – you practically can not deregister all the things you want. The reason is basically limited parameters versus wp_Enqueue function.
---
As basically the CSS file(s) and Javascript file(s) are usually added in the header with link rel, instead of naked inserting the CSS and Javascripts (check any webpage of Google and also Bloggers Blog), this files actually defers the website to be visible to human. In other words, you have to remove this automated insertion and put them manually using the above described functions.
Eliminate Render-blocking Javascript and CSS WordPress : Wow, Fix it Then
It is practically very very difficult. First, the usual way we do for Page Speed Optimization is using W3 Total Cache or WP Super Cache Plugin (with WP Minify or some other Plugin). W3 Total Cache, currently is superior but unfortunately, W3 Total Cache d not support wp deregister script at the time of writing. In other words – do not use the minify function of W3 Total Cache as a first step.
So, you got lot of separate non-minified files at the frontend now. For CSS files :
- Take all the CSS files
- Combine them manually
- Minify them manually (there are online free tools)
- Deregister all the plugin generated CSS output from functions.php file of your Theme / Child Theme
- Add the whole thing within style markup in this way –
You can use any Plugin or your Theme’s function to insert code to do this.
Regarding Javascripts, thankfully, for jQuery there are enqueue function to put the scripts at footer and defer them. Unfortunately, defering or loading at footer can become unacceptable for certain web design. Code goes here :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | /** * Deregister is limited in function arguments, plugin-name is the name with which the plugin or theme is registered */ add_action( 'wp_print_styles', 'my_deregister_styles', 100 ); function my_deregister_styles() { wp_deregister_style( 'plugin-name' ); wp_deregister_style( 'my-theme-css' ); } /** * Register new JavaScript file. * @see WP_Dependencies::add() For parameter information. */ function wp_register_script( $handle, $src, $deps = array(), $ver = false, $in_footer = false ) { global $wp_scripts; if ( !is_a($wp_scripts, 'WP_Scripts') ) $wp_scripts = new WP_Scripts(); $wp_scripts->add( $handle, $src, $deps, $ver ); if ( $in_footer ) $wp_scripts->add_data( $handle, 'group', 1 ); } /** * Enqueues script. * Registers the script if source is provided and enqueues. */ function wp_enqueue_script( $handle, $src = false, $deps = array(), $ver = false, $in_footer = false ) { global $wp_scripts; if ( !is_a($wp_scripts, 'WP_Scripts') ) $wp_scripts = new WP_Scripts(); if ( $src ) { $_handle = explode('?', $handle); $wp_scripts->add( $_handle[0], $src, $deps, $ver ); if ( $in_footer ) $wp_scripts->add_data( $_handle[0], 'group', 1 ); } $wp_scripts->enqueue( $handle ); } /** * Just an Example */ if (function_exists('load_my_scripts')) { function load_my_scripts() { if (!is_admin()) { wp_deregister_script( 'jquery' ); wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'); wp_enqueue_script('jquery'); wp_register_script('myscript', bloginfo('template_url').'/js/myScript.js'__FILE__), array('jquery'), '1.0', true ); wp_enqueue_script('myscript'); } } } add_action('init', 'load_my_scripts'); /** * Just an Example, put in to footer with relative path: */ wp_enqueue_script('jquery','https://thecustomizewindows.cachefly.net/wp-includes/js/jquery/jquery.js','','',true); |
Obviously, you will put all these on a CDN and serve them. Yes, it was great if there were some sort of Plugin, but unfortunately there is no fool-proof plugin exists. You will get better score on the webpages where there is no social networking buttons. Embedding Stylesheet within the webpage has advantages which we wrote in our guide To Have a Faster WordPress Get a Faster Database. There is a phenomenon named Flash of Unstyled Content “ hitting the browser back button makes the page to load without the stylesheet. We know because we are using Internet for commercial purpose before WordPress and Google arrived. This is why we said “It does not mean that Google has set a wrong rule” at the beginning.
Another way will be to make the website to flat HTML and do the works. That turns using WordPress meaningless.
Updated on 10th April, 2014 : Also Read About Defer Parsing Javascript Method.
