今回は、多くの店舗オーナーが直面する重要な問題、「サイトの表示速度」について詳しくお話しします。
目次
なぜサイト速度が重要なのか？
「サイトスピードがめちゃくちゃ遅いです。何かいい改善案は？」
このようなお悩みは、ありませんか？実は、サイトの表示速度は単なる技術的な問題ではなく、ビジネスに直結する重要な要素なのです。
驚くべきことに、表示速度が1秒遅れるだけで、コンバージョン率が7%も下がると言われています。つまり、月間売上1,000万円のサイトであれば、70万円もの損失につながる可能性があるのです。これは決して無視できない数字ですよね。
そこで今回は、Shopify初心者でも簡単に実践できる、サイトスピードを改善するための6つの方法をご紹介します。特別な技術は必要ありませんので、今日からすぐに取り組むことができます。ぜひ、ご活用ください。
1. 画像の最適化
サイトの表示速度を遅くする最大の要因の一つが、最適化されていない画像です。ファイルサイズが大きいと読み込み時間が長くなり、ユーザーの離脱を招く可能性があります。これを防ぐために、以下の方法で画像の最適化を行いましょう。
画像圧縮
まず、画像圧縮を行うことで、ファイルサイズを大幅に削減できます。例えば、TinyPNGというオンラインツールを使えば、2MBの画像を500KBにまで圧縮することが可能です。これだけでも、サイトの読み込み速度が大幅に改善されるはずです。
ファイル形式の適切な選択
次に重要なのが、適切なファイル形式の選択です。用途に応じて、以下のように形式を使い分けましょう。
- 写真：JPEG形式
- 図形や透過が必要な画像：PNG形式
- ロゴや装飾的な画像：SVG形式（ロゴはPNGでも可）
たまに全ての画像をPNG形式で保存しているサイトを見かけますが、これは避けるべきです。特に、ページに挿入するイメージ画像や商品画像はJPEG形式を使うことをおすすめします。
WebP形式の活用
最近では、WebP形式が推奨されています。これはGoogleが開発した次世代の画像フォーマットで、JPEGやPNGと比べてファイルサイズを大幅に削減できるというメリットがあります。
WebP画像をHTMLで使用する際は、以下のように<picture>タグを用いて記述します：
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Sample Image">
</picture>この記述により、WebP対応ブラウザではWebP画像が表示され、非対応ブラウザではJPEG画像が表示されます。
ただし、WebP形式を使用する際は以下の点に注意が必要です：
- 一部のブラウザ（特にInternet Explorer）では表示されないため、必ず代替画像を用意しましょう。
- 高度に圧縮されたPNG画像と比較すると、WebPに変換した際にサイズが大きくなることもあります。常に最適な方法を選択することが大切です。
2. アプリの見直し
Shopifyの魅力の一つは、多様なアプリを簡単に追加できることです。しかし、多くのアプリをインストールしていると、サイトの読み込みが遅くなってしまいます。
特に、PageFlyやShogunのようなページビルダー系のアプリは、サイトスピードに大きな影響を与える傾向があります。そのため、以下のステップでアプリの見直しを行いましょう：
- 現在インストールされているアプリの一覧を作成する
- 各アプリの利用目的や利用頻度をクライアントに確認する
- 本当に必要なアプリだけを残し、それ以外は削除または代替手段を検討する
目安として、10個以上のアプリを使用している場合は要注意です。必要最小限のアプリに絞ることで、サイトのパフォーマンスを大幅に改善できるでしょう。
3. コードの見直し
サイトの表示速度を改善するためには、コードの軽量化が不可欠です。複雑なコードや古い技術は、読み込み時間を増加させる原因になります。
コードを最適化する際の基本的な考え方は以下の通りです：
- jQueryを使用している場合は、可能な限り純粋なJavaScriptに置き換える
（例：タブ切り替え機能） - JavaScriptで実現している機能を、可能ならCSSで代替する
（例：スムーススクロールの実装）
また、画像の遅延読み込み（Lazy Loading）を実装することで、必要な情報を優先的に表示できます。以下は、HTML5のloading属性を使用した遅延読み込みの例です：
<img src="large-image.jpg" alt="A large image" loading="lazy">ただし、ファーストビュー（ページを開いた際に最初に表示される部分）の画像には遅延読み込みを使用しないよう注意してください。重要な画像の読み込みが遅れると、むしろユーザーの離脱を招く可能性があります。
4. フォントの見直し
Googleフォントのような外部フォントは、サイトにスタイリッシュな外観を与える一方で、読み込みを遅くする原因にもなります。フォントの最適化には、以下のアプローチを検討しましょう：
- 使用するフォントの種類を最小限に抑える（個人的には最大2種類まで）
- 可能な限り、Shopifyのデフォルトフォントで代替できないか検討する
- フォントファイルをサブセット化し、必要な文字のみを読み込むようにする
フォントの選択は、ブランドイメージに大きく影響するため、クライアントと十分に相談しながら最適な解決策を見つけることが重要です。
5. テーマの見直し
Shopifyのテーマは、サイトのパフォーマンスに大きな影響を与えます。特に古いテーマ（NarrativeやDebutなど）を使用している場合は、最新のOS2.0テーマへのアップデートを強くおすすめします。
OS2.0テーマは、以下のような利点があります：
- 読み込み速度が速い
- 最新のウェブ技術に対応している
- セキュリティが強化されている
- モバイル対応が優れている
基本的には、無料テーマの「DAWN」や、有料テーマの「Prestige」など、人気のあるテーマを選択すれば問題ありません。ただし、テーマの変更は大がかりな作業になる可能性があるため、十分な計画と準備が必要です。
6. preconnectとpreloadの活用
最後に、より高度な最適化技術として、「preconnect」と「preload」の活用をご紹介します。これらの技術を使うことで、さらなる表示速度の改善が期待できます。
preconnectとは
preconnectは、外部のリソース（例：GoogleフォントやCDN）を使用するときに、そのリソースへの接続を事前に準備するためのものです。これにより、リソースの読み込みが早くなり、ページ全体の表示速度が向上します。
例えて言えば、レストランでの食事の準備を事前に整えておくようなものです。予約をしておけば、到着したときにすぐに席に案内され、待ち時間が減りますよね。それと同じように、preconnectを使うことで、ブラウザがリソースの読み込みをスムーズに進める準備をしてくれます。
実際の使い方は以下の通りです。theme.liquidファイルの<head>タグ内にpreconnectタグを追加します：
<head>
<!-- 他のheadコンテンツ -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://cdn.shopify.com">
<!-- 他のheadコンテンツ -->
</head>preloadとは
preloadは、サイトにとって特に重要なリソース（CSSやフォントなど）を、他のリソースよりも先に読み込ませるためのものです。これにより、ページの初期表示がより速くなります。
例えて言えば、スーパーマーケットで買い物リストを作成し、重要な商品を最初にカートに入れるようなものです。そうすることで、効率よく必要なものを手に入れ、無駄な時間を省けます。
実際の使い方は以下の通りです。theme.liquidファイル内でpreloadタグを使って、重要なリソースを優先的に読み込ませます：
<head>
<!-- 他のheadコンテンツ -->
<link rel="preload" href="{{ 'critical.css' | asset_url }}" as="style">
<link rel="preload" href="{{ 'important-font.woff2' | asset_url }}" as="font" type="font/woff2" crossorigin>
<!-- 他のheadコンテンツ -->
</head>まとめ
以上、Shopifyのサイト高速化のための6つの方法をご紹介しました。これらの方法を実践することで、サイトのパフォーマンスを大幅に改善できるはずです。
ただし、最後に一つ注意点があります。年商1,000万円未満のストアに関しては、サイトスピードの改善よりも、以下のような基本的な運営改善に予算を割くことをおすすめします：
- カスタマーレビューの充実
- メールマーケティングの実施
- SNSマーケティングの強化
これらの基本的な施策ができていない状態でサイトスピードだけを改善しても、大きな効果は期待できません。まずは、ビジネスの基礎を固めることが重要です。
サイトの高速化は、ユーザー体験の向上とコンバージョン率の改善につながる重要な要素です。今回ご紹介した方法を参考に、ぜひあなたのShopifyストアを最適化してみてください。
皆さまのECビジネスの成功を心よりお祈りしています！
コメント