ノーコードサイトの表示速度は、画像・動画・外部サービス・アニメーションを減らし、テンプレートやページ構成を見直すことで改善できます。特に効果を確認しやすいのは、ファーストビューの画像を軽くすること、不要な埋め込みやアプリを削除すること、スマートフォン向けの表示をシンプルにすることです。
ただし、ノーコードサービスではサーバー設定やコードの変更に制限があります。自分で変更できる部分を優先し、それでも改善しない場合は、サービス側の設定やプランの見直しが必要です。
まず表示速度を測定して、遅い原因を特定する
最初に、感覚ではなく測定結果で問題のあるページと要素を確認します。GoogleのPageSpeed Insightsでは、URLを入力すると、スマートフォンとパソコンでの表示速度や改善項目を確認できます。
PageSpeed Insightsで、トップページだけでなく、アクセスの多い下層ページも測定してください。ページごとに掲載画像や埋め込み内容が違うため、トップページの結果だけでは判断できません。
確認する主な指標
| 指標 | 何を表すか | 遅い場合に確認するもの |
|---|---|---|
| LCP | 画面の主要な内容が表示されるまでの時間 | ファーストビューの画像、動画、フォント、サーバー応答 |
| INP | クリックやタップに対する反応の速さ | 外部スクリプト、アニメーション、埋め込み機能 |
| CLS | 表示中にレイアウトがずれる量 | サイズ未指定の画像、広告、埋め込みコンテンツ |
Core Web Vitals（コアウェブバイタル）は、表示・操作・レイアウトの安定性を確認するための指標です。評価の目安は、LCPが2.5秒以下、INPが200ミリ秒以下、CLSが0.1以下とされています。数値だけでページ全体の品質が決まるわけではありませんが、改善箇所を絞り込む材料になります。
Web Vitals（Google Developers）では、これらの指標と評価方法が説明されています。
画像を圧縮し、表示する大きさに合わせる
ノーコードサイトで最初に見直しやすいのが画像です。高画質の写真をそのままアップロードすると、画面上では小さく表示していても、読み込みには大きなデータ量が必要になることがあります。
- ページ内で使っている画像を一覧にする。
- ファーストビューや本文で実際に表示される幅を確認する。
- 表示サイズを大きく超える画像を縮小する。
- 写真はWebPなど、利用中のサービスが対応する形式に変換する。
- 画質を下げすぎていないか、スマートフォンで確認する。
たとえば、幅600pxで表示する画像を、幅3000pxのまま掲載しても、見た目のメリットが小さい一方で読み込みデータは増えます。元画像を残したまま、サイト掲載用の画像を別に作ると管理しやすくなります。
画像の圧縮率や対応形式はノーコードサービスによって異なります。アップロード時に自動圧縮されるサービスでも、元画像の容量が大きすぎる場合は、アップロード前に縮小しておくと改善につながる可能性があります。
ファーストビューの画像は特に優先する
ページを開いた直後に見える大きな画像は、LCPに影響しやすい要素です。トップページのヒーロー画像や大きな背景画像が重い場合は、次の方法を試します。
- 背景動画を静止画に変更する
- 画像の縦横比を保ったまま、不要な余白を切り取る
- 装飾目的の画像を削除する
- 画像を1枚にまとめられる部分は、複数画像の配置を減らす
動画やアニメーションを減らす
背景動画や自動再生動画は、静止画よりもデータ量と処理負荷が大きくなりやすい要素です。表示速度を優先するページでは、最初に表示される範囲から動画を外すか、軽い静止画に置き換える方法が有効です。
動画を残す場合は、ページを開いた直後に自動再生しない、動画の長さを短くする、必要なページだけに設置するなどの調整を行います。動画配信サービスの埋め込みを使う場合も、再生前から読み込まれる関連要素がないか確認してください。
埋め込みや外部サービスを必要なものだけにする
地図、SNS投稿、予約フォーム、チャット、アクセス解析、広告、レビュー表示などの外部サービスは、表示時に別のファイルや通信を読み込むことがあります。数が増えるほど、ページの表示や操作に影響する可能性があります。
次の順番で整理すると、削除の影響を確認しやすくなります。
- ページ内の埋め込みと連携機能を一覧にする。
- 実際に利用されているか、問い合わせやアクセス解析で確認する。
- 使っていない機能や重複する機能を削除する。
- 重要度の低い機能は、別ページへのリンクに置き換える。
- 削除後にPageSpeed Insightsで再測定する。
たとえば、トップページに地図を常時表示する代わりに「アクセスを確認する」ボタンを設置し、地図ページへ移動させる方法があります。ただし、予約や問い合わせに不可欠な機能まで削除しないよう、目的を確認してから変更してください。
ページの情報量と構造を整理する
1ページに多くのセクション、画像、カルーセル、装飾を詰め込むと、読み込む要素が増えます。表示速度を改善するには、ページの目的に直接関係しない要素を減らします。
- 同じ内容を繰り返しているセクションを統合する
- 装飾用の画像や背景を減らす
- カルーセルを静止画1枚または少数の画像にする
- 長いページを目的別の複数ページに分ける
- 表示する必要がない文章や機能を折りたたむ
ただし、折りたたんだだけで、内部の画像や外部機能が最初から読み込まれる場合があります。見た目を隠すだけで読み込み量が減るとは限らないため、変更後の測定が必要です。
フォントと文字の表示方法を見直す
複数のWebフォント、太さ、言語の文字セットを読み込むと、文字の表示に時間がかかることがあります。ノーコードサービスでフォントを選べる場合は、使用するフォントを絞り、太さも必要な種類だけにします。
デザイン上の理由がなければ、標準フォントを使う方法もあります。特に日本語フォントは、英数字用フォントよりデータ量が大きくなりやすいため、見出しと本文で別々のフォントを使う構成は慎重に検討してください。
スマートフォン表示を基準に確認する
スマートフォンでは通信環境や端末性能の影響を受けやすく、パソコンでは気づきにくい遅さが出ることがあります。PageSpeed Insightsでも、スマートフォンの結果を優先して確認します。
実機では、次の点を確認してください。
- ページを開いてから最初の見出しや画像が表示されるまでの時間
- スクロール中に画像や動画が急に表示されないか
- ボタンをタップしてから反応するまでの時間
- 表示途中に文章やボタンの位置がずれないか
- 画像がぼやけすぎていないか
Wi-Fi環境だけでなく、モバイル通信でも確認すると、実際の利用環境に近い判断ができます。
ノーコードサービス側で変更できない場合の対処
ノーコードサービスでは、サーバーの設定、キャッシュ、JavaScriptの読み込み方法などを利用者が変更できないことがあります。その場合は、サイト側で変更できる画像・動画・埋め込み・ページ構成を優先します。
それでも複数ページで速度が遅く、共通する改善項目を変更できない場合は、次の情報を添えてサービスのサポートへ問い合わせます。
- 遅いページのURL
- スマートフォンかパソコンか
- PageSpeed Insightsの測定結果
- 遅くなった時期
- 直前に追加した画像や外部サービス
サービスの料金プランを変更すれば必ず速くなるとは限りません。上位プランを検討する場合は、キャッシュ、CDN、画像最適化、サーバー性能など、速度に関係する機能が実際に含まれるかを公式の仕様で確認してください。
改善後は同じ条件で再測定する
改善の効果を判断するには、変更前と同じURL、同じ測定サービス、できるだけ近い条件で再測定します。1回の測定結果だけでなく、複数回測った傾向と、実機での操作感を合わせて確認してください。
一度に多くの変更をすると、どの対策が効果を出したのか分かりにくくなります。まずは大きな画像、背景動画、不要な埋め込みなど、影響が大きそうな要素を1つずつ見直すのが基本です。
ノーコードサイトの表示速度改善は、画像の軽量化、動画や外部サービスの削減、ページ構成の整理から始めるのが現実的です。最初にPageSpeed Insightsで遅いページと原因を確認し、変更できる要素を優先して対策したうえで、スマートフォン表示を再測定してください。
