ノーコードで作成したページの表示速度は改善できます。特に、画像の容量、外部サービスの埋め込み、不要なアニメーションやアプリを見直すと、コードを書かなくても読み込みを軽くできます。
ただし、サーバー設定やHTML・JavaScriptの細かな最適化など、ノーコードサービス側で変更できない部分もあります。まず速度を測定し、遅くなっている原因に合う対策を選ぶことが大切です。
ノーコードのページ表示速度を改善する主な方法
優先度が高いのは、ページ内のデータ量を減らすことです。次の順番で見直すと、原因を切り分けやすくなります。
- 画像や動画の容量を減らす
- 不要な外部サービスや埋め込みを削除する
- Webフォントやアニメーションを減らす
- ページ内のセクションや要素を整理する
- ノーコードサービスのキャッシュ・高速化設定を確認する
- 改善前後の表示速度を測定する
最初に表示速度を測定して原因を確認する
感覚だけで改善せず、まずは速度測定ツールでページを確認します。パソコンだけでなく、スマートフォンでの表示も測定してください。
測定時は、トップページだけでなく、アクセスが多いページや問い合わせページなども対象にします。ページごとに画像や埋め込み内容が異なるため、トップページが速くても別のページが遅い場合があります。
確認したい主な項目
- ページが表示され始めるまでの時間
- 最も大きな画像や見出しが表示されるまでの時間
- 表示中にレイアウトがずれるか
- 画像・JavaScript・外部サービスの読み込みに時間がかかっていないか
- スマートフォンで操作できるまでに時間がかかっていないか
測定結果に「画像の最適化」「レンダリングを妨げるリソース」「未使用のJavaScript」などの指摘があれば、該当する内容から対応します。数値だけでなく、どのファイルや機能が原因として示されているかを確認してください。
画像を圧縮し、適切なサイズで使う
ノーコードページの改善では、画像の見直しが最も取り組みやすい対策の一つです。高解像度の画像をそのままアップロードすると、画面上では小さく表示していても、元の大きなデータを読み込むことがあります。
画像を軽くする方法
- 表示サイズに合う大きさへ縮小してからアップロードする
- JPEG、WebPなど、内容に合う形式へ変換する
- 写真の品質を下げすぎない範囲で圧縮する
- 使っていない画像をメディア一覧やページから削除する
- ファーストビューに不要な画像は遅延読み込みを利用する
写真はJPEGやWebP、背景が透明な図やロゴはPNGやWebPが適することがあります。利用できる画像形式や自動変換の有無は、ノーコードサービスによって異なるため、管理画面の設定を確認してください。
ただし、ページを開いた直後に表示するメイン画像まで遅延読み込みにすると、かえって最初の表示が遅くなることがあります。最初に見える重要な画像と、下部にある画像を分けて設定するのがポイントです。
動画や外部埋め込みを減らす
YouTube動画、地図、SNS投稿、予約フォーム、チャット、アクセス解析などの外部機能は、ページの表示時に別のサーバーへ接続します。数が増えるほど、読み込むファイルや通信が増える可能性があります。
使っていない埋め込みや、同じ役割を持つサービスがあれば削除します。動画はページを開いた直後から再生するのではなく、画像やサムネイルを表示し、クリック後に読み込む方法が有効です。
外部サービスを見直すときの確認項目
- 本当にそのページに必要な機能か
- ページを開いた時点で読み込む必要があるか
- 同じ機能のタグやアプリが重複していないか
- 使っていない連携コードが残っていないか
- スマートフォンでも正常に動作するか
アクセス解析や広告計測のタグは、目的を確認せずに削除すると計測へ影響することがあります。削除や読み込み方法の変更前に、何のためのタグかを確認してください。
アニメーションと動きのある演出を整理する
ノーコードサービスには、スクロール表示、背景動画、パララックス、要素の拡大などを簡単に追加できる機能があります。しかし、動きのある演出が多いと、追加の処理や画像の読み込みによって表示や操作が重くなることがあります。
ページの印象を保つために必要な演出だけを残し、次のような機能は減らすか停止を検討します。
- 常に再生する背景動画
- 多数の要素に設定したスクロールアニメーション
- 自動で切り替わるスライダー
- 大きな画像を使った視差効果
- ページを開いた直後に表示するポップアップ
アニメーションを停止した後は、スマートフォンで表示や操作を確認します。速度だけでなく、ボタンが押しやすいか、内容が読みにくくなっていないかも見てください。
Webフォントとアイコンの読み込みを減らす
複数のWebフォントや太さの異なるフォントを読み込むと、フォントファイルの分だけ通信が増えます。使用していないフォントの種類や太さを削除し、必要なものだけに絞ります。
見出しと本文で別のフォントを使う必要がなければ、フォント数を減らすことも候補です。日本語フォントは文字数が多く、フォントによってはデータ量が大きくなるため、ノーコードサービスで利用できる標準フォントへの変更で改善する場合があります。
アイコンも、アイコンフォントを一式読み込む設定より、必要な画像だけを使うほうが軽くなることがあります。具体的な変更方法はサービスの機能によって異なります。
ページ内の要素とアプリを整理する
ノーコードでは、ボタン操作でセクションや機能を追加できます。その一方で、削除したつもりの要素や、使っていないアプリのコードが残っていると、ページの読み込みに影響することがあります。
次の項目をページごとに確認します。
- 非表示にしただけのセクションが残っていないか
- 使っていないアプリやプラグインを停止・削除したか
- 同じポップアップやフォームを複数設置していないか
- 不要なスライダーやカルーセルがないか
- ページ内に同じ画像や動画を重複して配置していないか
- 長すぎる1ページ構成になっていないか
長いページを分割すれば、1ページあたりの読み込み量は減らせます。ただし、ページを分けると移動の手間が増えるため、内容のまとまりや読者の使いやすさを見ながら判断してください。
ノーコードサービス側の高速化設定を確認する
ノーコードサービスによっては、画像の自動圧縮、CDN、キャッシュ、遅延読み込み、不要なコードの削減などが提供されています。これらを利用できる場合は、管理画面や公式の設定説明で有効条件を確認します。
ただし、設定名に「高速化」と書かれていても、すべての要素が軽くなるとは限りません。画像だけが対象なのか、JavaScriptや外部アプリも対象なのかを確認してください。
独自ドメイン、無料プラン・有料プラン、公開環境・編集画面で、利用できる機能が違う場合もあります。プラン変更が必要な設定は、料金だけでなく、必要な機能と継続費用を含めて判断します。
ノーコードでは改善しにくい部分もある
画像や外部サービスを整理しても速度が改善しない場合、ノーコードサービスのサーバー処理、テンプレート、共通スクリプトなどが原因の可能性があります。これらは利用者が個別にコードを編集できないことがあります。
次のような問題は、利用者側の設定だけでは十分に改善できない場合があります。
- サービス共通のJavaScriptが多い
- サーバーの応答に時間がかかる
- テンプレートに不要なコードが含まれている
- 外部アプリの読み込み方法を変更できない
- 画像やキャッシュの設定を細かく指定できない
この場合は、別のテンプレートへの変更、機能の少ないプランやサービスの検討、運営元への問い合わせが選択肢になります。ただし、サービスを移行すれば必ず速くなるとは限らないため、移行前に同じページ構成で比較する必要があります。
表示速度を改善するときの実行手順
変更を一度に増やすと、どの対策が効果を出したのか分からなくなります。次の順番で、変更と測定を繰り返してください。
- スマートフォンとパソコンで、対象ページの表示速度を測定する
- 測定結果から、容量の大きい画像や時間のかかる要素を確認する
- 画像を縮小・圧縮し、不要な動画や埋め込みを削除する
- 不要なアプリ、タグ、アニメーション、フォントを整理する
- ページを公開し、同じ条件で再度測定する
- 速度だけでなく、画像の表示、フォーム、計測タグ、スマートフォンの操作を確認する
測定時は、通信環境や端末、ログイン状態などで結果が変わることがあります。1回の数値だけで判断せず、同じページを同じ条件で複数回確認すると、改善の傾向を見やすくなります。
改善後に確認すること
表示速度の改善では、数値を良くすることだけを目標にしないことが重要です。次の機能が正常に動くかを、公開後のページで確認してください。
- メイン画像やロゴが表示されるか
- スマートフォンで文字やボタンが崩れていないか
- フォームを送信できるか
- 動画や地図など必要な埋め込みが動くか
- アクセス解析や広告計測に必要なタグが機能するか
- ページ内リンクやメニューが動くか
画像を圧縮しすぎると画質が落ち、埋め込みを削除すると必要な機能が失われることがあります。速度、見やすさ、機能のバランスを確認しながら調整してください。
まとめ
ノーコードで作成したページでも、画像の圧縮、外部サービスの削減、アニメーションやフォントの整理によって表示速度を改善できます。
最初に測定して原因を確認し、効果の大きそうな項目から一つずつ変更するのが基本です。サービス本体の処理や共通コードなど、利用者が変更できない部分は改善に限界があるため、設定変更で対応できる範囲とサービス側の仕様を分けて判断してください。
