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.
Activity Over Time
Top Contributors
Keywords
Sample Comments
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).
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.
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.
But will it not be slow? Assuming downloading css/images etc?
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
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.
It (can be) page load-time friendly, since there's an overhead for each JS file that's sent.
With so many css and js files you increase the number of requests to the server. It's not optimal.
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.
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.