スマホサイトに重要なページの表示スピードを考えた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)をうたっています。要はスマートフォンサイトを評価してインデックスするようになっています。
ホームページ制作をする上で表示スピードを意識したを心がけるようにしましょう。