20 comments

  • Mathias ÅsbergMathias Åsberg, over 4 years ago (edited over 4 years ago )

    The CSS that should be inline is what is required to render content "above the fold".

    Above the fold

    Content that is visible on visitors screen when entering a page. Basically it's the core stuff like html, body etc because this elements is loaded at the beginning of code. Probably we need to include css for menu, hero etc. Everything that visitor see before it starts to scroll down should be covered in the CSS that we place inline in sites head

    Below the fold

    This is everything else and it don't need to be loaded inline. Here it's smartare to add it by normal standards like

    link rel="stylesheet" href="css/bootstrap.css"

    and it can be placed after /body

    Why not inline? Because then it will not be cached and there is no reason not to when it's the stuff below the fold.

    Google Pagespeed

    Have optimized several quite heavy pages to score 100/100 so if anyone have any questions feel free to ask.

    8 points
  • Robert Deniszczyc, over 4 years ago

    What about users with JavaScript disabled? How is the CSS rendered?

    2 points
    • Russ BrownRuss Brown, over 4 years ago (edited over 4 years ago )

      Possibly, you could put the full css stylesheet in a noscript tag?

      2 points
      • Yasen DimovYasen Dimov, over 4 years ago

        Great!

        0 points
      • Calum SmithCalum Smith, over 4 years ago

        Err, I'm assuming you don't mean this:

        <noscript> <style> .foo { bar: baz; } </style> </noscript>

        As that would kind of defeat the purpose of making the stylesheet external at all, and indeed would load it twice on browsers with JS. To be more specific, this could work:

        <noscript> <link rel="stylesheet" href="foobar.css" /> </noscript>
        0 points
  • Nicolás Joel EnglerNicolás Joel Engler, over 4 years ago (edited over 4 years ago )

    Yup, with this technique there's no FOUC for the first visible elements on the page.

    The only thing that worries me about this is maintainability, and the inability to use preprocessors like Sass, LESS, Stylus, etcetera.

    2 points
    • Magnus SkareMagnus Skare, over 4 years ago

      You could simply include it in your Gulp/Grunt file. Addy Osmani's Critical works quite well.

      I'm still not sure how much I should inline though. Could you inline everything and cache it later on small static sites where the total CSS is ~10kb, or is that too much?

      6 points
    • Andrew ZimmermanAndrew Zimmerman, over 4 years ago (edited over 4 years ago )

      Couldn't one use code snipppets for most page components and then use an HTML build tool to generate the final page? I was doing that in Hammer for a while.It allowed me to build static sites relatively easy.

      The main content could prove troublesome, but then most of that is likely to be base elements like p, blockquote and ul/ol/lis.

      1 point
      • A. M. ­DouglasA. M. ­Douglas, over 4 years ago (edited over 4 years ago )

        Yes, this is one way to go about it. Very simple to do if you already use a templating system like Handlebars/Mustache or Twig. Using a partial template for your inline CSS prevents code duplication in your work flow.

        0 points
    • Carl Yung, over 4 years ago

      For small SPA's you could compile your SASS to CSS and then inline all of the CSS into the HTML (using Gulp for example).

      2 points
    • Justin BelcherJustin Belcher, over 4 years ago

      Ideally this is a deployment task. There's really no need to inline locally as you're developing, and with some annotation this is the type of thing you can instrument to extract programatically.

      2 points
    • Matt HelbigMatt Helbig, over 4 years ago

      Also Critical Path CSS Generator for people not good at coding well like me. Totally a speed bump having that compressed CSS uptop.

      1 point
  • Pierre de MillyPierre de Milly, over 4 years ago

    What does Google know about the web anyway?

    1 point
  • Mike Godlewski, over 4 years ago

    Looks like the Google Developers site could use some styling. Google Developers

    1 point
  • Anders Kitson, over 4 years ago

    Please forgive any misunderstanding here. But if you are using something like react would that also inline like gulp or grunt would. https://facebook.github.io/react/tips/inline-styles.html

    0 points