How to remove critical CSS from the main.css file

Tags: css,asynchronous,optimization,pagespeed,inline-code

Problem :

I am working hard to imporove page speed. I am using Critical Path CSS Generator tool to identify above-the-fold CSS. Then I inline critical CSS as suggested, and load the full css asynchronously.

But I end up with a lot of duplicate CSS that way, which is not so optimal. So my question is:

How to remove critical CSS from the main.css file?

Thanks in advance.

Solution :

While it may seem like an anti-pattern, all above-the-fold CSS you inline into your document SHOULD be duplicated in your external CSS document. That way, you can make a single site-wide bundle that can be fetched once for your entire site, but that initial page load will be accelerated. While this does result in extra "wasted" KBs upfront, the advantage is that you have a small subset of the necessary CSS available to you as soon as the HTML is sent to the client, reducing the time it takes to render the client's initial view.

Also, to be clear, if you're following this practice correctly, every page on the site will have a different set of above-the-fold css, because every page has different content/tags above-the-fold which would make it impossible to remove the above-the-fold CSS from the full external file (assuming you're concatenating all CSS into one file).

You can read more about the practice of above-the-fold css here.

If you're really concerned about code duplication (though you shouldn't be in this case), you can use cookies to keep track of whether or not a user has visited the site before. If the user has not been before, then you can inline the above-the-fold CSS. If the user has been before, you can assume that the user already has the full CSS file and that the CSS file will be pulled from the browsers cache.

There are a bunch of articles on how unreliable the browser cache is, so my recommendation is that you simply do what you're already doing to satisfy client requirements.

Another thing that should be mentioned is that this practice will largely go away once HTTP/2 becomes more prevalent as subsequent HTTP requests won't be nearly as expensive as they are today. Considering the intensive tooling/effort this practice requires (especially when future proofing against HTTP/2), it may be better (I think it is) to just avoid it completely.

    CSS Howto..

    how to apply transition effect in expand/collapse inside gridview rows

    How to eliminate the padding in the nav menu from Refinery CMS?

    How to select the last element within an element regardless of type in CSS?

    JavaFX editable tableview: How to change size and css of the TextField inside of TableCell?

    How to change header size in css

    How to change background color of readonly textbox in css

    How to avoid messing formating up?

    How can I force each piece of a quadrant to inhabit only its fourth of the area (HTML/CSS)?

    How to avoid text go below the thumbnail with css

    How to make a centered, responsive CSS circle within a Boostrap div?

    How can I make each section fit within the li box?

    how to make “before” li is fixed at the bottom of li?

    How to hide and show a
    onclick when there's already an action for click?

    IE8 and lower showing background white

    How to wrap lines in an inline-block with CSS?

    How to set CSS hover on input

    How can I make this section of my webpage responsive? [closed]

    How can I target a block after another block with css?

    How to create an href that opens a div on screen? [closed]

    How do I change the placeholder like as the elements replace each other place?

    How to have a multiline CSS horizontal scroll?

    how to set the font-family like a digital clock CSS? [closed]

    How to make read more option with html/CSS?

    Click radio button then show submit button

    How to create a button with overlapping Ribbon Shape in CSS?

    How to make
    , , or list display tabular data as a table?

    How to Vertically Center 2 anchor tags with CSS?

    How can I trigger a jQuery alert when an iframe AND its CSS is loaded and rendered?

    overlaping text with different styles over image, prevent text of one style to be shown on top of the text of another style

    How to Write an Angular directive to update CSS class based on form validation