Mage-OS 2.1以降に搭載されているキャッシュ機能とは
Magento Open Sourceのフォーク（分派）プロジェクトである、Mage-OS。
2.1以降ではフロントエンド側のパフォーマンス最適化の一環でキャッシュ機能が強化されています。
今回はこれらの機能について紹介していきましょう。
Back/Forward キャッシュ
最初はBack/Forward キャッシュです。
MdNのサイトでは以下のように説明されています。
バック/フォワードキャッシュ、または bfcache とは、モダンブラウザーで利用可能なパフォーマンス向上機能で、以前訪れたページ間の瞬時的な前後ナビゲーションを可能にします。ユーザーがページから移動するときに、そのページの完全なスナップショットを保存しておき、ユーザーがそのページに戻ることを選択した場合、ページを読み込むための通信を繰り返す必要なく、すぐにそのスナップショットを復元できます。
このブラウザ側の仕様をMagentoのテーマで利用できる形で実装したものが本機能になります。
フロント側のテーマに対して、
- ミニカートの更新時に自動でキャッシュ更新
- メニューの自動クローズ
といった機能が実装されています。
体感としてはキャッシュが効いているページの場合はMagento Open Sourceよりもページ移動が早く快適ですね。
機能の設定
この機能の設定は、
ストア > 設定 > 高度な設定 > システム
にあります。
設定は2セクションに分かれており、
- 全般設定
- キャッシュ除外
から構成されています。
全般設定
このセクションでは、
- 機能のオン・オフ
- ユーザー操作に連動したミニカートの自動更新
- メニューの自動クローズ
の挙動を切り替えます。標準ではすべて有効になっています。
キャッシュ除外
このセクションでは、Back/Forward キャッシュの対象から除外するURLを指定します。
デフォルトではなにも設定されていないので、Back/Forward キャッシュをさせたくないURLのパターンを登録しておきましょう。
Speculative loading（投機的プリロード）
次はSpeculative loading（投機的プリロード）です。
MdNのサイトでは次のように紹介されています。
投機的読み込み (Speculative loading) とは、関連するページが実際に訪問される前に、ユーザーが次に訪問する可能性の高いページに関する予測に基づいて、ナビゲーションのアクション（DNS 読み込み、リソースの読み込み、文書のレンダリングなど）を実行することを指します。
Mage-OSのSpeculative Loading機能は、JavaScriptを用いてプリロードを行います。
そのための設定がいくつか用意されています。
設定
Back/Forward キャッシュの次のセクションに、Speculative loadingの設定が用意されています。
Speculative preloadingが有効な場合、ブラウザが自動的にアクセスされそうなURLに対して読み込みなどを行い、サーバー側にキャッシュを作成させます。
結果としてVarnishやFastlyなどにキャッシュがない状態を回避しやすくなり、サイト全体のパフォーマンスがあがります。
ただし、予想を外す可能性もあるため、反対にパフォーマンスが落ちる可能性もあります。
動作モード
現在のMage-OSに搭載されているSpeculative preloadingでは、ページレンダリングに関して
- Prefetch
- Preload
の2モードが用意されています。
Eagerness（積極さ）
投機的読み込みをどの程度積極的に行うかの設定が用意されています。
- Conservative（控えめ）
- Moderate（ほどほど・デフォルト）
- Eager（積極的）
の3段階に切り替えることができます。標準はModerateなので、問題がないようであればこのまま使うのが無難でしょう。
除外設定
Back/Forward キャッシュと同様に、除外URLの設定ができるほか、以下の方法での除外も可能です。
- 除外するファイルを拡張子で指定
- 除外するCSSセレクタ
これらは投機読み込みさせたくないURLやコンテンツ等がある場合に調整するとよいでしょう。
スムースなページ移動
この機能は同じドメイン内にあるページ読み込みを最適化し、ページ移動をスムーズに行えるようにします。
なお、前2つの機能はフロントエンド向けがメインですが、この機能については管理画面側でも利用できます。
また、Back/Forward キャッシュと併用が可能です。
設定
この機能の設定項目は3つです。
- 項目の有効・無効
- 管理画面でも利用可能にするかどうか
- Back/Forward Cacheと併用するか
標準ではすべて有効なので、必要に応じて調整しましょう。
実はMagento Open Sourceにも導入可能
この機能はMageOS_ThemeOptimizationモジュールによって実現されており、コード量もさほど多くありません。
このモジュール自体はMagento Open Sourceにも単体で導入可能となっていますので、既存サイトにも導入しようと思えば一応可能です。
