Studio公開サイトの表示速度を改善する

サイトの表示速度とは、訪問者がページを開いてから、コンテンツを見て操作できるようになるまでの速さです。 表示が遅いと、訪問者はコンテンツが表示されるまで待つことになり、離脱につながります。 この記事では、表示速度の確認方法と、Studioで取り組める改善策を説明します。

表示速度の目安は、PageSpeed Insights などの外部サービスで確認できます。

PageSpeed Insightsは、Googleが定める指標にもとづいてページを評価します。 読み込み速度だけでなく、レイアウトの安定性や操作のしやすさも評価の対象です。

表示されるスコアは参考値です。 実際の体感速度や、すべての訪問者の環境を再現するものではありません。 改善の際は、スコアだけでなく、実際の表示速度や使いやすさが向上するかもあわせて確認してください。

2026年6月11日より、Studioの公開サイト基盤の構成が刷新されました。新基盤は、サーバー側で完成したHTMLを返す構成です。

旧基盤を使用しているプロジェクトでは、新基盤に切り替えると、表示速度や安定性、SEOの面で効果が期待できます。

ページ内のボックスが多いほど、読み込みに時間がかかります。

1ページに詰め込んだコンテンツを複数ページに分けると、1ページあたりの読み込み時間を短縮できます。

画像は、テキストより読み込みに時間がかかります。

ページ全体で画像の数を減らすと、その分だけ読み込み時間が短くなります。

YouTube・Vimeo動画の埋め込みや、カスタムコードで読み込む外部スクリプトは、外部からの読み込みが発生します。 この処理に時間がかかり、表示速度が低下します。

Page Speed Insights の診断結果に改善できる項目として記載がある場合には、削除を検討してください。

Google Analytics（GA）などのApps連携でも、読み込みが発生します。 連携したまま使用していないアプリがあれば、連携を解除して読み込みを減らしてください。

使用するフォントの数や、太さ（ウェイト）、スタイル（斜体）を絞ると、読み込み時間を短縮できます。

Studioで利用できるフォントは、大きく次の2種類です。

システムフォントはサーバーからの読み込みが発生しないため、Webフォントより読み込み時間を短縮できます。

Webフォントは、サービスごとに読み込みの仕組みが異なります。 以下を参考に、プロジェクトに合った方法で調整してください。

2種類のフォントの特徴は、フォント選びと使い分けのヒント：システムフォント（System Fonts）とWebフォントを参照してください。

閲覧者のデバイスに搭載されたフォントで表示するため、Webフォントより読み込み時間を短縮できます。一方で、閲覧者の環境（OSやブラウザ）によって、表示されるフォントが変わる場合があります。

Google Fontsは、サイトで使用しているフォントの種類・太さ・スタイルごとに読み込みが発生します。使用するフォント・太さ・スタイルを絞ると、その分だけ読み込みを減らせます。

TypeSquareのフォントを表示するには、次の2つの読み込みが発生します。使用数を減らす、または使用をやめることで読み込みを減らすことができます。

FONTPLUSのフォントを表示するには、次の2つの読み込みが発生します。使用数を減らす、または使用をやめることで読み込みを減らすことができます。

表示設定で非表示にした要素も、公開サイトのソースには含まれます。そのため、非表示の要素が多いほど読み込みが増えます。

よくあるケースは、レスポンシブ対応をすべて表示設定で行うケースです。タブレット用・モバイル用のセクションを別々に用意して出し分けると、管理や更新の手間も増えます。レスポンシブデザインの設定を適切に行い、不要な表示設定は避けてください。

対策を行っても表示が極端に遅い場合は、チャットサポートに問い合わせてください。

Studioでは、表示速度の改善に継続的に取り組んでいますが、この記事の対策をすべて行っても、現在のシステム仕様を超える大幅な改善は見込めない場合があります。

問い合わせの際は、次の情報を添えてチャットサポートへ送信してください。

サイトスピード