3

My goal is to eliminate render-blocking CSS and JS on a website.

Google suggests to identify the used CSS/JS via coverage, and move that code from the render-blocking URL to an inline script tag in your HTML page. When the page loads, it will have what it needs to handle the page's core functionality.

For example for core CSS:

<style type="text/css"></style>

The rest of the CSS can then be loaded asynchronously via preload.

<link rel="preload" href="non-core-styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="non-core-styles.css"></noscript>

I have come across Purgecss that can remove unused css.

purgecss --css bootstrap-grid.min.css --content index.html --out dist/

But I would rather like to extract the unused CSS in order to load them async via preload as explained above to avoid any issues with the website itself.

How can this be achieved with Purgecss or any other tool, please?

Same goes with javascript. The core can be loaded like this:

<script src="app.js"></script>

While the non-critical parts can be loaded async like this:

<script src="app.js" async></script>

But is there a tool that can extract the unused JS from my site though?

Thanks

Houman
  • 64,245
  • 87
  • 278
  • 460
  • Is your question about optimizing for fast loading "Above the Fold" (which is what the google dev tools often suggest) or about content that is loaded on demand? In any case, doing that automatically is often problematic especially when using something like bootstrap. The problem is that the order in the CSS file is important. So just removing the unused rules and moving them to another file might break the styling. – t.niese Jan 24 '22 at 09:44
  • I don't mind doing it manually each time, because my website doesn't change often. I just would like to speed it up. But the order of CSS is indeed problematic. How comes google doesn't mention that. – Houman Jan 24 '22 at 09:48
  • The basic idea is that you split your css/js code right from the beginning. One part with "Above the Fold" (Navigation and Hero), and the js code initially needed (like loading animations, ...) and the other CSS/JS code. – t.niese Jan 24 '22 at 13:47
  • Yes, but this is very hard to achieve. Most people use a base CSS framework like Bootstrap or MaterialUI to begin with. What do you think of the answer? Extracting out the Core CSS and loading that inline. Then loading the full CSS again deferred. It's not ideal, but this could avoid the order issue that mentioned in your first comment. – Houman Jan 24 '22 at 14:00
  • "Above the Fold" is many important for regular websites and for those I personally don't really see much of a benefit of using such frameworks as you have `flex` and `grid` especially for general layout and "Above the Fold" part which should be kind of unique. So I never had a problem with that. And for web applications, the "Above the Fold" isn't that important. – t.niese Jan 24 '22 at 15:10
  • 1
    Regarding the approach, I guess that would work you just need to keep an eye on how large the inline `style` gets (if too much has to be copied from those frameworks it is also bad) and also compare it with the overall size of the frameworks CSS. I probably would still prefer making the "Above the Fold" without a framework. And if the framework is useful for the site below the fold, use it only there. – t.niese Jan 24 '22 at 15:11

1 Answers1

-1

Take a look at https://github.com/pocketjoso/penthouse for extracting the 'critical' CSS for a page, this will then go in your <style type="text/css"></style> tag.

I'd recommend then including all of your CSS in the CSS file via a link tag. This will mean it's the same on each page and can be cached by the browser.

mattGreenfield
  • 161
  • 9
  • Yes, this will extract the critical part. But how about the non-critical part for loading it deferred? Unless I would load the whole CSS as deferred to cover the second part. – Houman Jan 24 '22 at 10:28
  • yes, I'm recommending loading everything in the CSS file, critical and non-critical - for browser cache purposes. – mattGreenfield Jan 24 '22 at 15:18
  • That worked well, after quite some careful tinkering with the produced CSS. Is there also anything similar to Penthouse for js? Thanks – Houman Jan 24 '22 at 18:52
  • Great! Dare I say you don't need any JS for critical path loading?? You could manually inline anything that you really need – mattGreenfield Jan 25 '22 at 15:26
  • Any option with vanilla js instead Node.js? – Extrange planet Jun 05 '23 at 06:22