How to setup external CSS and JS to prevent render-blocking from Google PageSpeed? We are using Google's PageSpeed to help optimize the site. A couple constant issues that come up include render blocking CSS and JS. We have tried the following in our libraries.xml file, but cannot find the appropriate way to do this in D8. 

We have found this to be an issue with our local aggregated CSS files that come from our theme and with external CSS and JS

We have tried:


AddAgg module but that still does not solve the issue as we still get render blocking CSS and JS 
code below is what we have tried with and without preprocess = false. setting the attributes to async: true does not load the page properly so we using defer: true
We also tried moving the css-placeholder and js-placeholder from our html.html.twig file to the bottom of the page but that has side effects. 


mytheme.libraries.yml

fonts:
  css:
    theme:
      //fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i: { type: external, preprocess: false, minified: true }
      //maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css: { type: external, preprocess: false, minified: true }

slick_carousel:
  css:
    theme:
      //cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css: {type: external,preprocess: false, minified: true}
  js:
    //cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js: { type: external, preprocess: false, minified: true, attributes: { defer: true }}


What is the proper way to add external and local CSS and JS without render-blocking?
Defer for JavaScript is how to do js. CSS is a lot harder. You need to generate critical css and inline it and then still load the CSS in a deferred way. This explains how to do so with the 7.x version of AdvAgg; the 8.x version shouldn't be that far off.

https://groups.drupal.org/node/517292

Font's are their own special thing, the advagg relocate sub module handles the browser cache part, the advagg font module makes font loading async.

This is the easiest site to use to generate critical css
https://www.sitelocity.com/critical-path-css-generator but it might not give the best results.