Studioでスマホでの読み込みが遅い場合の対処法

「スマホで確認するとページの読み込みに時間がかかる」「読み込み速度を改善したい」

そんな方も多いのではないでしょうか。

この記事では、Studioでスマホページの表示速度を上げる方法について解説します。

施策をまとめたリストも記載しているのでぜひご自身でサイトを制作する際は確認してみてください。

Studioでよくあるスマホでの読み込みが遅い問題とは？

Studioではページの読み込みにかかる時間が多いことが以前から話題となっていました。特にスマホ版の場合、数秒程度サイトの表示に時間がかかることもあります。

そこで今回は、ページの読み込み速度を改善する方法を紹介します。

施策
ページ内でのbox数を減らす
ページ内の画像数を減らす
外部scriptの読み込み数を減らす
利用していないApps連携を解除する
フォントの種類を減らす
非表示設定を最小限にする

ページの表示速度が遅いことによってユーザーに離脱される可能性が高まります。

特にLPを制作する場合、ページの読み込み速度が離脱率と大きな関係があるため注意が必要になります。

参考：Studioの制作代行を利用する際の流れや費用とは？

ページ速度改善方法

まずはStudioで行うといいサイトの表示速度改善施策について解説します。スマホ版の表示速度が遅いと感じたら以下のリストにある施策を行うと良いでしょう。

ページ内でのbox数を減らす

サイト内で使用するboxの数を減らしましょう。初心者の場合、不要なboxを使用している方も多いのでboxを減らせないかを考えると良いでしょう。また、boxを減らしてもサイトの表示速度が向上しない場合はStudioで構築しやすいデザインに変更することも１つの方法です。

ページ内の画像数を減らす

画像を多用することもサイトが重くなる原因になります。極力画像は最小限に留め、ブロックでも再現できる場合はブロックに置き換えることが大切です。

外部scriptの読み込み数を減らす

Youtubeやiframeの使用も最小限にしましょう。

利用していないApps連携を解除する

不要なAppsは削除するようにしましょう。ワードプレスと同じです。

フォントの種類を減らす

Studioでは数多くのフォントを使用することができます。しかし、フォントが増えることでフォントの読み込みにかかる時間が増えるため、使用するフォントは極力減らすと良いでしょう。

非表示設定を最小限にする

レスポンシブ設定を行う際に要素の非表示機能を使用しますが、これも最小限にしましょう。

ページ速度の測定方法

ページの表示速度を確認するにはGoogle Analyticsを使うと良いでしょう。

「行動」→「サイトの速度」→「ページ速度」の順でサイトの表示速度を確認することができます。

Googleの公式サイトで手順を確認する

ページの表示速度の向上が重要な理由

ここまでページの表示速度を上げる方法について解説しました。

それを踏まえたうえでページの表示速度を向上させる重要性についてここでは紹介します。

SEOに好影響を与える

ページの表示速度を改善することでSEOに対して良い影響を与えることができます。

逆にいうとページの表示速度が遅いと、悪い評価になりかねないということです。

以下の記事でStudioにおけるSEO対策について詳しく解説しているので気になる方はお気軽にご相談ください。

離脱率を低下させる

ページの表示速度が向上するということはサイトにアクセスしたユーザーの待機時間を短縮することに繋がります。

ページの読み込み速度が3秒以上になると40%以上のユーザーが離脱すると言われています。

ページの読み込み速度の参考記事はこちら

まとめ

この記事ではStudioにおけるページの表示速度について解説しました。ユーザー体験に大きくかかわってくることなのでぜひサイト制作を行う際は押さえておくと良いでしょう。

ノクステックではSEO対策の基本を押さえたサイト制作を行っています。詳しく話を聞いてみたいという方はお気軽にお問い合わせください。