# Shopifyストアを高速化する方法

### 概要

[PageSpeed](https://help.pagefly.io/manual/pagespeed-optimization/)は、ストアのコンバージョン率において重要な役割を果たします。この記事では、PageFlyの外部要因を含む、ページの読み込み速度を効率的に向上させるための、分かりやすいヒントを提供します。まず、PageSpeedとは何か、そしてそれを測定する方法について基本的な理解を深めましょう。

この記事の内容：

* [概要](https://help.pagefly.io/manual/pagespeed-optimization/#overview)
* [要件](https://help.pagefly.io/manual/pagespeed-optimization/#requirements)
* [PageSpeedの測定方法](https://help.pagefly.io/manual/pagespeed-optimization/#how-to-measure-pagespeed)
* [Shopifyストアの速度を向上させる方法](https://help.pagefly.io/manual/pagespeed-optimization/#how-to-speed-up-your-shopify-store)
* [ユースケース](https://help.pagefly.io/manual/pagespeed-optimization/#use-cases)
* [ヒントとベストプラクティス](https://help.pagefly.io/manual/pagespeed-optimization/#tips-and-best-practices)
* [よくある質問](https://help.pagefly.io/manual/pagespeed-optimization/#frequently-asked-questions)
* [その他のリソース](https://help.pagefly.io/manual/pagespeed-optimization/#additional-resources)

#### PageSpeedとは？

PageSpeedとは、ウェブページがどれだけ速く読み込まれるかということです。ページの読み込みが速いほど、ユーザーエクスペリエンスは向上します。それは、訪問者が読み込みの速いサイトにより長く滞在する可能性が高いためです。

{% hint style="warning" %}
**重要な注意**: PageSpeedは様々な要因に影響されますが、PageFlyはストアのPageSpeedに影響を与えないことに注意することが重要です。
{% endhint %}

### 要件

* **画像最適化ツール**: Shopifyの組み込みツールや、画質を損なわずに画像を圧縮するためのTinyPNGなどのサードパーティオプションなどのアプリを使用します。
* **アプリ監査**: 現在インストールされているShopifyアプリのリストを確認し、不要なものを削除します。

### PageSpeedの測定方法

Googleは、PageSpeedを測定するために2つのツールを推奨しています。

* **Google PageSpeed Insights**（PSI）：この使いやすいツールは、シンプルなスコアとページの速度を向上させるための実用的な推奨事項を提供します。
* **Lighthouse**: より詳細な洞察を提供するLighthouseは、より高い技術的専門知識を持つユーザー向けです。

どちらのツールも、PageSpeedを0から100のスケールで評価し、スコアが高いほどページの読み込みが速いことを意味します。

* 90以上のスコアは良好と見なされ、ページが迅速に読み込まれることを意味します。
* 50から89のスコアは、ページがさらに速く読み込まれる可能性があることを意味します。
* 50未満のスコアは不良と見なされ、ページの読み込みが遅いことを意味します。

どのツールを選択するかは、ニーズと技術的な知識によって異なります。ページ速度の最適化に慣れていない場合は、Google PageSpeed Insightsから始めるのが良いツールです。

### Shopifyストアの速度を向上させる方法

これは、多くの人がウェブサイト、特にオンラインストアを所有する際に尋ねる一般的な質問です。以下は、Shopifyベースのストアの速度を向上させるための4つの重要なヒントです。

* [ヒント1：画像を最適化する](https://help.pagefly.io/manual/pagespeed-optimization/#tip-1-optimize-your-images)
* [ヒント2：不要なアプリを削除する](https://help.pagefly.io/manual/pagespeed-optimization/#tip-2-remove-excess-apps)
* [ヒント3：ページウェイトを削減する](https://help.pagefly.io/manual/pagespeed-optimization/#tip-3-reduce-page-weight)
* [ヒント4：サーバーエラーを修正する](https://help.pagefly.io/manual/pagespeed-optimization/#tip-4-fix-server-errors)

以下のチュートリアルビデオでは、すべてのヒントを案内します。

{% embed url="<https://youtu.be/fhruytZYHt0>" %}

#### ヒント1：画像を最適化する

最初のヒントは画像の最適化です。なぜなら、画像はしばしばページのウェイトの大半を占め、ページウェイトはページの読み込み速度に影響を与えるからです。

**1. ファイルサイズの削減**

画像サイズを削減すると、それらを保存するために必要なスペースの量を減らすことができます。画像サイズを最適化するために、いくつかのツールを使用できます。

* 画像：<https://tinypng.com/>
* GIF：<https://ezgif.com/optimize>

**2. サーバー上での画像サイズ調整**

画像をウェブサイトに追加する際は、それが表示されるスペースのサイズと一致していることを確認してください。例えば、スペースが400ピクセル幅の場合、400から600ピクセル幅の画像を使用します。これにより、ウェブサイトの読み込みが速くなります。

画像がウェブサイトに適したサイズであることを確認する方法がいくつかあります。

* **ツールを使用して画像サイズを調整する**：Adobe Photoshop、GIMP、Canvaなど。
* **遅延読み込みを使用する**：遅延読み込みオプションを有効にすると、画像が画面に入ったときにゆっくりと読み込まれるため、PageSpeedが向上します。この機能は簡単に有効にできます。

1. [ページ設定](https://help.pagefly.io/manual/page-settings/)モーダルに移動します。
2. **最適化**メニューまでスクロールダウンします。
3. 「**画像遅延読み込みを有効にする**」とラベル付けされたチェックボックスにチェックを入れます。

![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-2f70c467a2748116d5fedadec4fca07bb6f28e5d%2FAD_4nXeGUe3BgqlT2J2z4TghbFyhpMDLRK5doesGCHYSdnNS6ShJ8hE0FUPSVYlkS2h_30Z077EUxLTP3DKDvBiJ64PxkUAR2ugEppFChOEj5jy-jo98PK42l_q3RuQrsYiR9KAauBC2ajoMn74oOi9UhywUCp8?alt=media)

* ページ全体に遅延読み込みオプションを適用したくない場合は、以下の手順で個別の[画像要素](https://help.pagefly.io/manual/image-element/)に対して遅延読み込みオプションを選択できます。

1. 遅延読み込みを適用したい画像をクリックします。
2. 一般タブで、**画像読み込み** > **遅延読み込み**を選択までスクロールダウンします。![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-17d2d120b5bc870fdeb734914739d2a62178d556%2FAD_4nXfXlnC7Rtj_kmkzouBauF-wIi4juVQf-OuoVOCQUbOA-P7sq3QU5k1Tjq-Ni6uYe7ccxCoTF9iDIkvp1DOSSjr-SpCf75aby0MzI3lj7UPO9Ebx0swsw1KaO5JYGIsIsh00FLq9ZPdGdO5ElrjiZpxUFOce?alt=media)

* **‘srcset’属性を使用する**：‘**srcset**’属性を使用すると、異なるデバイスに対して異なる画像サイズを指定できます。これにより、ウェブサイトは画面サイズに関係なく、各デバイスに適切なサイズの画像を自動的に読み込むようになります。

‘**srcset**’属性は、imgコードに追加する必要があります。‘**img**’コードはtheme.liquidファイルで見つけることができます。

例：

![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4XdSrAWTOimTRNGeeGYGklTQQTPiqizkhKvnEu0ORHAauQBJW5h7w7YSVarQyy3B1Scs154CgS6sNGS1QT3q6eJ7u__b4StHRDK-1AAZoL6tJzjs0ROYaukuniSTbKJ9znlFSIPh8T8nJnbm234ikey36_-71MnurDhZyI3mV7aEw.png)

以下の手順でtheme.liquidファイルにアクセスしてください：

1. Shopify管理画面から、オンラインストア > テーマに移動します。
2. **…** > コードを編集 > レイアウトフォルダの下にあるtheme.liquidファイルを見つけます。

![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXd7XtcKuiCUvSW1wSUSWLNp_gSVQ1TCD-IKM-yg77q8s-CpBoI3ThcmupGKHN9ka4stqf23AEQAqhjiVxFeBKuDkM5Sv-AzUkmZJdLAS-pl02Gqi6qi6zlVN5lfwbwEKpnrl7WKbEHvLJDtKuhfPXhuAkey36_-71MnurDhZyI3mV7aEw.gif)

**3. 適切な画像形式を選択する**

適切な画像形式を選択するためには、まず使用している画像のタイプ（写真、スクリーンショット、シンプルなグラフィックなど）を特定することが最初のステップです。次に、画像の特徴に基づいて、画像に適切な形式を選択できます。

* 画像に多くの色があり、テキストが少ない場合（例：写真）は、ファイルサイズが小さいJPGを選択します。
* 画像に多くのテキストがあり、色が少ない場合（例：スクリーンショット）は、透明な背景をサポートするPNGを選択します。
* 画像がシンプルなグラフィック（例：ロゴやアイコン）の場合、解像度を損なわずにスケーラブルなSVGを選択します。

#### ヒント2：不要なアプリを削除する

アプリが多すぎると、ウェブサイトの速度が低下する可能性があります。速度を向上させるためには、不可欠なアプリのみを保持するのが最善です。ストアの不要なアプリを削除するには、以下の手順に従ってください。

**ステップ1：不可欠なアプリを決定する**

**Google Analytics**または**Hotjar**を使用して、最もトラフィックとコンバージョンを促進しているアプリを特定できます。

**ステップ2：Shopifyでアプリを削除する**

不可欠なアプリを決定したら、しばらく使用していないアプリを削除します。

1. Shopify管理ダッシュボードで、サイドバーメニューから「アプリ」に移動します。
2. 検索バーで削除したいアプリを見つけます。
3. アプリにアクセスし、Shopifyアカウントからアプリを**アンインストール**または**削除**するオプションを見つけます。![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-7a50fc21a70c6360fb4367228840359bdb1e6292%2FAD_4nXfAz1DUxxaBNYP5VC2obMWIAJHP9dfUfMyQoRtdaBzxwvsXIohNOmNVJfvPHXMLTpMK8P7l398wiRsipjAaO67vlTRrvd_z2sA9kSHE9a8liRsaQmcJvzNiMTGNCuZMH5LIl_bV1LoM4DX24dZHB7vxBQT0?alt=media)

#### ヒント3：ページウェイトを削減する

ページウェイトは読み込み速度のもう一つの重要な要因です。専門家は、ページを4MB未満、理想的には2MB未満にすることを推奨しています。したがって、PageSpeedを向上させるためには、これを考慮に入れるべきです。以下に、ページウェイトを削減するためのいくつかの推奨事項を示します。

**1. レイアウトを最適化する**

従来のEditorではなくGen 2 Editorを使用することで、ページのネストされたコンテナの数を減らすことができ、ページレイアウトをシンプルにしてページ読み込み速度を向上させることができます。

Gen 2 Editorを使用してPageFlyページを作成するための手順は以下のとおりです。

* ステップ1：サイドバーメニューのページタブで、空白ページの作成ボタンをクリックします。
* ステップ2：ドロップダウンメニューから目的のページタイプを選択します。
* ステップ3：Gen 2 Editorを選択し、ページの作成を開始します。

![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXfyDWG2V7hdRBj8AeeZQvvlFi8iAlbg4JYLanSe4HG18asgt4Y9FfVU_4NC7zsoUl8zCOw3_jkAewBu837mYEvhBDN2W83INAEZfE_jgsb45bISQYEs2GTNyHSUqC6R53PqDKGCwhOViPIVwzj8dmhdmbyE)

**2. いくつかの高度な方法**

ページレイアウトの最適化に加えて、ページウェイトを改善するためのより洗練されたいくつかの手法があります。

* theme.liquidファイルから未使用のコードをすべて削除します。
* 軽量なテーマを使用します。
* CSSおよびJavaScriptファイルをミニファイします。
* CSSおよびJavaScriptファイルを結合します。

これらの方法は実装がより複雑で時間がかかる場合があるため、手順について不明な点がある場合は専門家にご相談ください。

#### ヒント4：サーバーエラーを修正する

これらのエラーは、しばしば壊れたコードまたはアプリコードの読み込みによって発生します。エラーを修正する方法は以下のとおりです。

* ステップ1：Chromeウェブブラウザで、Macの場合はCommand + Option + J、Windowsの場合はControl + Shift + Jを押してChrome DevToolsコンソールを開きます。
* ステップ2：ウェブサイト上のいくつかのページにアクセスし、エラー（赤色で表示されます）を探します。
* ステップ3：定義されたエラーを修正します。ただし、エラーが修正されない場合は、[Shopifyエキスパート](https://www.google.com/url?q=https://experts.shopify.com/sellersmith\&sa=D\&source=editors\&ust=1728639144915497\&usg=AOvVaw1waGqt1phcbU_03LFf2vmy)に支援を依頼することもできます。

### ユースケース

* **商品ページの最適化**: 画像を圧縮し、商品詳細を合理化して、ページ読み込み時間を改善し、ユーザーエクスペリエンスを向上させます。
* **チェックアウトプロセスの簡素化**: チェックアウト時の不要なフォームフィールドやステップを減らし、プロセスを合理化して読み込み時間を短縮します。
* **アプリ使用状況の監視と最適化**: 定期的に冗長または未使用のアプリを確認および削除し、Shopifyストアの速度低下を防ぎます。

### ヒントとベストプラクティス

* **画像を効果的に最適化する**: スライドショーよりも単一のヒーロー画像を選択して、ページウェイトを削減し、読み込み速度を向上させます。
* **「モバイルファースト」デザインを取り入れる**: 増加するモバイルトラフィックに対応し、ユーザーエクスペリエンスを向上させるためのベストプラクティスとして、モバイル最適化を優先します。
* **パフォーマンスのバランスをとる**: 不要なアプリの削除やサーバーエラーの修正などの技術的な最適化を追求し、ユーザーエクスペリエンスを損なうことなく、バランスの取れたウェブサイトパフォーマンスを維持します。

### よくある質問

**1. ストアの速度に影響を与える一般的なサーバーエラーはありますか？**

はい、応答時間の遅延、タイムアウト、サーバーのダウンタイムなどの一般的なサーバーエラーは、ストアの速度に著しい影響を与える可能性があります。

**2. ストアのページウェイトが効果的に最適化されているか判断するにはどうすればよいですか？**

ウェブサイトパフォーマンスツールを使用して、ページウェイトと読み込み時間を分析できます。

### その他のリソース

* [PageFlyでページ設定を編集する方法](https://help.pagefly.io/manual/page-settings/)
* [PageFly要素を使用してCRO向けにページを最適化する](https://help.pagefly.io/manual/optimize-pages-for-cro-with-pagefly-elements/)