"Above The Fold" - how to fix, IMHO...

Introduction:

As the description says: here my "quick-and-dirty" tutorial/"how-to" eliminate render blocking css, thus handling Pagespeed Insight's "Above the Fold"-issues - thus help boosting your SEO-rank.

1st step: "Find the critical CSS" (using the "CSS Used"-plugin for Google Chrome)

Source(s):
Either read bobscript.com's article regarding this topic, and and follow their instructions to use their Chrome-plugin, to find your page's critical CSS. insert the "generated critical CSS" as inline CSS between the <head></head>-element of your page.
For more background-info, read wev.dev's article: "Eliminate render-blocking resources".

2nd step: LoadCSS

Source:
Using Filament Group's "loadCSS"-script might be of interest for you, if you have to use further aditional CSS-files on your web-page.
N.B.: I've taken the liberty of compressing the LoadCSS-script, as shown below! In any event, I'd recommend that you insert Filament Group´s LoadCSS-script inline in your code!


...</footer>
<script>/*! loadCSS. [c]2017 Filament Group, Inc. MIT License */!function(e){"use strict";var n=function(n,t,o){function i(e){return a.body?e():void setTimeout(function(){i(e)})}function r(){l.addEventListener&&l.removeEventListener("load",r),l.media=o||"all"}var d,a=e.document,l=a.createElement("link");if(t)d=t;else{var s=(a.body||a.getElementsByTagName("head")[0]).childNodes;d=s[s.length-1]}var f=a.styleSheets;l.rel="stylesheet",l.href=n,l.media="only x",i(function(){d.parentNode.insertBefore(l,t?d:d.nextSibling)});var u=function(e){for(var n=l.href,t=f.length;t--;)if(f[t].href===n)return e();setTimeout(function(){u(e)})};return l.addEventListener&&l.addEventListener("load",r),l.onloadcssdefined=u,u(r),l};"undefined"!==typeof exports?exports.loadCSS=n:e.loadCSS=n}("undefined"!==typeof global?global:this);"</script>
<script>loadCSS( "path/to/mystylesheet.css" );</script>

Repeat the function-call above, if you have any other CSS-files that you need to use by putting in the following after the first function-call - i.e.:
<script>loadCSS( "path/to/my_first_additional_stylesheet.css" );</script>
<script>loadCSS( "path/to/my_second_additional_stylesheet.css" );</script>
<script>loadCSS( "path/to/my_third_additional_stylesheet.css" );</script>
(All other Javascript-/jQuery-stuff follows by going in here...) </body>

3rd step: webfontloader

Source:
NOTE: Read/Use only the following, IF you'll be implementing Google Fonts (or Typekit) - otherwise - move along...
...</footer>
(the lines of code above for "loadCSS" goes in here, then insert subsequently...)
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
(All of your other jQuery-libraries that you need to use put in here, then followed by...)
<script src="//cdnjs.cloudflare.com/ajax/libs/webfont/1.6.28/webfontloader.js"></script>
<script>WebFont.load({google:{families: ['Droid Sans','Droid Serif']}});</script>
</body>

Conclusion:

https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.28/webfontloader.js
The practices described in the above (or most of them) have also been implemented in connection with this "how-to",
which you've just read! If it's worked or not, can be seen here: Pagespeed Insights
You're more than welcome to check out this webpage's source-code to see an example, regarding how things were done in connection with the described steps above

Links: