Search code examples
htmlajaxperformanceserverpagespeed

Load() website content into page from subdirectories

Introduction: I'm writing a website in HTML which loads the header from /header/header.html using jQuery AJAX, and this is working perfectly fine. This site is still a W.I.P., so there's not a lot of traffic (yet).

Problem: Currently the content is getting a bit long, and looks like this:

<body>
load(header/header.html)
wall_of_txt
</body>

So I'm considering splitting the content and load these from /content/ as well, so it would look something like this:

<body>
load(header/header.html,
content/content1.html
content/content2.html
content/content3.html
content/content4.html
content/content5.html)
...
</body>

As each small file is easier to work with. However, I'm far from an expert, so I was curious how thiss would affect the website performance. The content loaded would still be the same size, but given that the content is loaded from so many (10-50) sources, if this would be stressing the server, or if the effect is negliable. Simplified I am asking whether fetch(10kb.html+10kb.html+10kb.html+...) will stress the server with too many requests compared to a single fetch(150kb).

Question: Would my considered solution be a good way to structure the website, or would this affect the performance too much? Alternatively: Is there a better way to structure the website?

Solution

  • It's a good idea to split website in several file and it's a current practise when you want to do a website or a webapplication. Moreover, we can observe comon way to do this :

    1. you can split your html in two files : one file for the comon html include all your pages (template approach) one other two for your specific content.
    2. you can also divide your html by the different part of your site : one for the header, one for the footer, one for the slide column if you have it...

    Fo the performance it is often transparency for the user is you have one or ten files. Moreover if you have only HTML file.

    What can cause performance issue it's if you run script or do some action during the loading of these files. Today we speek about web application that load a lot of library/framework before start displaying thing to the user.

    Some technology like angularjs embed this way in standard in the technology with :

    the creation of functional module in the technology

    the concept of state and road to load dynamically the view that you want to display to the user...

    In the end divide website in several files is a practise very used in the web and there is no better solution to another. You should find your balanced way between two much files and your content logic.