Ocyan plugin unusedcss
======================

About unusedcss
---------------
Allow above the fold css overrides for supported landingspages

Installation
------------
Add `ocyan.plugin.unusedcss` to your projects dependencies.

Usage or, How to get rid of the "Eliminate render-blocking resources" error in lighthouse
-----------------------------------------------------------------------------------------

1. Get the loging credentials for the unusedcss.com account
2. Login the unusedcss.com dashboard
3. If there are no sites yet, create one
4. At the created site, click on "Landing pages"
5. Add the url you want to have the "above the fold css" for as a langding page,
   it doesn't matter if the domain is different from the existing site. Make
   sure to add the parameter ?unusedcss, hence http://example.com/?unusedcss
6. Copy the generated css
7. Login to your site and go to /manage/unusedcss/templateinlinecss/
8. Create a new "template inline css" for the landings page you added and select
   the proper template type.
9. You are almost there! The "Eliminate render-blocking resources" is gone.
   However you will not have a better score just yet, because
   google will now unfairly penalize you even harder for "Preload key requests"
   error. Just add the preloads google complains about in your layout.html or
   in the specific landing page templates. it should be exacly like this, only
   change the font, nothing else:
```
    <link rel="preload" href="{% static 'template9/webfonts/fa-solid-900.woff2' %}" as="font" type="font/woff2" crossorigin="anonymous">
```
10. Now you are done, the fucking errors are gone yay wtf google????

CUSTOM PAGE
For custom pages you need to add the following code to the head of your page (This can only be used for one custom page):
```
{% block styles %}
{% unusedcss 'custom' as def %}
{% if def.is_active %}{{ def.css|safe }}{% with unusedcss_lazy=True %}{% compress css %}{% with unusedcss_lazy=False %}{% compress css %}{{ block.super }}{% endcompress %}{% endwith %}{% endcompress %}{% endwith %}{% else %}{% compress css %}{{ block.super }}{% endcompress %}{% endif %}
{% endblock %}

{% block extrastyles %}
{% unusedcss 'custom' as def %}
{% if def.is_active %}{% with unusedcss_lazy=True %}{% compress css %}{% with unusedcss_lazy=False %}{% compress css %}{{ block.super }}{% endcompress %}{% endwith %}{% endcompress %}{% endwith %}{% else %}{% compress css %}{{ block.super }}{% endcompress %}{% endif %}
{% endblock %}
```

