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