Increase page transition speed dramatically by Barba.js and Prefetch! [Code and Demo attached]

Barba.js is a powerful JS library that help you integrate pjax to your website easily. It brings much benefit to your website, such as reducing page transition time, unique page transition animation and so on. In this article, we explain the basic implementation of Barba.js. See the article below if you like to know the pros and cons by Pjax.

Previous: What’s pjax and why should we use.
Next: How to Add Page Transition Animation using Barba.js

Objective

The objective is to develop page transition like gif animation below.

Sample HTML and JS

You can see the sample html and js from links below.
See Demo　See Code

HTML Coding

Here is the html code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pjax Demo 1</title>
</head>
<body>
<div class="header">Header</div>
<div class="container">
    <div id="barba-wrapper" class="main">
        <div class="barba-container">
            <div class="page1">
                <p>Main</p>
                <p><a href="./page2.html">Go to page 2</a></p>
            </div>
        </div>
    </div>
    <div class="sidebar">Sidebar</div>
</div>
<div class="footer">Footer</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/barba.js/1.0.0/barba.min.js"></script>
<script src="./pjax.js"></script>
<link rel="stylesheet" href="./pjax.css" />
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<div class="header">Header</div>

</div>

<div class="sidebar">Sidebar</div>

</div>

<div class="footer">Footer</div>

</body>

</html>

Define and Set container area.

First of all, design layout of your website and define the area expected to be updated on each page by Barba.js. Set .barba-container class to the wrapper element, for instance, add .barba-container to main area in the figure.
Include Barba.js
Include Barba.js at the bottom of your page.

<script src="//cdnjs.cloudflare.com/ajax/libs/barba.js/1.0.0/barba.min.js"></script>

1	<script src="//cdnjs.cloudflare.com/ajax/libs/barba.js/1.0.0/barba.min.js"></script>

Now, Html is ready. Move on to JS coding.

JS Coding

(function (Barba) {
    document.addEventListener("DOMContentLoaded", function (event) {
        console.log('pjax start');
        // Barba init
        Barba.Pjax.start();
        // Barba prefetch init
        Barba.Prefetch.init();
    });
}(Barba));

(function (Barba) {

document.addEventListener("DOMContentLoaded", function (event) {

console.log('pjax start');

// Barba init

Barba.Pjax.start();

// Barba prefetch init

Barba.Prefetch.init();

});

}(Barba));

Initialize Barba.js

document.addEventListener("DOMContentLoaded", function(event) {
    Barba.Pjax.start();
});

document.addEventListener("DOMContentLoaded", function(event) {

Barba.Pjax.start();

});

Initialize Barba.js after DOM is ready.

Tips: Difference between DOMContentLoaded and load.
The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading (the load event can be used to detect a fully-loaded page).
developer.mozilla.org

Reduce Your Web Page Transition Time by Prefetch

When Prefetch is enabled, we can start prefetching the new page on the user’s mouseover/touchstart on the link. Since there is a 100-300ms delay during the user hover and the click, it can be used for prefetching new page. You have to be careful when you activate this function because it usually gives more traffic on your server.
But more than 97% of all websites don’t have enough visitors to crush their server. So don’t worry.

Barba.Prefetch.init();

1	Barba.Prefetch.init();

Summary

This time we explain how to integrate Barba.js to your website.
In next article, adding page transition animation to it!

How to Add Cool Page Transition Animation by Pjax(Barba.js)[Demo and Code attached]