3

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:

  1. AddAgg module but that still does not solve the issue as we still get render blocking CSS and JS
  2. 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
  3. 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?

Improve this question
7
  • For CSS at least, rendering is blocked because the library needs to be fetched from an external source. There are two ways to solve it: 1. Load the CSS via JS after the page has loaded. Obviously this will result in an un-styled page until the DOM is ready. 2. Move the critical path CSS into an inline <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
    – Clive ♦
    Jan 9, 2018 at 21:07
  • I doubt you'll find a module to do it for you, mainly because you just wouldn't use PHP for something like this. It requires loading the site in a headless browser (e.g. PhantomJS), and determining what styles are required to display the initially visible part of the page at various resolutions
    – Clive ♦
    Jan 9, 2018 at 21:10
  • @Clive Yes we are definitely looking for ways to do this through the front end because the modules do not do the job. Yes we can limit the amount of CSS but we are already reusing a major of our CSS. Looking at the critical path css generator it did not return much. I will be updating my question with one other thing we tried
    – usernameabc
    Jan 9, 2018 at 21:31
  • I'm not a big fan of external CSS and JS. Especially when using different CDNs within your app. As modern websites should use HTTPS and the HTTPS/2 specs allow for a single handshake while pulling all resources from your server, CDNs add quite some overhead to the page loading (DNS lookups, SSL handshakes etc.) - I suggest pulling the required resources to your server and serving it together with your theme resources. This also enables you to include these resources in minification, other preprocessing, and using your own cache tags.
    – Mario Steinitz
    Jan 10, 2018 at 2:06
  • @MarioSteinitz we initially thought to bring the files in locally for all the reasons you mentioned but we found that it would increase the file size of the aggregated CSS and JS files overall which still caused the render blocking. We will be downloading the minified files only so does it make sense to not aggregate them with the theme CSS and JS? Although it is one more request, the request will be smaller and less chance of render blocking?
    – usernameabc
    Jan 10, 2018 at 17:30

1 Answer 1

Reset to default
2

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.

Improve this answer
2
  • we did attempt to use that page, but it did not result in much improvements. Will have to review the critical path css generator to see if it helps.
    – usernameabc
    Jan 9, 2018 at 21:37
  • Critical CSS has some very good potential.
    – usernameabc
    Mar 6, 2019 at 0:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.