Update 07/09/2021: I have stopped using Grav and migrated to Gridsome.

Noticed how blazingly fast the navigation on the site is? Almost like an SPA isn't it?

That's because every time you click on a link, instead of the browser following the link and loading the page in its entirety, the new page's body is requested using AJAX and rendered by merging with the <head>. Complimenting that is in-viewport link prefetching. All this does is prefetch all links in a visitor's viewport (i.e. links currently visible to the visitor). Combined, these two implementations result in what you experience; a blazingly fast navigation with minimal overhead, even on mobile.

This results in a more fluid navigation, similar to an SPA, without the complexity of an SPA.

Some details

pjax

The first implementation is known as pjax, short for pushState + AJAX. pushState refers to the HTML5 Web API history.pushState which allows the site to add a state to the browser, allowing the change of URL and subsequently the browser's history. I believe it's used by most, if not all, Javascript framework to ensure a proper site navigation.

There are actually many pjax libraries out there, but the most popular and active one is Turbolinks . It' really simple to use, and can be added to an existing site with minimal configuration

Viewport link-prefetching

The second implementation is very simple, in fact, you probably can cook up a simple library yourself in a day if you want to. For me, I used quicklink from the Google Chrome team. Just include and initialize the script, and you're done! All links will visible in the user's viewport will automatically be prefetched. You can of course choose if you to exclude certain links from being prefetched.

Combine both of these with HTTP/2 Server Push + brotli compression + HSTS preload + OPcache , you get stellar performance without breaking the bank.

# pjax

Turbolinks + Quicklink