サムネイル

【Shopifyアプリ】Page Speed Boosterとは? 〜読み込み速度を高速化〜

目次

【Shopify アプリ】Page Speed Booster とは? 〜読み込み速度を高速化〜

Shopify でオンラインストアを運営している方の中には、ページの遷移速度を速くしたいと思っている方も多いと思います。顧客はサイトが重いと、ストアから離れていきます。

  • ページの遷移を速くしたい
  • コンバージョン率をあげたい
  • Page Speed Booster について知りたい

という悩みを持つ方も多いのではないでしょうか。

この記事では、Shopify の運営・構築の業務を行っている株式会社 UnReact が、簡単にページ遷移速度を向上させる「Page Speed Booster」という Shopify アプリを紹介していきます。

【Shopify アプリ】Page Speed Booster とは?

【Shopify アプリ】Page Speed Booster

「Page Speed Booster」とは、ユーザーの次の行動を見越して、ページコンテンツを取得したり、取得の準備をするために無動作時間を使用するようにプラウザに指示するアプリです。簡単に言うと、サイトのページを瞬時に作成するアプリです。インストールするだけで、ページが開くのが遅いという問題を解決してくれます。

例えば、ユーザーがホームページの商品を選ぶところにいるとします。ここから、次に移動するページは商品詳細ページだと予測されます。Page Speed Booster は、ユーザーがまだ考えている間にブラウザにコンテンツを取得させることで商品詳細ページのパファーマンスを向上させることが出来ます。

Page Speed Booster のメリット

以下に「Page Speed Booster」のメリットを挙げていきます。

  • アプリをインストールするだけで機能する
  • コーディングが必要ない
  • コンバージョン率の向上
  • 全てのテーマに対応している

インストールするだけで機能する点は最大のメリットと言って良いでしょう。コードも変更する必要が無いので、liquid の知識がない人でも簡単に使用できます。また、全てのテーマで使用できる点も嬉しいですね。

Page Speed Booster のデメリット

  • 最初の読み込みは速くならない
  • アプリのインストール後にテーマを変更すると機能しない

このアプリは、次に遷移するページを予測します。そのため、URL の読み込み速度は変化しません。2 つ目のデメリットで、もし変更した場合は再インストールする必要があります。再インストールする方法は、この記事の設定で解説します。

料金プラン

「Page Speed Booster」は無料で使用できます。

アプリのインストールと設定

アプリのインストール

検索したらインストールしてください。

アプリのインストール

この画面が表示されたら、インストール完了です。
Page Speed Booster はインストールすると、すでにストアに反映されている状態になります。標準設定を変更してみましょう。標準設定を変更

設定

まずは標準設定がどうなっているのか理解しましょう。インストールしただけでは、商品や写真をホバーした時にページを予測します。この設定以外にも、ボタンをクリックした時や、画面表示をした時に読み込みを開始することが出来ます。
それでは、標準設定を変更する方法を解説します。Dashboard の「How it works」を押してください。

How it works」をクリック

次に、「What do I need to do now?」の「Yes. I want to」にチェックを入れます。チェックを入れると、Intensity を選択する欄が表示されます。Intensity には 3 種類あります。”I want to choose my own time”、”When users press their mouse”、”When the link visible on tye screen”の 3 種類です。I want to choose my own time では、ホバーした時に読み込みを開始します。ホバー時間している時間により読み込むかどうかを Delay on hover に入力します。標準設定では、65 ms 後に読み込みが開始されるようになっています。When users press their mouse では、ボタンをクリックした時に読み込みを開始します。When the link visible on the screen では、画面が表示された時に読み込みが開始されます。お好きな設定にしてみてください。

Intensity を選択

設定が完了したら、「Save」を押して設定は完了です。最後にアプリを再インストールする方法を解説していきます。

「Save」を押して設定

アプリ再インストール

Page Speed Booster をインストールした後に、テーマを変更したら正しく機能しません。再インストールが必要になります。再インストールする方法を理解しましょう。

まず、Page Speed Booster 内の Support から「Why Page Speed Booster doesn't work on my store?」を選択し、文章中の「our guidelines」をクリックします。

「our guidelines」をクリック

最後にテーマの liquid ファイルを編集していきます。コードを追加することでアプリが使用できるようになります。順序としては、自分のストアのテーマを開いて、現在のテーマのアクションからコードを編集するを選択する。新規テンプレートファイルを作成する。ファイルにコードを貼り付ける、です。まず、自分のストアに行きましょう。

Install wizard

現在のテーマのアクションから、コードを編集するを押してファイル管理画面に移動します。コードを編集するをクリック

Template フォルダの下の「新しい Template を作成する」をクリックして、index.haloroar.liquid という新しいリキッドテンプレートを作成してください。

ドロップダウンメニューから、index を選択し、テンプレートの名前を haloroar とします。index とは、ストアのホームページを編集するファイルになります。Page Speed Booster はホームページから移動するページを予測するので index ファイルにコードを貼り付けていきます。index ファイルにコードを貼り付ける

「テンプレートを作成する」をクリックすると、新しい index.haloroar.liquid テンプレートがコードエディタで開きます。このエディタに以下のコードを貼り付けます。

{%- layout none -%}

{%- assign paramKey = 'q' -%}

{%- assign paramValue = '' -%}

{%- capture contentForQuerystring -%}{{ content_for_header }}{%- endcapture -%}

{%- assign pageUrl = contentForQuerystring | split:'"pageurl":"' | last | split:'"' | first | split:'.myshopify.com' | last |

   replace:'\/','/' |

   replace:'%20',' ' |

   replace:'\u0026','&'

-%}

{%- assign pageQuerystring = pageUrl | split:'?' | last -%}

{%- assign parts = pageQuerystring | split:'&' -%}

{%- for part in parts -%}

  {%- assign keyAndValue = part | split:'=' -%}

  {%- if keyAndValue[0] == paramKey -%}

    {%- assign paramValue = keyAndValue[1] | strip -%}

  {%- endif -%}

{%- endfor -%}

{%- assign namespace = 'ra_' | append: paramValue -%}

{

  "metafields": {

    "shop": {{ shop.permanent_domain | json }},

    "settings": {{ shop.metafields[namespace].settings | json }},

    "moneyFormat": {{ shop.money_format | json }}

  }

}

保存をクリックしたら完了です。あまりテーマを変更する機会は少ないと思いますので変更した時に見ていただけると幸いです。

まとめ

今回は、Page Speed Booster についてまとめてみました。

Page Speed Booster を導入することで、簡単にページの遷移速度を上げることが出来ます。コンバージョン率向上にも繋がりますし。アプリは無料で使用することが出来ますので、是非導入してみてはいかがでしょうか。また、Shopify ストアをお持ちでない方は、がありますので、自分のストアを作ってみてはいかがでしょうか。

おすすめ Shopify アプリ

シンプルブログ記事カスタマイズ|お手軽ブログテンプレートのアイコン

シンプルブログ記事カスタマイズ|お手軽ブログテンプレート

シンプルなブログ記事カスタマイズアプリ。ストアにブログ記事カスタマイズ機能を簡単に実現できます。

シンプルお知らせ一覧|お手軽ブログ一覧挿入アプリのアイコン

シンプルお知らせ一覧|お手軽ブログ一覧挿入アプリ

シンプルなお知らせセクションアプリ。ストアにお知らせセクションを簡単に挿入できます。

シンプルブログ記事目次|自動見出し一覧挿入のアイコン

シンプルブログ記事目次|自動見出し一覧挿入

シンプルなブログ目次生成アプリ。ストアにブログ目次を簡単に表示できます。

シンプルスライドショー|お手軽画像スライダーのアイコン

シンプルスライドショー|お手軽画像スライダー

シンプルなスライドショーアプリ。ストアにスライドショーを簡単に表示できます。

シンプル流れるロゴ|流れるロゴリスト挿入アプリのアイコン

シンプル流れるロゴ|流れるロゴリスト挿入アプリ

シンプルな流れるロゴリストアプリ。ストアに流れるロゴリストを簡単に表示できます。

シンプル名入れ|お手軽名前入りギフトオプションのアイコン

シンプル名入れ|お手軽名前入りギフトオプション

シンプルな日本製の名入れオプションアプリ。商品毎に名入れオプションを追加できます。

シンプル在庫数表示|お手軽残りわずか表示のアイコン

シンプル在庫数表示|お手軽残りわずか表示

シンプルな商品の残りわずか表示アプリ。ストアに商品の残りわずか表示を簡単に導入できます。

シンプルギフトラッピング|お手軽ギフト包装アプリのアイコン

シンプルギフトラッピング|お手軽ギフト包装アプリ

シンプルな日本製のギフトラッピングアプリ。カートページに簡単にギフト包装オプションを追加できます。

シンプル購入制限|お手軽注文制限について徹底解説のアイコン

シンプル購入制限|お手軽注文制限について徹底解説

シンプルな日本製の購入数制限アプリ。商品ごとに数量の規制を行えます。

シンプルランキング表示|お手軽ベストセラーのアイコン

シンプルランキング表示|お手軽ベストセラー

購入促進!コレクションにランキングラベルを表示してストアの人気商品をアピール

シンプル顧客タグごとの限定販売|お手軽ロイヤリティのアイコン

シンプル顧客タグごとの限定販売|お手軽ロイヤリティ

日本製の顧客タグごとの購入制限アプリ。特定のタグを持つ顧客への限定販売を簡単に実現できます。

シンプルロゴ一覧|お手軽ロゴリスト表示のアイコン

シンプルロゴ一覧|お手軽ロゴリスト表示

シンプルなロゴリストアプリ。ストアにロゴリストを簡単に導入できます。

シンプル余白調整|お手軽レイアウトのアイコン

シンプル余白調整|お手軽レイアウト

シンプルな日本製の余白調整アプリ。余白を挿入することでページデザインの調整が簡単にできます。

シンプルのし(熨斗)アプリのアイコン

シンプルのし(熨斗)アプリ

シンプルな日本製のしアプリ。のし選択機能を簡単に実現できます。

シンプル画像バナー|お手軽広告バナーアプリのアイコン

シンプル画像バナー|お手軽広告バナーアプリ

シンプルな画像バナーアプリ。ストアに画像バナーを簡単に表示できます。

シンプル Q&A|どこでも FAQのアイコン

シンプル Q&A|どこでも FAQ

シンプルな Q&A アプリ。ストアに FAQ を簡単に導入できます。

シンプルモバイルアプリバナー|スマホアプリに誘導のアイコン

シンプルモバイルアプリバナー|スマホアプリに誘導

シンプルなモバイルアプリバナー。ストアにモバイルアプリバナーを簡単に導入できます。

シンプル流れる告知|流れるお知らせ挿入アプリのアイコン

シンプル流れる告知|流れるお知らせ挿入アプリ

シンプルな流れる告知アプリ。ストアに流れる告知を簡単に導入できます。

シンプル売り切れ非表示|在庫切れ商品の表示変更のアイコン

シンプル売り切れ非表示|在庫切れ商品の表示変更

売り切れ商品を非表示にすることができる日本製アプリ。売り切れになった商品を、自動的に非表示(下書き状態)にすることができます。

シンプルレビュー|お手軽口コミのアイコン

シンプルレビュー|お手軽口コミ

シンプルな日本製のレビューアプリ。レビュー機能を簡単に実現できます。

シンプル会員限定販売|お手軽アカウント必須販売のアイコン

シンプル会員限定販売|お手軽アカウント必須販売

シンプルな日本製の会員限定販売アプリ。商品毎に、ログインしていない顧客の購入制限を行えます。

シンプル会員ランク|お手軽顧客タグ付けのアイコン

シンプル会員ランク|お手軽顧客タグ付け

日本製の会員ランク管理アプリ。条件を達成した顧客に自動でタグを追加し、顧客管理を手助けします。

シンプル Wishlist|お手軽お気に入りのアイコン

シンプル Wishlist|お手軽お気に入り

商品数・お気に入り数の上限なしで使えるお手軽お気に入りアプリ。簡単にお気に入り機能を実現できます。

シンプル Coming Soon|商品ページ発売予告アプリのアイコン

シンプル Coming Soon|商品ページ発売予告アプリ

シンプルな日本製の Coming Soonアプリ。商品毎に発売予告を行えます。

シンプルセット販売|お手軽クロスセルのアイコン

シンプルセット販売|お手軽クロスセル

シンプルな日本製のセット販売アプリ。セット販売でのクロスセルを簡単に実現できます。

シンプル予約販売|受注販売や在庫切れ商品販売で使えるのアイコン

シンプル予約販売|受注販売や在庫切れ商品販売で使える

日本製の予約販売アプリ。予約販売や受注販売、在庫切れ商品販売を簡単に実現できます。

シンプル販売期間設定|商品ごとに期間限定販売のアイコン

シンプル販売期間設定|商品ごとに期間限定販売

シンプルな日本製の期間限定販売アプリ。商品ごとに販売期間を設定することができます。

シンプルVIPプログラム|お手軽VIP会員限定販売のアイコン

シンプルVIPプログラム|お手軽VIP会員限定販売

日本製の VIP 限定販売アプリ。特別な顧客を対象とした限定商品の販売を簡単に実現できます。

シンプルポイント|追加料金なしで使えるお手軽ポイントアプリのアイコン

シンプルポイント|追加料金なしで使えるお手軽ポイントアプリ

シンプルな日本製の定額ポイントアプリ。顧客はポイントをそのまま利用することができます。

おすすめ記事