表示を速くするには

Kyoto は外部のライブラリを読み込まず、セクションごとに必要なコードをそのセクションの中に持っています。そのため、ページに表示する分のコードしか読み込みません。とはいえ、ストアの表示速度を大きく左右するのは画像・書体・アプリです。以下に、速さを保つためのコツをまとめます。

書体

速度への影響が最も大きいのは、日本語の書体です。 日本語のフォントファイルは欧文よりはるかに大きいためです。テーマ設定 > 書体 で 和文の書体の出どころ を 端末の書体 にすると、日本語のフォントファイルを一切読み込まなくなり、最も速く表示されます。フォントライブラリ を選ぶと、どの端末でも Shippori Mincho と Zen Kaku Gothic New で表示できる代わりに、読み込む量が増えます。
使う書体は必要な数にとどめます。本文の欧文書体 と アクセント書体（ボタン・ラベル・ナビ） に同じ書体を選べば、フォントファイルが 1 つ減ります。
中国語のページは常に端末の書体で表示するため、中国語のフォントファイルは読み込みません。

画像

画像は大きめのものをアップロードしてください（推奨サイズははじめに）。端末に合ったサイズの画像を Shopify が配信します。
Kyoto はページ上部の画像を先に読み込み、下の方の画像は画面に近づいてから読み込みます。最も見せたい画像は、最初のセクションに置いてください。
背景が透明な切り抜きの .png は、通常の写真よりファイルが重くなります。長辺 1600 px 前後に収めてください。
PC 用の画像がかなり横長の場合は、ヒーローの スマホの画像 に別の画像を設定してください。スマホではそちらの画像を読み込みます。

動画

最初のセクションに背景動画を置くと、それがページで最も重いファイルになります。15 秒未満の短いもの・音声なし・圧縮済みにして、カバー画像も設定してください。
Kyoto で埋め込んだ YouTube と Vimeo の動画は、お客様が再生ボタンを押すまで読み込みません。

動き

Kyoto のアニメーションは、スクリプトのライブラリを使わず、ブラウザ標準の機能で動かしています。古いスマホで動作が重く感じる場合は、テーマ設定 > 動き で標準か 控えめ を選ぶか、パララックスなどのスクロール連動を使う をオフにしてください。

アプリ

ストアにコードを追加するアプリは、どれも読み込み時間を増やします。使っていないアプリは削除し、テーマエディターの アプリ埋め込み で不要な埋め込みをオフにしてください。
アプリブロックは通常、配置したページでしか読み込まれませんが、アプリ埋め込みは全ページで読み込まれます。両方の方法があるアプリなら、アプリブロックを選んでください。

セクション

セクションを追加するほど、ページの読み込み量は増えます。使わないセクションを空のまま残さず、非表示にするか削除してください。
商品を多く並べるセクション（商品の棚、タブで切り替えるコレクション、最近見た商品）は、文章中心のセクションより重くなります。表示する商品数（数）は必要な分だけにしてください。

先読み

リンクにマウスを乗せたら次のページを先読み（テーマ設定 > アクセシビリティとその他）をオンにすると、お客様がリンクにカーソルを合わせたり触れたりした時点で次のページの読み込みを始めるため、ページが速く開きます。アプリと競合しない限り、オンのままにしておくことをおすすめします。

速度の測り方

実際のお客様の環境での表示速度は、Shopify の Web パフォーマンスのレポート（オンラインストア > テーマ の レポートを表示）で確認できます。ページ単位で調べるときは、Google の PageSpeed Insights でホーム、コレクション、商品ページを測定してください。スコアは測るたびに多少変わるため、ひとつの数字にこだわるより、変更の前後で比べるのが確実です。