FC2ブログの爆速テンプレートを解析してみた #JavaScript

2019年2月爆速テンプレートが公開された

先日、FC2ブログにおいて「爆速テンプレート」というものがリリースされました。

これはその名の通りタフなニューメキシコの荒野でもブログが爆速で見れるテンプレートで、爆速である代わりにカスタマイズの自由度は通常のテンプレートよりもかなり低い、というもの。

その爆速具合を実際に体感できるようにサンプル用の爆速テンプレートブログが公開されていますので、具体的にどういうものか知りたい方は下記のリンク先で体感してください。

この記事はその爆速さに興味をもってその中身を解析してみた結果をここにまとめておいたものです。

ただし飽くまで外部の人間が簡単に解析してみた結果であるため間違いや事実誤認が予想されます、気が付いた方はコメントにてご指摘ください。

なお ServiceWorker や CacheAPI に関する説明はここではするつもりはありませんが、仮にそれらに関する知識がなくても理解できるように書いたつもりです。

それらについての詳細を知りたい場合は下記のリンク先を参照してください。

最も影響が大きいのがサービスの設計自体が最適化されていることで、具体的には必要な外部ファイルがそもそも少ない。

通常のブログサービスと比較しても1/3から1/5程度のファイル量しか読み込む必要がなく、比較対象をよくあるゴテゴテしたまとめブログにした場合は1/10以下である。

ページを解析してみたところ「Instant Click」というJSライブラリを利用している、これは dev.to などのように、「リンクをマウスオーバーした時点でリンク先を裏で読み込んで、BODYの中身を差し替える」というページ先読み＋pjaxを簡単に実現してくれるライブラリです。

これはリンクをクリックする際に、マウスオーバーしてから実際にクリックが確定されるまで200～300ms程度の時間がかかることを利用してページを先読みするもので、想像以上に体感速度が早く感じられるようになります。

ちなみに記事をスクロールした時の追加読み込みもこの Instant Click で実装しているようです。

ServiceWorker の install 時に9記事分のページのデータが先読みされています。

つまりWEBページにアクセスした時にページの読み込みをしている「裏」で、ServiceWorker が9記事分のデータを取得してキャッシュに追加しているということです。

これはページ読み込み時に外部ファイルにアクセスするより先にDNSの名前解決をしてしまうもので、100～200ms程度の時間がこれにより短縮できるとされています。

ここで気になるのが「キャッシュ更新のロジック」でブログというサービスの都合上、記事内容が更新されたり削除されたりすることは頻繁にありえる。

その場合キャッシュを保持していると、いつまでも更新前の記事を表示することになってしまうので、なんらかのタイミングでキャッシュを更新する必要があるはず。

ServiceWorker はおそらく動的に生成されており、それにより先読みするページの変更とキャッシュの更新を行っているようだが、具体的にどういうタイミングで更新をかけているのかは不明。

ServiceWorker が install されたタイミングで両者の更新を行っているようなので、記事が追加/更新されたタイミングで ServiceWorker が変更されて install -> キャッシュ更新というロジックで更新されるように推測される。

上記が正しければ、要するに ServiceWorker の更新とキャッシュの更新は一体化しており、キャッシュのみを更新するロジックはないということなる。

爆速の主要因は「リクエスト数の少なさ」と「InstantClick」であるように見受けられる。

ちなみにキャッシュは先読みで最初の9記事だけをもっており、それ以外の記事についてはキャッシュを利用せずに純粋に InstantClick でのみ体感速度を向上させているようで、個人的には後続の記事をキャッシュしていないのは意外だった。

またこの記事ではフロント側に寄った説明をしているが、当然バックエンド側やサービスの設計も最適化されてるので、そもそもこのブログなら”素”でも速い。

実際にカテゴリ一覧や月別記事一覧から記事を閲覧するとキャッシュにない記事のはずだが、それでも十分高速さが体感できるので、フロント側の実装が通常のブログのものと同様であったとしても充分に高速であったはずだと思われる。