画像の最適化
サイトの表示速度を遅くする最も一般的な原因の1つは、大きな画像ファイルです。Shopifyでは、画像を自動的に最適化する機能がありますが、さらに最適化することができます。画像をWebP形式に変換することで、画像のサイズを大幅に削減できます。
画像をWebP形式に変換する方法はコチラ。
スライドショーを止める
スライドショーは複数の画像を設定して、同じ箇所で画像を切替えられる機能です。複数の画像を設定するので、読み込むデータも多くなり、表示するまでに時間が掛かります。大きな画像を設定するので、画像自体のデータサイズも多くなりがちです。スライドショーは何となく見栄えが良いのでTOPページの最上部に採用されがちですが、ページ表示スピードを遅くする原因の１つにもなりやすい。可能であればバナー画像を使いましょう。
レイジーロードを採用する
レイジーローディングとは、重要でないリソース（画像など）の読み込みを必要なときまで遅らせる技術です。例えばサイトへアクセスしたときに、最初に画面に表示されるべき画像は、すぐに読み込んで表示した方が良いです。しかしサイトページの下のほうにある画像はすぐに表示する必要がありません。ユーザーがページを下にスクロールした時点で読み込みを開始して表示させる方が効率的です。これにより、初期読み込み時間を短縮し、ページの表示を高速化することができます。
レイジーロード機能を実装する方法はコチラ。
不要アプリの削除
Shopifyアプリを使用している場合、アプリの数が多くなるとサイトの表示速度が低下することがあります。使用していないアプリを削除することで、サイトの表示速度を向上させることができます。使っていないアプリが無いか確認しましょう。とりあえずインストールしていても活躍する機会がほとんど無いアプリも削除見当してみてください。
以上の方法を試すことで、Shopifyのサイト表示スピードを改善できる可能性があります。専門的な知識がなくても手っ取り早く実行できる内容なので、是非取り組んでみてください。ただし、サイトの表示速度には多くの要因が影響するため、ほとんど改善されない場合もあります。そういった場合にはShopifyサポートに連絡することをお勧めします。
サイト表示スピードを改善させるアプリ３つ
Booster: Page Speed Optimizer
無料なのでひとまず試すにはこちらのアプリが良いでしょう。レビュー数も多いですし最近のレビューもある。オンラインストア2.0にも対応している。無料なのに24時間年中無休のライブチャットサポートがあるのもすごい。ただ英語なのでChatGPTや翻訳アプリを使ってコミュニケーションを取ることになります。
こちらからインストールできます。
Hyperspeed: Extreme Page Speed
こちらは課金が必要ですが、そこそこのレビュー数があるので信用できそうです。最近のレビューもあります。特徴として無制限の画像圧縮機能があります。勝手に画像圧縮してくれるのはありがたいですが、ストアによっては圧縮された画像が荒くなってしまうこともある。ひとまず試してみて画像が問題なければ使うのが良いでしょう。
こちらからインストールできます。
