コードを1行追加するだけ！Shopifyを高速化する方法
こんにちは。代表兼CTOの高崎です。
少しずつうだるような暑さから開放され始めた日々ですが、皆様お元気でしょうか。
さて、Shopifyでオンラインショップ運営しているけど、サイトの速度が遅い、、という悩みが、私たちの会社に多く寄せられます。
もちろんサイトごとにコードの内容は変わるので、最適な提案はコードを読んでみないと言えませんが、ここではどんなサイトにも共通して言えるアドバイスを書きたいと思います。
また弊社ではShopifyテーマ開発の入門書を出しています。
オリジナルShopifyテーマを作るためのノウハウがギュッと詰まった一冊になっておりますので、お持ちでない方はぜひこちらよりご購入くださいね。
目次
サイト高速化と売上の関係
スタンフォード大学の研究によれば、サイト表示が0.1秒遅くなると、売り上げが1%減少し、1秒高速化すると10%の売上が向上すると言われています。ここからもサイト高速化の重要性がわかりますね。
それでは、具体的な対策に入っていきましょう。
ヘッドタグ内に1行追加するだけでサイトが速くなる外部ドメイン先読みタグ、preconnectを活用する
Shopifyにアップロードした画像やPDFなどのファイルは、Shopify側で自動で高速な配信を行うCDNという配信サーバーに置かれ、そこから配信されます。
しかしながら通常ブラウザは、CDNを始めとしたアクセスしているサイトの外部にあるドメインからファイルを読み込みする際に余分な時間を費やします。
それを解消するためにShopifyサイトのhead
<link rel="preconnect" href="https://some-external-domain.com">Liquidでサイトで作っている場合、ShopifyのCDNへの先読みは自動で行われますが、Webフォント、サイト分析タグやWeb広告のためのタグなど、なにかしらの理由で外部ドメインからファイルを読み込まなければいけない場合、上記コードの
https://some-external-domain.comの部分をそのファイルが置かれている外部ドメインに置き換えて挿入すると、高速化に繋がります。
ヘッドタグ内に重要なファイルを先読みするprelaodタグを活用する
上記preconnectedタグが外部ドメインを先読みするのに対し、prelaodタグはJSやCSSなどサイト内で重要なファイルを先読みします。
具体的には<head>
{{ 'script.js' | asset_url | preload_tag: as: 'script' }}
{{ 'style.css' | asset_url | stylesheet_tag: preload: true }}サードパーティ製のアプリがShopifyテーマのコードを汚染していないかチェックする
テーマ自体には問題ないけど、Shopfiyアプリと呼ばれるサードパーティのアプリのコードが高速なページ表示を邪魔してしまっている事例をよく見かけます。
Shopifyの専門家に相談してなるべく信頼できるアプリのみを使うのが一番ですが、以下のことに気をつけていただければと思います。
1.以前試したけど使わないことにしたアプリのコードがテーマに残っていてサイトを遅くしていないかのチェック。
Shopifyテーマのコードを改変、追加するようなアプリを試用する場合、事前にテーマのバックアップをとっておき試用した後導入しないことが決まったら、もとのテーマのコードに戻しておくことに気をつけていただければと思います。
可能であればGitHubをはじめとしたサイトに加えた変更をすべて記憶しておくバージョン管理ツールの導入をおすすめします。
2.LPを自由にデザインできる系のアプリを入れている場合、そのアプリでやっていることをShopify純正の機能に置き換えられないか検討する
ノーコードでLPを自由にデザインできるアプリは非常に便利ですが、そこから生成されるコードのせいでページが遅くなることがあります。
ある程度LPのフォーマットが固まったら、Shopifyの専門家に相談してそれをShopifyのテーマセクションやメタオブジェクトなど純正の機能に置き換えることも検討いただければと思います。
私達の会社ではShopifyの技術コンサルティング、より高速な次世代型ECヘッドレスコマースを利用したサイト構築も承っておりますので、ご興味のお有りの方はこちらよりご相談ください。
それでは、素敵なECライフを！