スマホサイトに重要なページの表示スピードを考えたWebサイトの制作

2020.04.01.

ホームページ制作

株式会社TREVOの月額制ホームページ制作サービス
PR

スマホサイトに重要なページの表示スピードを考えたWebサイトの制作
今や新しく制作されるほとんどのホームページはスマートフォン対応しています。スマートフォン対応するということはそれだけスマートフォンでサイトにアクセスされているという事になります。
スマートフォンでは通信速度や容量制限によりサイト表示するまでに時間が掛かる事があります。そのため、デザインがしっかりてとても見た目もよいサイトでも表示スピードが遅ければユーザーの直帰率が高くなってしまうことがあります。
ホームページはスマートフォン対応にしたものの、サイトの容量が大きすぎて表示スピードが遅くユーザーが離脱するようなことでは制作した意味がありません。また、Googleの検索順位の基準の一つとしてページのモバイル上の表示スピードを取り入れていることを考えれば、サイトスピードの改善はとても重要です。
このTREVOのサイトでも表示スピードを意識したサイト制作をしています。
TREVOのホームページの改良点について

ページの表示スピードが遅くなる原因

コンテンツが重い

webページは画像、テキスト、動画など様々な要素で構成されています。
その中でコンテンツ容量に影響しやすい要素は画像になります。
今主流のレスポンシブWebデザインではパソコンとスマートフォン両方で同じ画像を使うことがほとんです。
そのためパソコンサイズに合わせて作成した画像をスマートフォンで読み込もうとすると容量が大きく表示スピードが遅くなる原因となります。
2017年のGoogleの調査によるとページの表示スピードが3秒かかるだけで32%の離脱になり、5秒になると90%にな跳ね上がると調査結果がでています。

JavaScriptの多様

スライドショー、スマホ用バーガーメニュー、画像のポップアップなど、cssだけでは表現できないことを実現させてくれるJavaScriptですが、多様しすぎるとページを読み込むスピードは遅くなります。

外部ファイルの読み込み

ページを表示するには、画像、JavaScript、cssなど様々なファイルと通信してページを表示しています。
そのため、フォント、JavaScrip、画像などファイル数だけ通信して読み込むことになります。
外部ファイルが多いほど読み込むスピードは遅くなります。

改善方法

画像容量の軽減

制作時はパソコンサイズに合わせたサイズになりどうしても画像容量が大きくなってしまいます。
また、pngで作成した画像はjpegに比べてファイルサイズが大きくなります。
画像サイズを軽くすると画像が荒れてしまいますが、ファイル圧縮を利用すれば比較的綺麗なまま画像サイズを軽くすることができます。
画像を圧縮するには下記のサイトから画像をアップロードすることで圧縮することができます。

JPEG 圧縮
PNG 圧縮

外部ファイルの圧縮

css、JavaScripはファイル内の改行が多いほどファイル容量が大きくなります。
圧縮をすると改行が無くなるため、次にファイルを編集するときに編集しずらくなるのでサーバーにアップするファイルは編集用とは別に用意するといいです。

CSSの圧縮
JavaScriptの圧縮

不要な外部ファイルを削除する

制作時にテストで読み込んだり、以前は使っていたが使う必要が無くなったファイルがそのままコードに残っている場合があるので定期的にチェックして削除しましょう。

サーバーを変える

制作者が出来ることを全て行ってそれでも表示スピードが遅い場合は、サーバーサイドに問題があると考えられます。
サーバの性能が悪いと制作側ではどうしようもありません、その場合サーバーの乗り換えを考えてみてはいかかでしょうか。

まとめ

今のホームページ制作は画像、ファイルの軽量化は必須といっても過言ではありません。
Googleも検索指標としてモバイルファーストインデックス(MFI)をうたっています。要はスマートフォンサイトを評価してインデックスするようになっています。
ホームページ制作をする上で表示スピードを意識したを心がけるようにしましょう。

関連の記事

個人的に運用しているブログを見直し、もう一度書いてみようと思いました。

このブログは弊社の営業日は毎日更新する事を目標にしていますが、個人的に記事を書いていいた2つのブログが更新されないままほったらかしになっていました。 一つは、旧スタッフブログの「TREVOスタッフblog」と猫ブログ「リコと一緒」です。 この二つのブログを忙しさを理由に更新を止めていたのですが、文章[...]

  • Avatar TREVOWP
facebookの書き込みをホームページ上に埋め込めるようになりました。

facebookのタイムライン上にある全体公開記事を自分のブログやホームページ上に埋め込むことが出来るようになりました。 [...]

  • Avatar TREVOWP
ホームページ運営に役立つ共感を得るブログ記事・文章の書き方

文章というのは、人の気持ちを大きく動かすものです。文章ひとつで感動することもあれば、逆に激しい怒りを感じることもあるのです。 ただ、せっかく文章を書くのであれば読み手に「そうそう!」と共感してもらいたいものです。 特に、今の時代はインターネットを通して誰もが文章を公開できるようになりました。 インタ[...]

  • Avatar TREVOWP
no image
iphoneのアップデートに失敗してデータが消える

先日、iphoneのアップデートをしていたらいきなり電源が落ちてデーターが全て消えてしまいました。電話帳や写真、メールも全て消えてしまいその時はぞっとしました。 [...]

  • Avatar TREVOWP