Creating an empty page and loading it in parts
The larger a web page the more time a browser will take to download it. This may degrade the user experience in case of slow connections or larger pages.
One approach that can be followed is to load only what is absolutely necessary for the user and load the rest of the content when required. There are some sections on a page which are rarely accessed. It will make page loads faster and user experience will improve.
In this recipe we will demonstrate this case with a simple example. We will create a single HTML page and will allow the user to load its one section when required.
Getting ready
Create a folder named Recipe6
in chapter2
directory.
How to do it...
Create a new file and save it as
index.html
. This page will have three sections: head, content, and footer. HTML for the footer will not be created; instead we will load it dynamically. We have also applied some CSS in thehead
section to customize the appearance of the page.<html> <...