futtta / ao_critcss_aas

Autoptimize power-up to integrate with criticalcss.com
9 stars 1 forks source link

[Question] Removing CCSS from CSS #103

Closed willstocks closed 5 years ago

willstocks commented 5 years ago

This one might be a bit out there (or may have been asked before - I couldn't find anything) - would it be possible to remove the styles injected CCSS styles from the original CSS file sent down to the user (in my case, an AO CSS file).

The only reason I ask this, is at the moment let's say.... 30% of your CSS is found to be "critical", that 30% is then redownloaded again later on to be applied, despite the fact they're already applied and in use.

So as an example, the injected CCSS might look something like:

<style>
  .body{font-weight: bold}
  .h1{font-size: 30px}
<style>

While my AO'ed stylesheet might contain:

.body{font-weight: bold}
.h1{font-size: 30px}
.footer{margin: auto;}

In this case, 60% of the CSS is going to be redownloaded/reused.

All of that being said... I know that it's not a simple task by any means, or whether there would be truly any benefit?

pocketjoso commented 5 years ago

Hi, the reason you don't want to extract the critical css from the full css is that this would produce a unique full css file for each page. This would actually lead to a lot more data wasted, and slower loading of the full css, since it would no longer be possible to benefit from cached full stylesheets.

futtta commented 5 years ago

What Jonas said plus it would require complex CSS parsing which I would like to avoid at all cost ;-)