How to properly remove JavaScript and CSS blocking the display of the top of the page?

Question

Google

Struggling with this tip:
Remove the JavaScript and CSS blocking the display of the top of the page
Site on wordpress. Pursues sports interest. I'm trying to do according to this manual https://varvy.com/pagespeed/defer-loading-javascri...
Inserted this code before</body>

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

I created the defer.js file and put it along this path /site.com.ua/wp-content/themes/xxx
After that, I copied the script itself into the defer.js file, for example jQuery. But nothing seems to be happening. The error/recommendation stays in google pagespeed...
Or is there an easier way to get rid of it?
Thanks in advance to everyone who answers

Answer 1

Fuck google pagespeed. There are JavaScript blocks that must be in the page header.

Answer 2

On bare js, everything is elementarily done.
before </body>inserting

<script>
    var script = document.createElement('script');
    var link = document.createElement('link');
    /*Подключаем стили*/
    document.getElementsByTagName('head')[0].appendChild(link);
    link.setAttribute('rel','stylesheet');
    link.setAttribute('type','text/css');
    link.setAttribute('href','css/style.css');
    /*Подключаем скрипт*/
    document.getElementsByTagName('head')[0].appendChild(script);
    script.type = 'text/javascript';
    script.src= 'js/script.js';
    </script>