ページの読み込み時間を短縮します。

Squarespaceは読み込み時間を短縮するためにさまざまな対策を講じていますが、サイトにコンテンツを追加すると読み込み速度に影響します。たとえば、多くの画像を含むページは、特にモバイル端末や低速接続の場合、読み込みに時間がかかることがあります。

可能な限り、サイトの各ページを5 MB以下に抑えてください。

このガイドでは、個々のページのサイズをチェックし、ページ サイズを理想的な範囲内に収める方法について説明します。これにより、サイトの読み込み時間が短縮されるはずです。サイトの読み込み時間に関する一般的な問題については、「サイトの読み込みが遅い」を参照してください。

ページの読み込み速度を確認する

サイトの読み込み時間を把握するには、Pingdom、GTmetrix、またはブラウザーに組み込まれている検査ツールなどのツールを使用します。たとえば、Google Chromeでは次の手順を実行できます。

1. [Developer Tools（デベロッパー ツール）] を開きます。
2. [Network（ネットワーク）] タブをクリックします。
3. ページを更新すると、読み込み時間が表示されます。

サイトの読み込み時間を測定するために使用される別のツールとして、GoogleのPageSpeed Insightsがあります。このツールは、CMSを使用して構築されたサイトではなく、ゼロからコーディングされたサイトに最適です。SquarespaceのサイトはCMSを使用しているため、PageSpeed Insightsは偽陰性を返す可能性があります。このツールの使用中にエラーが発生したとしても、必ずしもサイトに問題があるとは限りません。

ページ サイズを確認する

ページの読み込みに予想以上に時間がかかる場合は、ページ サイズを確認してください。

これを行う方法の1つに、Chromeのデベロッパー ツールがあります。使用するには、次の手順に従ってください。

1. Google Chromeを開きます。Squarespaceにログインしている場合は、ログアウトするか、プライベート ブラウザー ウィンドウを開きます。
2. 新しいタブを開きます。
3. [Developer Tools（デベロッパー ツール）] を開きます。ショートカットの方法を以下に示します。

• Mac - ⌘ + Option + J
• Windows - Ctrl + Shift + J

1. 同じタブで、確認するページを開きます。デベロッパー ツールは開いたままにしておいてください。
2. デベロッパー ツールで [Network（ネットワーク）] タブをクリックします。このタブに情報が表示されない場合は、ページを更新してください。
3. 画面下部の合計ページ サイズを確認します。下の例では、「1.0 MB transferred」と表示されています。
4. [Size（サイズ）] 列をクリックして、ページ コンテンツをサイズ順に並べ替えます。これにより、特にモバイルでは、ページの中で最もメモリを消費し、速度を低下させている可能性がある部分が表示されます。サイズが大きくなるコンテンツは、ほとんどの場合、画像です。ファイル名をクリックすると、画像が表示されます。

ページ サイズは5 MB以下を目安にしてください。携帯電話の接続では、最も安全なサイズは1 MBです。ページ サイズが大きい場合は、以下に記載されているページ サイズを小さくするためのヒントを参照してください。

ページ サイズを小さくする

ほとんどのページのコンテンツは同時に読み込まれるため、コンテンツが多いページの読み込みには時間がかかります。ページが5 MBを超える場合は、コンテンツを削除するか画像のサイズを小さくすると、読み込みが速くなります。

ページ上のコンテンツを減らすには、以下の対策を実行します。

• 1ページあたりのブロック数は60以下にします。ページからブロックを削除するには、「ブロックを削除」を参照してください。
• ページに複数のトピックがある場合は、複数のページに分割します。これにより、訪問者が必要な情報を見つけやすくなり、サイトのSEOの向上にも役立ちます。
• 動画の数を減らます。YouTube動画やVimeo動画などの埋め込みコンテンツは、特にモバイル端末では読み込み時間が長くなる可能性があります。動画が複数あるような場合は、動画を別のページに割り振り、リンクを貼って訪問者がそのページに移動できるようにします。
• ブログのランディング ページの読み込みが遅い場合は、投稿の全文を表示するのではなく、ブログの抜粋を使用して各投稿にティーザーを追加します。AMPを有効にして、モバイル端末での投稿の読み込みを高速化することもできます。
• サイトで、スタックされたインデックス ページ（バージョン7.0）を使用している場合は、セクション、特にギャラリーのあるセクションの数を減らします。

画像を素早く読み込めるようにする

サイズの大きい画像や多数の画像が含まれるページは、読み込みに時間がかかることがあります。この場合、いくつかのベスト プラクティスに従うことで、画像の多いページを高速化できます。

画像のサイズを小さくする

画像は500 KB未満とし、幅1500～2500ピクセルの範囲で保存します。画像ファイルのサイズを小さくしてアップロードするには、アップロードする前にサードパーティーの画像編集ソフトウェアを使用してサイズを変更してください。JPEGminiなどの画像圧縮プログラムを使用すると、品質を犠牲にすることなくファイル サイズを削減できます。画像に関するその他のヒントについては、「Webで表示する画像の書式設定を行う」を参照してください。

ヒント: TinyIMG の拡張機能を接続すると、画像サイズを最適化できます。TinyIMG は、サイズの大きい画像を圧縮バージョンに置き換え、画像の品質を維持しながらページの読み込みを高速化します。当社ではサードパーティーのサービスと連携して Squarespace Extensions が適切に動作するよう努めていますが、拡張機能は当社のサポート範囲外です。拡張機能の接続や接続解除に関してのサポートには対応いたしますが、その他の質問については、拡張機能のプロバイダーまで直接お問い合わせください。

ギャラリーに高い負荷をかけない

各ギャラリーの画像数を50枚に制限します。ギャラリー セクション、ギャラリー ブロック、ギャラリー ページは、倉庫ではなくディスプレイ ケースと考えてください。

.jpg画像を使用する

画像ファイル形式は、可能な限り.jpgを使用します。.gifやアニメーションは多用しないでください。

Ajax読み込みを有効にする（バージョン7.0）

サイトがバージョン7.0で、テンプレートがサポートしている場合は、Ajax読み込みを有効にします。Ajaxを使用すると、ページの読み込みがより速く、シームレスに表示されるようになります。ブログ ページやギャラリー ページなど、コンテンツの多いページに最適です。