Load website via Javascript (Ajax) without reloading the whole page?

Together,

Currently I'm programming a very complex system which currently consists of a lot of files that run on a URL route. However, I have found that this construction is very slow because I have to reload the same files for each page. Since I have javascript and co. I do not know myself so well.

However, I know that I can load a page via Javascript. However I want to load all content on this page via Ajax. Who still does not know what I mean here are a few websites where I noticed this system: Spotify Web Version, Twitter, Twitch, Youtube.

For example: I'm on the home page (/) and would like to On the news page (/ news). The page should show a loading animation and only the content should change so Navbar and Footer will not be reloaded.

PS: It would be helpful if you post a link or a code for me (which also works, because I bring Javascript myself).

AJAX is explained here:

https://www.w3schools.com/js/js_ajax_intro.asp
https://developer.mozilla.org/de/docs/Web/Guide/AJAX

With AJAX and a lazy-load-principle you can improve the performance of your website, but I would not load everything via JavaScript. Tell in advance, which data can already be sent with the first response (such as header, footer, …) and where it makes sense to split via lazy loading (eg images of a picture gallery, etc.).

In addition, there are a few other approaches that can effectively save resources / load times. This already starts with the compression of images u.a. Resources (CSS Minifying, JS Uglifying, etc.)

Thank you very much will look at the link

I added another paragraph. Helpful tips for improving performance can be provided by https://developers.google.com/speed/pagespeed/insights/?hl=de (or the audit test in Google Chrome Development Tools).