CSS/JS Inlining Performance

Debate on whether inlining CSS and JavaScript into HTML improves page load times versus serving separate files, considering caching, HTTP/2, bundling, minification, and request overhead.

📉 Falling 0.5x Web Development
3,812
Comments
20
Years Active
5
Top Authors
#5162
Topic ID

Activity Over Time

2007
7
2008
35
2009
108
2010
165
2011
195
2012
282
2013
278
2014
216
2015
264
2016
331
2017
283
2018
195
2019
185
2020
259
2021
241
2022
215
2023
189
2024
179
2025
178
2026
9

Keywords

bundle.js e.g JS CloudFront rubyonrails.org X1 ESI HTTP2 reactjs.org HTTP css js load files page load page tag caching css js javascript

Sample Comments

Confusion Jun 28, 2009 View on HN

No it doesn't: this makes sense for everyone. Scale would be involved if they were out to save a few bytes per request, to save on bandwidth. However, they are out to lower the per user load/rendering time, which is completely independent of the scale of the company delivering the page (assuming the delivery scales well enough that extra traffic does not lower page delivery time, but that is usually the case).

tyingq Oct 30, 2018 View on HN

Http/2 makes this less important. Perhaps still worth it for CSS, but higher effort things like image spriting might not be as attractive now.

sergiosgc Sep 3, 2013 View on HN

1. Use a CDN that supports ESI, like CloudFront.2. It's not that much of a difference, after gzipping, which you surely already do.3. See number 1.Moreover, in the end, you'll get a less heavy document to be processed by the browser. I swear my all bells and whistles i7 X1 Carbon still struggles on some javascript-heavy sites.

pknerd Nov 17, 2014 View on HN

But will it not be slow? Assuming downloading css/images etc?

z3t4 Dec 14, 2018 View on HN

With 12,000 kb/s the user will hardly notice the difference. You could add the CSS needed for the first render on the document, and it would save you a round-trip, and with HTTP2 you can send the CSS file together with the document. CSS files can however be cached so the few kb shaved off will only be saved on the first page load. If it's a common file, hosted on a CDN it might already be cached. If you are however worried about bandwidth usage the lowest hanging fruit are the binary f

craftkiller Feb 18, 2025 View on HN

I appreciate their minimalism too, but with http2 and http3 isn't this an anti-pattern? The overhead of loading an additional file is negligible in http2/3, but inlining causes you to have to re-download the CSS on every page instead of benefiting from the browser's cache.

dgant Jul 25, 2012 View on HN

It (can be) page load-time friendly, since there's an overhead for each JS file that's sent.

plainOldText Mar 7, 2011 View on HN

With so many css and js files you increase the number of requests to the server. It's not optimal.

drKarl Jul 30, 2013 View on HN

No, it wouldn't. Minify the css and gzip it is more than enough. The best you can do to reduce page load times anyway is to reduce the number of requests, so the best strategy would probably be to aggregate all of the css files into one, and do the same for the javascript, to minimize the number of requests.

anonymous5133 Oct 25, 2018 View on HN

Only reason I could see it being done is to improve loading time. Most users these days will bounce back if the page takes more than few seconds to load.