Is it more efficient to have multiple HTML files or just one big HTML file when making a presentation website

2
votes

I am working on a presentation website that has 7 HTML pages. Is it more efficient to have only one big HTML file than 7 smaller ones?

The reason I'm asking this is because the header, footer and 20% of the body are the same for all pages. The parts that are different have only lists, p and h tags.

Thanks!

2
htmlcssoptimizationweb
Your question is unrelated to javascript, you might want to remove the tag. – regular

2 Answers

1
votes

The performance difference is almost certainly negligible, but by having one html file instead of the seven, you get a smoother ux by changing only what's different with javascript (no page refresh, no flicker). If you want to stick to vanilla js or jquery, put all the html in one file and toggle the elements' css display properties. A cleaner and easier way, though, is to use a framework like Angular. That way you can break the dynamic elements into partials, and you'll end up with eight clean, concise html pages (total html = one page option), and need no javascript at all. The best implementation depends on your specifics, a simple one might look something like: 

<!DOCTYPE html>
<html ng-app>
...
<body ng-init="partial = 'initial.html'>
<!-- header, whatever part of that 20% --> 
<!-- put dynamic elements in separate html files (no html tags or anything, just the divs or whatever -->
<a ng-click="partial = '/path/something.html'">something</a>
<a ng-click="partial = '/path/whatever.html'">whatever</a>
...
<div ng-include="partial">
<!-- rest of that 20%, footer --> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</body>
</html>

I like Angular a lot. It's incredibly powerful, yet you can use it for super small things like this with just one script tag. (If you want the back/forward buttons to work, look into ng-route.) Either way, your presentation will be a lot more impressive if you don't use seven static html files. Cheers

0
votes

The answer is no, it is not efficient to have only one big HTML file compared to 7 smaller files. For if you have many smaller files, let's say for example you have 1 file for header, 1 file for footer, 1 file for body and others. By that you could just easily modify and trace your code by looking on the file on what you want to modify and not by looking on the whole HTML file.