How to load CSS asynchronously without using JavaScript?

Question

Suppose if I have a website http://somethingsomething.com

And I have 3 css file

common.css
homepage.css
inner-pages.css

homepage.css is required for homepage and common.css is for whole site but inner-pages.css is for other pages only and it's big file. Is it possible to load inner-pages.css after homepage data download. In the same way like we use async attribute for script tag. As far as I know async attribute is only for JS not CSS

my one friend suggested to use requirejs for this http://requirejs.org/docs/faq-advanced.html#css but I don't want to use javascript to load css and even I would think upon JS way i would not use require.js just for this. So if it is not possible with CSS only. what would be the simple JS way to do this?

This seems negligible, how big are the files? What kind of performance gain will you get? I think it would be wiser to just minify everything together. Once a user navigates past the homepage the benefits would disappear. As far as I know there is no way to load CSS files async w/o JS. — David Nguyen, Nov 06 '13 at 17:52
@DavidNguyen _ Yes what you said I already know. just wanted to check if someone has different opinion or trick. — Jitendra Vyas, Nov 06 '13 at 17:54
As David Nguyen says, if you minify and put all the css in one file, the first load will be bad, but the next loads will be in cache, so it will be fast. But anyway, I'm curious if its possible without javascript... — Tomás, Nov 06 '13 at 17:55
Actually I you should be able to load async using an iframe...answer below — David Nguyen, Nov 06 '13 at 17:58
could [this](https://gist.github.com/omo/9986103) be of interest to the discussion? — Renaud, Mar 19 '15 at 13:45

score 9 · Answer 1 · edited Dec 22 '15 at 13:55

9

Async CSS with media="bogus" and a <link> at the foot Say we've got our HTML structured like this:

<head>
    <!-- unimportant nonsense -->
    <link rel="stylesheet" href="style.css" media="bogus">
</head>
<body>
    <!-- other unimportant nonsense, such as content -->
    <link rel="stylesheet" href="style.css">
</body>

More at http://codepen.io/Tigt/post/async-css-without-javascript

edited Dec 22 '15 at 13:55

Mr Lister

45,515
15
108
150

answered Dec 18 '15 at 14:47

Abhishek Gupta

4,066
24
27

David Nguyen · Answer 2 · 2013-11-06T18:02:10.907

1

You can place an iframe in your page pointing to some dummy page that serves the CSS, that should serve the CSS file async.

<iframe src="loadcss.html"></iframe>

Do note it seems pretty trivial, this causes a minimum of 2 css file transfers per page and 3 css file transfers per child page (if it isn't cached). If you were to minify the css you would only have 1 transfer regardless.

edited Nov 06 '13 at 18:02

answered Nov 06 '13 at 17:57

David Nguyen

8,368
2
33
49

score 0 · Answer 3 · answered Nov 06 '13 at 18:00

0

try

$.ajax({
    url:'/css.css',
    type:'get',
    success:function(css){
        $('html').append('<style>'+css+'</style>');
    }
});

or

function getCss(url){
    $('<link>',{rel:'stylesheet',type:'text/css','href':url}).appendTo('head');
}

getCss('/css.css');

ok sorry I didn't see you don't want to use javascript

how about using css @import:

<style>
@import url('/style1.css');
@import url('/style2.css');
</style>

answered Nov 06 '13 at 18:00

3

Javascript would be the last resort. – Jitendra Vyas Nov 06 '13 at 18:04
3

@import is even worse than : http://stackoverflow.com/questions/7199364/import-vs-link – cristoper Jan 12 '16 at 15:32

score 0 · Answer 4 · answered Nov 03 '16 at 03:26

Include your CSS in the <body> instead of <head> ... "it seems this trick causes Chrome & Firefox to start the body earlier, and they simply don't block for body stylesheets." and add a condition for IE:

head

<head>
  <!--[if IE]>
    <link rel="stylesheet" href="style.css"> <!-- blocking, but what else can ya do? -->
  <![endif]-->
</head>

body

<body>
    <!--[if !IE]> -->
        <link rel="stylesheet" href="style.css" lazyload>
  <!-- <![endif]-->
</body>

by Taylor Hunt @codepen.io

score 0 · Answer 5 · answered Aug 25 '19 at 10:59

As suggested Require is not necessary for loading CSS assets. If you want to get your larger payloads asynchronously without relying on JavaScript you should be looking at leveraging HTTP/2 Server Push to deliver your non-critical style assets. And here's a performance technique you may find useful for delivering critical CSS payloads for browsers which works well even today.

Finally, if you are optimizing your pages for performance and don't want to pull in heavy or complicated tools like Require I've an alternative minimal asset loader you may use if you like.

How to load CSS asynchronously without using JavaScript?

5 Answers5

Linked