#

2017年
12月10日

2017年
12月10日

Webサイトの表示速度について

#

こんにちは、田中です!
最近は急に寒くなり、改めて冬なんだなと実感させられますね。
そんな季節にタイムリーな記事かもしれません。

表示速度が及ぼす影響

「ユーザの約50%が2秒以内のページ表示を期待し、読み込み速度が3秒以上かかると40%のユーザが離脱する」といわれていて、Googleの公式調査によると(モバイルページでは)
表示速度が1秒から3秒に落ちると、直帰率は32%上昇し
表示速度が1秒から5秒に落ちると、直帰率は90%上昇し
表示速度が1秒から6秒に落ちると、直帰率は106%上昇し
表示速度が1秒から7秒に落ちると、直帰率は113%上昇し
表示速度が1秒から10秒に落ちると、直帰率は123%上昇する
といわれています。具体的な秒数を見てみると「たった数秒でこんな変わるのかよ」と思う人もいると思います。もちろん僕も思いました。しかし実際のところ、表示が遅いなと思ったらすぐ前のページに戻ってしまいます。表示速度が遅いということはWebサイトにとって致命的な欠点だということがわかりました。では、どうすれば表示速度はあがるのでしょうか。

表示速度を上げるには

①HTTPリクエストの回数を減らす

HTTPリクエストとは、閲覧者がサーバ上のHTMLファイルや画像ファイル等、すべてのファイルに対しアクセス(ダウンロード)することです。この回数が減れば、閲覧者側がWebサイトのデータをサーバから持ってくる回数が減るので、より早くWebサイトを表示することができます。

主な方法
❶CSSスプライトを使う
CSSスプライトとは、複数の画像をひとつにまとめて、CSSでポジションを指定して表示させることです。まとめた画像だけをサーバからダウンロードするので、リクエスト回数を減らすことができます。
❷@importを使わない
たとえばcssを2つ読み込むとき、片方のcssに@importを使ってもう片方のcssを読み込むより、ソースコードのlinkで2つのccsを読み込むほうが表示速度は上がるそうです。ソースコードでcssを読み込むときは、ほぼ同時に読み込めるのに対し、@importを使う場合は、1つ1つ読み込むので表示速度は遅くなってしまいます。(リクエスト数は関係ない)

②画像を最適化する

使用している画像を圧縮して、軽量化することです。
実際にPNG画像を圧縮した結果、11.9KBから3.3KB、約72%も軽量化できました。その分、早く読み込むことが可能です!

③css、jsを軽量化する

cssやjsの空白や改行をなくします。既存のサービスやツールを使って、俗に言う「~.min.js」のような形にします。コード量が減るので読み込みが早くなります。また、複数のcssやjsファイルを結合させて、1つのファイルにすることも可能なようです。

④ブラウザキャッシュを使用可能にする

キャッシとは、表示したWebサイトのデータを一時的にコンピューターに保存する機能です。 次に同じページにアクセスしたときは保存されたデータを参照するのですばやく表示できます。
初回のアクセスでは意味がないので、しっかり表示速度を上げておく必要があります。

⑤(WordPressdでは)プラグインの数を減らす

複数のプラグインを使用しているとサイトが重くなってしまうので、必要のないプラグインは消して、できるだけプラグインの数を減らす必要があります。また、プラグイン同士の相性が悪く、不具合が生じてしまう可能性も高くなります。

今回で、いかに表示速度が重要かが少しですがわかりました。Web上でなにかをするには必ず関係してくる問題なので、この知識をいかして制作していきたいと思います。
ありがとうございました。

関連

Comments