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

Question

What should I do if I had a compilation stage for my site that turned all external scripts and styles into one HTML file with built-in <script> and <style> tags? Will this improve page load time because you don’t have to send extra GETs to external files? If so, why is this not done more often?

Answer 1

It is impossible to say at all, because it is very situational.

• If you download resources from different servers, these requests can slow down the loading of your page (especially with bad DNS on the visit side).
• Querying many files can also slow down page loading, even if they come from the same source and server.
• Keep in mind that not everyone has gigabit internet (or even at the megabit level). Thus, putting everything directly in your HTML file (embedding or using a data URI) will certainly reduce network costs first (fewer requests, fewer headers, etc.).
• In addition (and making the previous paragraph even worse), this will also disrupt many other functions often used to reduce page load time. For example, resources cannot be cached — neither locally, nor by any proxy — and are always transmitted. This can be expensive for both the visitor and the host.

So often, the best way to get close to this is at an intermediate level , if loading time is a problem for you:

• If you use third-party scripts, for example. jQuery, get them from the public CDN used by other pages. If you're lucky, your visitor browser will have a cached copy and will not fulfill the request.

• Your own scripts should be compressed and potentially indexed into a single script (tools like browersify, webpack, etc.). This should not include frequently changing parts, as they will force you to transfer more data more often.

• If you have any scripts or resources that are actually only part of your current visitor (for example, login status, colors selected in user preferences, etc.), everything is fine to put them directly to the parent HTML file if this file is configured one way or another, and transferring them as separate files will not work or will cause additional overhead. A great example of this can be CSRF tokens. Do not do this if you can provide a static HTML file that has been populated / updated by Javascript.

Answer 2

Yes, this will improve page load time, but this method is not often used for the following reasons:

• Debugging will be difficult for this.
• If we want to update it later, it will also not be so simple.
• Separate css and .js files remove these problems.

And to speed up page loading, you can use the BUILD SYSTEM such as GRUNT, GULP, BRUNCH, etc. to increase productivity.