大阪のホームページ制作会社 株式会社TREVO
スタッフブログ

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

2020.04.01.

ホームページ制作

twitter Facebook Pocket LINE はてブ

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

大阪のホームページ制作会社TREVOでは、ホームページ制作に関する情報を掲載しています。最短2日で仮サイトを公開するサービスやSEO対策に特化したホームページ制作、オリジナルホームページデザイン、ライティング、リスティング広告、WEBマーケティングなどのサービスをご紹介しています。

経歴: 3DCG制作の専門学校を卒業後、デザイン会社に就職。デザイン会社では主にWEB制作を担当し、旅館の予約システムや商店街にWEBカメラを設置したプロモーション等を展開し、4年後に転職。 株式会社TREVOでデザイン、コーディング、ディレクション、システム開発を担当

twitter Facebook Pocket LINE はてブ

関連の記事

お見積もり