3 ms·
IMO, inlining styles is rarely worth it. Just include a single CSS file in the head and call it a day. There's value in simplicity. If I'm given the choice, I
by TheAceOfHearts 9y ago
IMO, inlining styles is rarely worth it. Just include a single CSS file in the head and call it a day. There's value in simplicity.
If I'm given the choice, I usually avoid web fonts. Most platform's built-in fonts are usually pretty good and fast. It's fine for a website to look different on various browsers and operating systems.
- ShirsenduK 9y agoWhen your CSS file gets large. Which is the case in most sites today thanks to frameworks like Bootstrap. Your page will wait for the CSS file to download, process and repaint. Inlining some of the CSS i.e. critical path CSS can give you lighting fast renders.
- jameskegel 9y agoAlso don't forget to strip your unused classes, which I'm embarrassed to admit, I did not start doing until recently
- borplk 9y agoThen you need bandwidth to download the CSS that is embedded in the page. Where as you if you cache the linked CSS file you only take the hit once but as you navigate around the site each time it'll be loaded from the cache.
- blauditore 9y agoAlso, inlining CSS prevents its caching, so the first page load may be faster but subsequent ones will suffer from that if the amount of code is fairly large.
- abritinthebay 9y agoYup. I work with a very large site and our entire CSS is about 25kb after gzip. It’s a pointless micro-optimization.
- ShirsenduK 9y agoGoogle Chrome Developers/Google Developers Youtube channel has great content on Frontend optimisations by Paul Irish and others. They teach you what to measure and how. You might want to check that if you are interested in Frontend Engineering. When your site has a large audience, every microsecond counts. Especially when you don't have someone bankrolling for your traffic. Speed plays an important part for SEO and UX.
- abritinthebay 9y agoI’m quite familiar with Paul’s work. He’s not really saying anything new in those talks either. It’s good technical info but again - a pointless micro-optimization in most cases. There are so many other, bigger, better, wins to focus on first. Considering anything Google does as useful for the average developer - even at a reasonably large company - is like thinking pizza delivery guys should emulate UPS: it’s a misunderstanding of context.
- warrenm 9y ago25kb of CSS after compression? That's a damn lot of CSS
- abritinthebay 9y agoThat’s all possible css across the site. Average is much lower. Our global css is 3kb for example.
- ShirsenduK 9y agoCritical Path CSS is not fairly large, its fairly small in most cases.
- artursapek 9y agoWhen you say "critical path" you just mean above-the-fold stuff?
- ShirsenduK 9y agoMostly yes. This has more information https://developers.google.com/web/fundamentals/performance/critical-rendering-path/ https://developers.google.com/web/fundamentals/performance/c....
- mixedbit 9y agoThe tool should also check if a page uses HTTP2, because for HTTP2 inlining does not give any benefits.
- paulirish 9y agoNot true. Even in h2, the browser will first parse the HTML to discover the `<link rel=stylesheet>` and it'll then go issue that request. In h2 it'll reuse the TCP connection (which is a win), but you've still got to round trip to start receiving the stylesheet response body. FWIW here's a pretty good analysis that shows even with h2, bundling and inlining still has benefits: https://sgom.es/posts/2017-06-30-ecmascript-module-loading-can-we-unbundle-yet/ https://sgom.es/posts/2017-06-30-ecmascript-module-loading-c...