PHPackages                             techdivision/defer-css - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. techdivision/defer-css

ActiveNeos-package[Utility & Helpers](/categories/utility)

techdivision/defer-css
======================

Neos Defer CSS package with preload option

v1.0.0(5y ago)09021

Since Aug 28Pushed 5y ago9 watchersCompare

[ Source](https://github.com/techdivision/defer-css)[ Packagist](https://packagist.org/packages/techdivision/defer-css)[ RSS](/packages/techdivision-defer-css/feed)WikiDiscussions master Synced 1w ago

READMEChangelog (1)Dependencies (1)Versions (2)Used By (0)

Deferring CSS for Neos CMS
==========================

[](#deferring-css-for-neos-cms)

This *very simple* package provides a way to async-load CSS files. You can split your CSS into single files to speed up your website (i.e. load css that is most probably below the fold) or only required if the feature is present.

It provides a "DeferCss" AFX-atom with preload hack as described here:

Usage
-----

[](#usage)

Add your stylesheet simply by using the atom `TechDivision.DeferCss:Atom.DeferCss`:

```
prototype(My.Package:Page) {
    head.stylesheets.myAwesomeStylesheet < TechDivision.DeferCss:Atom.DeferCss {
        href.path = 'resource://My.Package/Public/Css/MyAwesomeStyleSheet.css'
    }
}

```

You could also add a feature-toggle in case you only want to load a certain stylesheet when the feature is present. Now you can split your css into clean modules that can only be loaded.

```
prototype(My.Package:Page) {
    head.stylesheets.myAwesomeStylesheet < TechDivision.DeferCss:Atom.DeferCss {
        href.path = 'resource://My.Package/Public/Css/MyAwesomeStyleSheet.css'
        @if.awesomeFeatureIsPresent = ${q(node).children('main').find("[instanceof My.Package:MyAwesomeNodeType]")}
    }
}

```

Or you can add a ContentCollection to your page where you put

Result
------

[](#result)

This is how your stylesheet is going to be included:

```

```

**Explanation**
The first link/preload-tag uses modern browser preload functionality so as to prioritize loading.
The second link-tag is the actual stylesheet that loads as "print", but as soon as it has loaded successfully, it will be loaded as stylesheet.
The third, noscript-tag is a fallback (if js should be disabled).

### Sync Stylesheet Atom

[](#sync-stylesheet-atom)

Just for feature-completeness, we added also a stylesheet tag `TechDivision.DeferCss:Atom.StylesheetTag` which is of similar usage:

```
prototype(My.Package:Page) {
    head.stylesheets.myAwesomeStylesheet < TechDivision.DeferCss:Atom.StylesheetTag {
        href.path = 'resource://My.Package/Public/Css/MyAwesomeStyleSheet.css'
    }
}

```

which outputs

```

```

Contribute
----------

[](#contribute)

We will be happy to receive pull requests!

###  Health Score

27

—

LowBetter than 49% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity15

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity54

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

2089d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/e2402ac081fc0dc57b15f8cfcc16a1c1b37adfa3211a7fe30eb80d622b6586f3?d=identicon)[regniets](/maintainers/regniets)

---

Top Contributors

[![regniets](https://avatars.githubusercontent.com/u/4123716?v=4)](https://github.com/regniets "regniets (2 commits)")

### Embed Badge

![Health badge](/badges/techdivision-defer-css/health.svg)

```
[![Health](https://phpackages.com/badges/techdivision-defer-css/health.svg)](https://phpackages.com/packages/techdivision-defer-css)
```

###  Alternatives

[sitegeist/kaleidoscope

Responsive-images for Neos

29352.4k10](/packages/sitegeist-kaleidoscope)[neos/fusion-form

Fusion Form

19724.3k31](/packages/neos-fusion-form)[neos/seo

SEO configuration and tools for Neos

13990.5k24](/packages/neos-seo)[neos/googleanalytics

Google Analytics integration for Neos CMS

15125.7k](/packages/neos-googleanalytics)[breadlesscode/neos-blog

Ready to use blog package

161.4k](/packages/breadlesscode-neos-blog)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)