How to eliminate render-blocking javascript and CSS in above-the-fold content in wordpress - wordpress

Question

How toeliminate render-blocking javascript and CSS in above-the-fold content in wordpress. If any one can please help me.

Answer 1

Looks like there is a wordpress plugin called autoptimize that will do a lot of the work for you. I believe it also enables compression. Once you install the plugin, navigate to settings => autoptimize and check optimize CSS code as well as optimize JavaScript code.

Answer 2

I woudn't use a plugin.
First of all merge CSS files into one file.
Next use https://jonassebastianohlsson.com/criticalpathcssgenerator/ .
You'll get some css code - insert it inline in header.
Then you can load rest of the CSS via JS ( https://github.com/filamentgroup/loadCSS ).

Answer 3

Many ways. The ways to pass over 85/100 are -
You can use Pagespeed module
Use a third party service to deliver optimised frontend. Google had such service which is closed now.
Or follow traditional way of backend optimisation.
Nowadays, good websites pass through another service or another server as reverse proxy which automatically optimises the frontend. Thats it.
Traditional way :
That is one server one website and tweak on main server.
Your server's response time higher is most important. First pass it. Test on webpagetest.org.
Then give priority to visible content.
Then leverage cache.
Render blocking matter is after making them great.
Those optimisations are after you have passed server security, time to first byte, uptime etc. There is no plugin that can make 100% perfect with few clicks for all sites.
You should read (see WordPress doc) and load scripts asynchronously on footer or body via plugins like Header and Footer and ask on WordPress forum when you face difficult. Many times many technology websites discussed it in details. There are really very good old blog websites like CSS Tricks. You should find all articles on the topic and read from old to new. It is impossible to give an easy way. Loading Js is more complicated browser, device matter. Furthermore there is W3TC like cache plugin on normal websites.
Known problems of traditional way :
It is not odd to open up a security flaw with some snippets. With HTTP/2 push, many new things, recent security matters of WordPress during February forcing not to talk about odd plugin and snippets. None really can perform security audit. That is why I talked about it 2 years back about render-blocking javascript and CSS, not later . There I have shown settings of WordPress free Async js and css plugin. That WordPress plugin gives options for CSS, JS getting automatically loaded as inline or load asynchronously. You can try. Inline, Async all has own demerit.
It is technically difficult work than the plugins descriptions will say. Such plugins decrease the manual work but does not eliminate the need of hand coding, trial. It is part of page speed optimisation. You have to slowly learn yourself and plan according to budget.
Do at own risk at dev site with A+ score on SSL labs, add various security headers.
As you possibly a commercial website security is of more importance, followed by page loading speed.
As end tip, you should arrange to host on unmanaged server to optimise the backend. Your site is slower at present which is problem out of host.