Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Google recommends inlining small CSS

developers.google.com

Post reply on HN
Print view View original

21–30 of 143 posts

Re: Google recommends inlining small CSS

#21

Post by bigethan »

fkooman wrote: post #12

I love how they, in that example, use JS to load the rest of the CSS. Seriously?

Seriously.

CSS loading/parsing is render blocking. By loading CSS that isn't needed immediately asynchronously in a way that will use the browser cache if it's available, it makes the page visible much faster. It feels like overkill in the simple example, but it's a tried and true method. ( https://github.com/filamentgroup/loadCSS has > 2k stars if that kinda thing means anything)

From my experience on a large website (m.trulia.com), On a 3G connection with an 'average' (nexus 5) phone, this technique made almost a 2 second difference in perceived load time.

Re: Google recommends inlining small CSS

#22

Post by rimantas »

blowski wrote: post #5

This makes perfect sense for classes like ".article51_footer_wrapper_margin50", look up the rule, and sure enough it looks like `.article51_footer_wrapper_margin50 { margin-bottom: 50px; }` Seriously, just inline rules like that. If it is only applied in one specific place across the entire site either because it cannot or does not need to be made more general, then inlining it is easier to maintain and understand.

Except that class does not make sense. What happens when design changes and margin is now 40px?

Re: Google recommends inlining small CSS

#24

Post by eCa » 

    
      var cb = function() {
        var l = document.createElement('link'); l.rel = 'stylesheet';
        l.href = 'small.css';
        var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
      };
      var raf = requestAnimationFrame || mozRequestAnimationFrame ||
          webkitRequestAnimationFrame || msRequestAnimationFrame;
      if (raf) raf(cb);
      else window.addEventListener('load', cb);
Seems like it's time for a defer attribute on .

Re: Google recommends inlining small CSS

#25

Post by fkooman »

bigethan wrote: post #21
fkooman wrote: post #12

I love how they, in that example, use JS to load the rest of the CSS. Seriously?

Seriously. CSS loading/parsing is render blocking. By loading CSS that isn't needed immediately asynchronously in a way that will use the browser cache if it's available, it makes the page visible much faster. It feels like overkill in the simple example, but it's a tried and true method. ( https://github.com/filamentgroup/loadCSS has > 2k stars if that kinda thing means anything) From my experience on a large websit…

I guess it is time for this one again: http://idlewords.com/talks/website_obesity.htm

if the CSS isn't needed immediately, simply don't load it :)

Re: Google recommends inlining small CSS

#26

Post by blowski »

rimantas wrote: post #22
blowski wrote: post #5

This makes perfect sense for classes like ".article51_footer_wrapper_margin50", look up the rule, and sure enough it looks like `.article51_footer_wrapper_margin50 { margin-bottom: 50px; }` Seriously, just inline rules like that. If it is only applied in one specific place across the entire site either because it cannot or does not need to be made more general, then inlining it is easier to maintain and understand.

Except that class does not make sense. What happens when design changes and margin is now 40px?

Precisely. It doesn't need a class or external CSS rule - just a style attribute (unless it's for a pseudo state, and then it has to be external, but should use a better name).

Re: Google recommends inlining small CSS

#29

Post by laurent123456 »

PavlovsCat wrote: post #10

Are there any findings about whether such godawful class names affect rendering performance? I mean just matching strings such as this one: com-google-api-explorer-client-history-EmbeddedHistoryItemView_HistoryItemUiBinderImpl_GenCss_style-showHideHeaders It's generally really hard for me to take HTML advice from google seriously, their page sources at best look mediocre, and at worst they make my eyes bleed. How can…

Also, since they are talking about optimization, I wonder why they make embedded fonts a requirement to view their plain-text page. I disable loading of fonts because it's useless and often slows everything down, and this is how their page look without these fonts: http://i.imgur.com/oDO8gRt.png

Re: Google recommends inlining small CSS

#30

Post by airza »

blowski wrote: post #26
rimantas wrote: post #22

Earlier quoted context omitted.

Except that class does not make sense. What happens when design changes and margin is now 40px?

Precisely. It doesn't need a class or external CSS rule - just a style attribute (unless it's for a pseudo state, and then it has to be external, but should use a better name).

style attributes don't work with CSP though, which I imagine is important to google
Post reply on HN