Here is how you may want to tune up your WordPress website performance i.e. how much time it takes to download your website from server to your visitors’ computer, mobile or tablet.
In era of responsive design we tend to embed more than one Javascript or CSS files such as bootstrap css & js file bundles.
And if you have integrated third party advertising in your website then vendor like Google they add their own javascript file through their AdSense ad code that you can’t control.
But here is simple way out of this problem.
Important Note: Compressing, Minifying or Deferring Files may have adverse effect on functionality of website because of dependencies so first do following steps on your local server if everything looks to be working fine then you can update same files on Live servers. Just for safety & security purposes.
Here is example:
When you ‘Analyse’ your website on Google PageSpeed you get warning something like this:
Your page has 4 blocking script resources and 8 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
Solution 01: Safest way of Deferring JavaScript ‘JS’ would be like following
Step 01: Just add word ‘async’ at closing tag called ‘</script>’, So your code would not block loading any of other resources.
Step 02: Add same line of code just before closing of footer tag so your code already asynchronous (async) after moving same code to footer it will load at completion of loading of website.
//So it will look something like this: <script type='text/javascript' src='<?php echo get_template_directory_uri(); ?>/js/file-name.js' async></script> </body>
Solution 02: Add following code to your WordPress Theme’s functions.php file.
// Adapted from https://gist.github.com/toscho/1584783 add_filter( 'clean_url', function( $url ) { if ( FALSE === strpos( $url, '.js' ) ) { return $url; } return "$url' defer='defer"; }, 11, 1 );
Note: So by using above code we use ‘WP Deferred Javascripts’ which defer the loading of all Javascripts added with wp_enqueue_scripts, using LABJS (an asynchronous javascript library). It seems after discussing this code with other WordPress experts I found out that adding this code may create WordPress Core security issues. So using Solution 01 would be best answer.
Now check & analyse your website with PageSpeed .js error should have been resolved now.
Now problem remains for your root CSS files.
Note: You will not able to solve this error for externals css files which third party & from external source which can not be controlled by you e.g. AdSense Ads related css files or WordPress Jetpack css files
So Solution is: you should minify or compress your WordPress Theme’s all CSS files removing extra spaces, line breaks, comments etc.
So how to do that?
Step 01: Backup your website & server
Step 02: Navigate to this website of CSSCompressor
Step 03: Copy pasting your original css source code in text field
Step 04: Tweaking settings to your test & then press compress button to get expected result of compresses i.e. minified css
Step 05: Now replace your original root css file’s code with this output
Step 06: Now save your root css fileStep 07: You can move your css file’s link from header to footer just above ending body code like below:
//So it will look something like this: <link rel='stylesheet' id='icons-css' href='<?php echo get_template_directory_uri(); ?>/css/font-awesome.min.css' type='text/css' media='all' /> </body>
Step 08: Check all of your website to see it is working as expected.
Now check & analyse your website with PageSpeed .css error should have been resolved now.
Hope it helps,
Thanks & Regards
Mandar Apte
Dear Mandar,
when I use your code, I got this error:
Parse error: syntax error, unexpected ‘(‘ in
What can be?
Please advise.
Have a great day.
You should not get any error while deploying the code,
Just copy paste code as it is in your functions.php & it should work.
It may be any other plugin that you are using that may be causing the problem.
Hi, Thank you for your nice post, But how can I use for increasing wp admin area page speed.
My site frond Google insight speed 89/100 for desktop, but ………/wp-admin speed 50/100, it loads very slow.
And When I test ………/wp-admin url I see 10 js and 8 css files for render blocking , so how can I remove those query string for admin area?
So please advise me.
rather than minimizing files , use cloudflare. it already minifies them
but the issue with css files still remains of block rendering
Hello Mandar, thank you for your clear and concise article,just like your website design. When i paste this code to my functions.php file where exactly do I paste it? Anywhere? Or at the end?
It can be added anywhere but I will choose it to add it at the end
I think for me worked… So.. Thank you! 🙂