Studio公開サイトの表示スピード向上のヒント
Studioで公開したWebサイトの表示スピード改善のために取り組める対策をご紹介します。
サイトの表示スピードとは
サイトの表示速度は、ユーザーがWebサイトにアクセスした際にページが完全にロードされるまでの時間を指します。これはウェブパフォーマンスの重要な側面であり、ユーザー体験に直接影響を与えます。
表示速度が遅いWebサイトでは、コンテンツが表示されるまで訪問者は待つことになり、サイトにアクセスして間もなく離脱することに繋がりかねません。そのため、表示速度はWebサイトのデザインやコンテンツの質と同様に重要です。
注意：
Studioでは表示速度の改善に取り組んでいます。記事内でご紹介する項目全てを実施いただいた場合でも、現システムの仕組みを超えるような劇的な改善は期待できかねます。
実施後も異常にサイト表示速度が遅い場合は、詳細確認いたします。右下の[？]よりチャットサポートへお問い合わせください。なお、以下の情報を最初にご記載いただくとスムーズです。問題の詳細
問題のあるページのURL
記事掲載の対策で実施いただいた項目
ライブプレビューサイトと公開サイトでは、ライブプレビューサイトの方が表示速度が遅くなる仕様となります。サイトの最終的な表示速度は、公開サイトをご確認ください。
サイト表示速度の計測ツール
サイトの表示速度は Page Speed Insights のような外部サービスを使うと容易に測定できます。サイトの読み込み時間を評価し、速度向上のための具体的な提案も提供してくれるため便利なツールです。
計測する場合は、必ず公開サイトのURLで測ってください。ライブプレビューサイトは公開サイトよりも表示速度が遅い仕様です。
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フォントをご覧ください。
フォントの読み込み方法
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にする
5. 非表示設定の多用を避ける
要素の表示・非表示が設定できる「表示設定」の多用は避けましょう。非表示設定にした要素も公開サイト・ページではソース上に表示されており、その分のリソース読み込みが発生します。
よくある改善できる利用パターンは、レスポンシブ対応を全て表示設定で行う使い方です。タブレットやモバイル表示用のセクションを用意し、それぞれで出し分ける使い方は管理・更新面でも効率が悪くなります。適切なレスポンシブ設定を行い、不必要な表示設定の使用を避けましょう。
サイトスピード