Is it faster to load if all webpage resources are compiled into a single HTML file?

Question

What if I had a compilation step for my website that turned all external scripts and styles into a single HTML file with embedded <script> and <style> tags? Would this improve page load times due to not having to send extra GETs for the external files? If so, why isn't this done more often?

Dashtikavir

This is kind of what browersify and webpack does, it turns all the external js files into a single bundle to reduce the number of GET requests sent. This is pretty much the norm in web app development where you have multiple js, html and css files for modularity and a build step to combine it all together. – Setose

Fewer requests doesn't always mean faster, because web browser sends requests in parallel. Also, split files makes cache possible. – Angelynanger

Answer 1

Impossible to say in general, because it is very situational.

• If you're pulling resources from many different servers, these requests can slow your page loading down (especially with some bad DNS on the visiting side).
• Requesting many different files may also slow down page load even if they're from the same origin/server.
• Keep in mind not everyone has gigabit internet (or even on megabit level). So putting everything directly into your HTML file (inlining or using data URIs) will definitely reduce network overhead at first (less requests, less headers, etc.).
• In addition (and making the previous point even worse) this will also break many other features often used to reduce page loading times. For example, resources can't be cached - neither locally nor on some proxy - and are always transferred. This might be costly for both the visitor as well as the hosting party.

So often the best way to approach this is going the middle ground, if loading times are an issue to you:

• If you're using third party scripts, e.g. jQuery, grab these from a public hosted CDN that's used by other pages as well. If you're lucky, your visitor's browser will have a cached copy and won't do the request.

• Your own scripts should be condensed and potentially minified into a single script (tools such as browersify, webpack, etc.). This must not include often changing parts, as these would force you to transfer even more data more often.

• If you've got any scripts or resources that are really only part of your current visitor's experience (like logged in status, colors picked in user preferences, etc.), it's okay to put these directly into the parent HTML file, if that file is customized anyway and delivering them as separate files wouldn't work or would cause more overhead. A perfect example for this would be CSRF tokens. Don't do this if you're able to deliver some static HTML file that's filled/updated by Javascript though.

Tiercel

Answer 2

Yes, it will improve page load time but still this method is not often used due to these reasons:

1. Debugging will be difficult for that.
2. If we want to update later, it also won't be so easy.
3. Separate css and .js files remove these issues

And yeah, for faster page load, you can use a BUILD SYSTEM like GRUNT, GULP, BRUNCH etc. for better performance.

Schnorkle

Why is it hard to debug? – Aubergine

@choz: If everything is put into a single file and potentially minimized/optimized, things can get very ugly and hard to follow (e.g. function names being shortened two one or two characters). Download any minified Javascript file, e.g. jQuery.min.js, and have a look yourself. – Tiercel

@Tiercel If you concern about minified js, I usually debug with chrome and they have feature to prettify the minified js. That wouldn't be hard at all.. – Aubergine

@Aubergine Oh, actually never tried that so far. :) But still makes your file huge, even if not minified. You're losing encapsulation of smaller files, even if debugging tools help. – Tiercel

BRUNCH? Wat? Never heard of that one – Sanctum