Converts render-blocking CSS and JS files into NON-render-blocking

I just want to share with most of those people that stress over the google pagespeed score and the issue they having with the “render-blocking CSS and JS files” i’m using a awesome plugin that stop this issue and i’ll like to recommend this plugin because it works great and stop that issue with render-blocking CSS and JS files.

The plugin name is “Async JS and CSS” by the author elCHAVALdelaWEB

You can download this plugin via the wordpress website @ this url

http://wordpress.org/plugins/async-js-and-css/

Also i have another awesome plugin i used as well that removed “Leverage browser caching”

You can find that plugin also via wordpress website @ the url http://wordpress.org/plugins/leverage-browser-caching-ninjas/

I’m just trying to past on my tips that works great for my self and make my site fast etc..i have more but not sure if every one will want to hear about them…:)

Good tips – I’ll try these out once I’m back up to speed 🙂

Can you sticky my topic please so i can keep adding more tips

To not break any slide are the menu on mobile please add these files in the
Exceptions (files to ignore and load in render-blocking way) box to the bottom

jquery.min.js
external.min.js
site.min.js
js_composer_front.js

these files can’t be loaded in render-blocking are the sliders on ur site will not work also the mobile slide menu..

Here is another awesome plugin that every one should have install it’s called “Query Strings Remover” i’m using it as well and it works great.

What this plugin do is remove the query strings from your static resources like CSS and JavaScript files to help improve your cache performance and overall score in Google PageSpeed, YSlow, Pingdom and GTmetrix.

The plugin name is “Query Strings Remover” by the author Atul Kumar Pandey

You can download this plugin via the wordpress website @ this url

https://wordpress.org/plugins/query-strings-remover/

Hi, Steven
you can actually add query strings remover code to your functions.php file, which many of us do. For those who don’t want to edit their functions file over and over the plugin is a great alternative 🙂

I know that but this theme get a lot of updates and keep going back editing a file all the time is work and time..that’s why i share the plugin where make it easy for those that don’t want keep playin with codes…

Steven,

Great Job getting the information out. I, too, love Async JS and CSS (note: use the default CSS inline and hack away at style.css).

A combination of that tool, removing td speed booster, and Google PSS helped me score a 100 Page Speed Insights on my homepage! http://www.popworkouts.com

Speed Booster Pack

This plugin is a all in one that will give you that 95% score on Google PageSpeed, YSlow, Pingdom and GTmetrix.

The plugin comes with some great features like:

1. Moves scripts to the footer to improve page loading speed.

2. Loads javascript files from Google Libraries rather than serving them from your WordPress install directly, to reduce latency, increase parallelism and improve caching.

3. Defers parsing of javascript files to reduce the initial load time of your page.

4.Removes query strings from static resources to improve your speed scores.

5. Removes extra Font Awesome stylesheets added to your theme by certain plugins, if Font Awesome is already used in your theme.

6. Removes junk header tags to clean up your WordPress Header.

I’m using this plugin as well and it really help removed the rest of those files in render-blocking CSS and JS files.

With this plugin you will not need the other plugin ““Query Strings Remover”…

The plugin name is “Speed Booster Pack” by the author tiguan

You can download this plugin via the wordpress website @ this url

http://wordpress.org/plugins/speed-booster-pack/

Speed Booster Pack – Documentation

http://tiguandesign.com/docs/speed-booster/

hi,

thanks for sharing this

Thanks for you message.
Radu A.

@Radu A ur welcome

Thx, but it’s incompatible with responsive lightbox.
I tried add CSS and JS by lightbox into “Async JS and CSS” exceptions list, but it still not working.
Do I miss something?

The files I added to exceptions list are
jquery.prettyPhoto.js
front.js
prettyPhoto.css

@enterpr1se take those files you have out and add what i posted below…

jquery.min.js
external.min.js
site.min.js

Talking about “Async JS and CSS”:
Which exceptions are needed to get the mega menu sliders and ajax working properly?

Hi Steven, could you please share which plugins you finally ended up using with which settings? thx

Hi @Manuel the best plugin right now is “Speed Booster” the owner done some awesome updates today and made the plugin more powerfull so i’m only using that one along side the “Leverage Browser Caching plugin”.

@thomaspe i recommend you to use the “Speed Booster” plugin as well which work very well with the theme.

Speed Booster

Main Plugin Features

Eliminates external render-blocking javascript and css in above-the-fold content.

Moves scripts to the footer to improve page loading speed.

Loads CSS asynchronously to render your page more quickly and get a higher score on the major speed testing services.

Minify and inline all CSS styles and move them to the footer to eliminate external render-blocking CSS and optimize CSS delivery.

Lazy loads images to improve page load times and save bandwidth.

Changes image compression level to keep file sizes smaller.

Loads javascript files from Google Libraries rather than serving them from your WordPress install directly, to reduce latency, increase parallelism and improve caching.

Defers parsing of javascript files to reduce the initial load time of your page.

Removes query strings from static resources to improve your speed scores.

Removes extra Font Awesome stylesheets added to your theme by certain plugins, if Font Awesome is already used in your theme.

Removes junk header tags to clean up your WordPress Header.

Displays page loading time in the plugin options page.

Displays the number of executed queries in the plugin options page.

Displays the Peak Memory Used in the plugin options page.

Speed Booster didnt play well with my child-theme. Unfortunately.
It always displays the blueish original layout.

• This reply was modified 12 years by thomaspe.

@Steven with “speed booster” you mean “speed booster pack” (https://wordpress.org/plugins/speed-booster-pack/) by tiguan?

You deactivated tagDiv speed booster?

And which settings did you activate?

• This reply was modified 12 years by Manuel Fink.

@Manuel Fink yes that speed booster and no i’m using tagDiv speed booster as well because it work along side with the other plugin…

Are you using any plugin for minification?
Are you using any plugin for compression?

NO,Cloudflare does that for me so i don’t need plugin also that speedboost have a opition to help you with minification ur css files..

SPEEDBOOSTER >>>>Minify and inline all CSS styles and move them to the footer to eliminate external render-blocking CSS and optimize CSS delivery.

@thomaspe i run in to a problem like that as well so i did not choose…

1. Moves scripts to the footer to improve page loading speed.

Because the speedbooster that comes with the theme already does that for us…just play with the settings and what work keep on and what not work keep off.

@Manuel Fink my settings as follow..

1.Loads javascript files from Google Libraries

2.Defers parsing of javascript files.

3.Removes query strings from static resources

4.Load CSS asynchronously

5.Minify all CSS styles

6.Insert all CSS styles inline to the footer

Remove junk header tags

I’ve choose all of them…

ok, my staging is now running on the same setting, and I got worse results than before.
It seems to me that the plugins and this config helps on desktop however mobile results good much worse. My problem with: 65% mobile visitors
Shared my results in the pagespeed thread.

Are you using mod_pagespeed or any serverside settings?

• This reply was modified 12 years by Manuel Fink.

Give it time like 24hrs ..also did you cache ur site after installing the plugin..