CSS Delivery Optimization: How to Defer CSS Loading

CSS delivery optimization: How to defer css loading?

If you don't mind using jQuery, here is a simple code snippet to help you out. (Otherwise comment and I'll write a pure-js example

function loadStyleSheet(src) {
    if (document.createStyleSheet){
        document.createStyleSheet(src);
    }
    else {
        $("head").append($("<link rel='stylesheet' href='"+src+" />"));
    }
};

Just call this in your $(document).ready() or window.onload function and you're good to go.

For #2, why don't you try it out? Disable Javascript in your browser and see!

By the way, it's amazing how far a simple google search can get you; for the query "post load css", this was the fourth hit...
http://www.vidalquevedo.com/how-to-load-css-stylesheets-dynamically-with-jquery

Optimize CSS Delivery... but I am loading in styles with JS

I think the issue here was the third party css files were not minified.

Optimize CSS Delivery - a suggestion by Google

Based on my reading of the link given in the question:

1. Choose which CSS declarations are inlined based on eliminating the Flash-of-Unstyled-Content effect. So, ensure that all page elements are the correct size and colour. (Of course, this will be impossible if you use web-fonts.)
2. Since the CSS which is not inlined is deferrable, you can load it whenever makes sense. Loading it on DOMContentReady, in my opinion, goes against the point of this optimisation: launching new HTTP requests before the document is completely loaded will potentially slow the rest of the page load. Also, see my next point:
3. The example shows the CSS in a noscript tag as a fallback. Below the example, the page states

   The original small.css is loaded after onload of the page.

i.e. using javascript.

If I could add my own personal opinion to this piece:

• this optimisation seems especially harmful to code readability: style sheets don't belong in noscript tags and, as pointed out in the comments, it doesn't pass validation.
• It will break any potential future enhancements to HTTP (or other protocol) requests, since the network transaction is hard-coded through javascript.
• Finally, under what circumstances would you get a performance gain? Perhaps if your page loads a lot of initially-hidden content; however I would hope that the browser itself is able to optimise the page load better than this hack can.

Take this with a grain of salt, however. I would hesitate to say that Google doesn't know what they're doing.

---

Edit: note on flash-of-unstyled-content (abbreviated FOUC)

Say you a block of text spanning multiple lines, and includes some text with custom styling, say <span class="my-class">. Now, say that your CSS will set .my-class { font-weight:bold }. If that CSS is not part of the inline style sheet, .my-class will suddenly become bold after the deferred loading has finished. The text block may reflow, and might also change size if it requires an extra line.

So, rather than a flash of totally-unstyled content, you have a flash of partly-styled content.

For this reason you should be careful when considering what CSS is deferred. A safe approach would be to only defer CSS which is used to display content which is itself deferred, for example hidden elements which are displayed after user interaction.

Css optimization for google pagespeed insight

Finally I have figured it out.

All you need is

1. To create core.css ( small one, which contains main site's layout skeleton parts ) and output it in head inline form, like this:

<style>body{border: 0px} footer{background-color:#c0c0c0;}</style>

2. Rest CSS you need to put with javascript code which you can find here: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

---

Related Topics