サイトの表示速度は、ユーザーがサイトにアクセスしてからコンテンツを認識・操作できるようになるまでの速さです。表示速度が遅いと、コンテンツが表示されるまで訪問者が待つことになり、離脱につながる可能性があります。デザインやコンテンツの質と同様に、表示速度は重要な実装要素です。
Point：新基盤への切り替えで表示速度が改善します
2026年6月11日より、Studioの公開サイト基盤の構成が刷新されました。
2026年6月11日以前に作成したプロジェクトでは、公開サイト基盤を新基盤に切り替えることで、ページ表示の速度や安定性、SEOの観点で効果が期待できます。
💡基盤切り替えの手順：サイトの公開基盤を切り替える
💡公開サイト基盤の仕様や詳細：Studioの公開サイト基盤
計測ツールの紹介
サイトのパフォーマンスや表示速度の目安は、PageSpeed Insights のような外部サービスで確認できます。
これらのツールは、Googleなど提供元独自の指標にもとづき、読み込み速度だけでなくレイアウトの安定性や操作のしやすさといった要素も含めて評価します。
表示されるスコアはあくまで参考値であり、実際の体感速度やビジター全員の環境を完全に再現するものではありません。サイトの改善を行う際は、スコアの数値だけでなく、実際の表示速度やユーザー体験の向上に役立つかどうかもあわせてご確認ください。
参考： PageSpeed Insights について | Google for Developers
注意：表示速度やユーザー体験を確認する際は、必ず公開サイトで確認してください。ライブプレビューはリアルタイムに変更内容を反映する仕組みのため、公開サイトに比べて表示速度が遅くなります。
表示速度を向上させるための方法
1. ページあたりのボックス数を削減する
ページ内のボックス数に応じて、読み込み時間が長くなります。
１ページに詰め込んだコンテンツを数ページに分散して設置すると、その分１ページあたりの読み込み時間が短縮できます。
2. ページ内の画像数を削減する
画像はテキストデータよりも読み込みに時間を要します。ページ全体で画像数を削減するとその分、読み込み時間が減少します。
3. 動画やカスタムコードなどの外部読み込み数を削減する
YouTube / Vimeo 動画の埋め込みや、カスタムコードでの外部script読み込みが行われる場合、外部情報の呼び込みの処理や読み込みに時間がかかります。Page Speed Insights の診断結果に改善できる項目として記載がある場合には、削除をご検討ください。
4. 利用していないApps連携は解除する
GoogleアナリティクスなどのApps連携でも読み込みが発生します。連携済みで使用していない外部アプリがあれば連携を解除し、不要な読み込みを減らしましょう。
5. フォントを調整する
ページ上のテキスト・リッチテキストボックスに適用するフォント数やスタイル（斜体）、太さ（ウェイト）を調整して、読み込み時間を削減することができます。
Studioで利用できるフォントは大きく分けて2種類あります。
システムフォント（デバイスに搭載されている標準フォント）
Webフォント（フォントサービスが提供しているサーバー配信型のフォント）
システムフォント（System Fonts）は閲覧者のデバイスにデフォルトで搭載されているフォントを使用するため、サーバーからの読み込みが発生するWebフォントに比べて、ページ全体の読み込み時間を削減することができます。
なお、Webフォントはサービスにより読み込み方法が異なるため「フォントの読み込み方法」を参考にプロジェクトにあった方法で調整をご検討ください。
2種類のフォントの特徴や詳細については、フォント選びと使い分けのヒント：システムフォント（System Fonts）とWebフォントをご覧ください。
5-1. システムフォント（System Fonts）
システムフォントは、閲覧者のデバイスにデフォルトで搭載されているフォントを使用します。Webフォントを使用する場合よりも読み込み時間が削減できる利点がある反面、閲覧者の環境（OSやブラウザ）によって、表示フォントが変化する可能性があります。
5-2. Google Fonts（Webフォント）
Google Fontsは、サイトで使用されているフォント（太さ、スタイルも含む）ごとに読み込みが行われます。そのため、使用フォント・太さ・スタイルを削減すると、その分の読み込みが抑えられます。
5-3. TypeSquareフォント（Webフォント）
TypeSquareフォントを表示するには、下記の読み込みが発生します。
TypeSquare自体を利用するためのスクリプトの読み込み
サイトで使用しているTypeSquareフォントごとのフォントファイルの読み込み
このため、読み込みを削減したい場合は下記どちらかの対応をご検討ください。
使用するTypeSquareフォントを削減する
TypeSquare自体の使用をやめてTypeSquareフォントの使用を0にする
5-4. FONTPLUSフォント（Webフォント）
FONTPLUSフォントを表示するには、下記の読み込みが発生します。
FONTPLUSの各フォント読み込み用のCSSを読み込み
サイトで使用されているFONTPLUSフォントファイルの読み込み
このため、読み込みを削減したい場合は下記どちらかの対応をご検討ください。
使用するFONTPLUSフォントを削減する
FONTPLUS自体の使用をやめてFONTPLUSフォントの使用を0にする
6. 非表示設定の多用を避ける
要素の表示・非表示が設定できる「表示設定」の多用は避けましょう。非表示設定にした要素も公開サイト・ページではソース上に表示されており、その分のリソース読み込みが発生します。
よくあるパターンは、レスポンシブ対応を全て表示設定で行う使い方です。タブレットやモバイル表示用のセクションを用意し、それぞれで出し分ける使い方は管理・更新面でも効率が悪くなります。適切なレスポンシブ設定を行い、不必要な表示設定の使用を避けましょう。
注意：表示速度改善の効果
Studioでは表示速度の改善に継続的に取り組んでいますが、この記事で紹介する項目をすべて実施しても、現行のシステム仕様を超える劇的な改善は見込めない場合があります。対策を実施しても異常にサイトの表示が遅い場合は、下記の情報を添えてチャットサポートまでお問い合わせください。
問題の詳細
問題のあるページのURL
この記事で実施した対策項目
関連記事
サイトスピード