Keeping the basic layout same across the web pages

Question

I have a website in which I finished with the basic layout, design, fonts, styles, css etc.

For almost whole of the website, the layout i.e the sidebar, the footer, the background etc. will remain the same. There are custom embedded fonts used as well.

Since this basic layout will remain the same all across the website, I wanted to ask how can I prevent downloading of this content (like side-bar, fonts, or javascript etc.) again for the user, so that the other pages after the start do not take as much time as the start page.

I am sure there would be some mechanism since most of the websites have header/footer/sidebar in common across the pages. My website is in plain html/css, and there's no backend being used. Any ideas?

Answer 1

Your images, fonts, css and other contents will most likely be cached by the client's browser on the first hit, so it will be downloaded just once.

For the html page itself, since you use static html content, the only way I can think of is using AJAX request.