Eliminate external render-blocking

Google suggests you to put the initially needed (above-the-fold) CSS inline and load the rest of the CSS when the page load is ready. See here.

Same goes for the javascript. Include the "must have code" inline and load the "nice to have code" on page load as suggested here

Idea is to load what the user sees first as fast as possible.

Personally I find it hard to follow as it would split the code and makes maintaining it harder. Makes sense for large projects though…

I have successfully solved this problem with javascript files only.

Try adding the async attribute in script tag or defer attribute.

For example:

<script src="filename.js" async></script>
<script src="filename.js" async="async"></script> 

or

<script src="filename.js" defer></script>
<script src="filename.js" async="async"></script>

I suggest you to use async, it loads the file only when needed. Defer attribute load the file at the end of the page, some time it will not perform its functionality required.