STUDIO公開サイトの表示スピード向上のヒント
サイトの表示速度は、ユーザーがWebサイトにアクセスした際にページが完全にロードされるまでの時間を指します。これはウェブパフォーマンスの重要な側面であり、ユーザー体験に直接影響を与えます。
ページの表示が遅いWebサイトでは、コンテンツが表示されるまで訪問者は待つことになり、サイトにアクセスして間もなく離脱することに繋がりかねません。そのため、表示速度はWebサイトのデザインやコンテンツの質と同様に重要です。
この記事では、サイト表示速度を向上させるために取り組めることをご紹介します。
💡 STUDIOでは表示速度の改善に取り組んでいます。記事内でご紹介する項目全てを実施いただいた場合でも、現システムの仕組みを超えるような劇的な改善は期待できかねます。
実施後も異常にサイト表示速度が遅い場合は、詳細確認いたします。右下の「？」よりチャットサポートへお問い合わせください。なお、以下の情報を最初にご記載いただくとスムーズです。
問題の詳細
問題のあるページのURL
記事掲載の対策で実施いただいた項目
サイト表示速度の計測ツール
サイトの表示速度は Page Speed Insights のような外部サービスを使うと容易に測定できます。サイトの読み込み時間を評価し、速度向上のための具体的な提案も提供してくれるため便利なツールとなっています。ツールの詳細については以下をご覧ください。
ページあたりのボックス数を削減する
ページ内のボックス数に応じて、読み込み時間が長くなります。
例えば、コンテンツを１ページに詰め込んだ状態から、それらを分割して数ページに分けるなど大幅な変更を加えると、その分１ページあたりの読み込み時間が短縮できます。
ページ内の画像数を削減する
画像はテキストデータよりも読み込みに時間を要します。ページ全体で画像数を削減するとその分、読み込み時間が減少します。
動画やカスタムコードなどの外部読み込み数を削減する
YouTube / Vimeo 動画の埋め込みや、カスタムコードでの外部script読み込みが行われる場合、外部情報の呼び込みの処理や読み込みに時間がかかります。Page Speed Insights の診断結果に改善できる項目として記載がある場合には、削除をご検討ください。
利用していないApps連携は解除する
GoogleアナリティクスなどのApps連携でも読み込みが発生します。連携済みで使用していない外部アプリがあれば連携を解除し、不要な読み込みを減らしましょう。
適用するフォント数を削減する
ページに配置されているテキストボックス・リッチテキストボックスに適用するフォント数、スタイル（斜体）や太さ（ウェイト）の数を減らすとその分読み込みが削減できます。
STUDIOで適用できる Google Fonts 、 TypeSquare 、 FONTPLUS のフォントはそれぞれ読み込み方が異なります。
Google Fonts
Google Fonts は適用中のフォント（太さ、スタイルも含む）のみを読み込みます。そのため、適用フォント、太さ、スタイルを限定したり削減すると、その分の読み込みが抑えられます。
TypeSquareフォント
TypeSquareはフォント適用時に読み込み用のスクリプトをロードします。その後、適用フォントごとにスクリプトによってフォントファイルを適宜ダウンロードするようになります。読み込み用のスクリプトロードも抑えたい場合には、TypeSquareフォントの適用は0にする必要があります。
FONTPLUSフォント
FONTPLUSフォントを適用すると、読み込み用のCSSをロードし、そのCSSによって適用されているフォントファイルを適宜ダウンロードします。
プロジェクト内でフォントの適用を0にするとCSSの読み込みが無くなるため、その分読み込みの削減が可能です。適用フォント数を削減することでも、その分の読み込みを減らすことができます。
適用フォントの整理には、フォントリストでどのページにいくつのボックスにフォントが適用されているかを確認することをお勧めします。
非表示設定の多用を避ける
要素の表示・非表示が設定できる「表示設定」の多用は避けましょう。非表示設定にした要素も公開サイト・ページではソース上に表示されており、その分のリソース読み込みが発生します。
よくある改善できる利用パターンは、レスポンシブ対応を全て表示設定で行う使い方です。タブレットやモバイル表示用のセクションを用意し、それぞれで出し分ける使い方は管理・更新面でも効率が悪くなります。適切なレスポンシブ設定を行い、不必要な表示設定の使用を避けましょう。
サイトスピード