Webページを素早く表示したいというニーズは強くあります。AMPのような技術しかり、PWAのCache APIもそうです。遅くて良いことなどありません。とにかくWebページは高速に表示すべきです。そしてそのためのライブラリも多数あります。 今回紹介するbarba.jsは高速、かつスムーズなページ遷移を可能にするライブラリです。

barba.jsの使い方

利用例です。ページが切り替わる際に真っ白な表示になることがありません。

barba.jsはプリフェッチを使ってリンク先のコンテンツを読み取り、現在のページと差し替えることでスムーズな表示を実現します。類似の技術はフレームワークで実現されていることが多いですが、任意のWebサイトに組み込める点においてbarba.jsの需要は多そうです。

barba.jsはTypeScript製のオープンソース・ソフトウェア（MIT License）です。

barba.js - User guide barbajs/barba: Create badass, fluid and smooth transition between your website’s pages.