https://github.com/csabapalfi/css-link-in-body
💥Demo: non-render-blocking CSS links in body
https://github.com/csabapalfi/css-link-in-body
Last synced: 2 months ago
JSON representation
💥Demo: non-render-blocking CSS links in body
- Host: GitHub
- URL: https://github.com/csabapalfi/css-link-in-body
- Owner: csabapalfi
- Created: 2018-05-31T00:17:58.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2020-02-23T07:58:53.000Z (about 5 years ago)
- Last Synced: 2025-01-25T14:21:28.276Z (4 months ago)
- Language: HTML
- Homepage: https://css-link-in-body-git-master.csabapalfi.now.sh/
- Size: 12.7 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Non-render-blocking CSS link in body
CSS links (``) in `` should not block rendering of any markup above them.
This is a small demo page to verify/check render-blocking: https://css-link-in-body-git-master.csabapalfi.now.sh/
## But why?
Today even if you inline critical CSS you need to async load your non-critical CSS somehow.
CSS links in body could address this if all browsers stop blocking render on these.
Another way to do this is via `rel=preload` but that has some drawbacks, too (needs polyfilling in most browsers, not granular enough).
## How?
[Read this blogpost](https://jakearchibald.com/2016/link-in-body/) from Jake Archibald or see small example below:
Simply place your style link tags in body.
```html
/* header styles */
...
...
```
e.g. in the example above `header` will render straight away then `main` will render as soon as main.css is loaded.
## The empty `` tag 'polyfill'
Some browsers can be 'convinced' to follow the behaviour described above by adding an empty `<script>` tag after the style link in your body:
```html
<link rel="stylesheet" href="/main.css"><script>
...
```
* this will deliberately block parsing after that link tag
* forces the browser to wait for pending stylesheets
* prevents the browser from discovering other style links below therefore no render-blocking because of style links below
## Browser support
TODO: Keep this up-to-date and maybe even automate it better
Checked some manually for now:
✅ supported - ☑️ supported with empty script 'polyfill' - ❌ not supported
| | |
|----------------------|:--:|
| Chrome 69 | ✅ |
| Edge 17 | ✅ |
| Firefox 60 | ✅ |
| macOS Safari 11.1 | ☑️ |
| iOS Safari 11.3 | ❌ |
## Read more
See [this thread on twitter](https://twitter.com/patmeenan/status/1002007588878340096) and [this blogpost](https://jakearchibald.com/2016/link-in-body/) from Jake Archibald.