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?
<style>
tag, and then load an external script containing the remainder of the styles via JS on DOM ready. Something like jonassebastianohlsson.com/criticalpathcssgenerator or a node plugin will help to generate the critical path CSS, but from experience I can say it's a painful job