サイト表示速度の改善とその方法

こんにちは、コーディング業務に追われている後藤です。
今回は、サイト表示速度の改善にスポットをあてたお話をしたいと思います。

業務の中で当たり前のようにしていた作業ですが、もう一度、一から考えてみたいと思います。

表示速度を改善する理由

検索エンジン（Google）も、「ユーザーの利便性」を重視しサイトの順位を決定しているため、
よりユーザーにいいサイト、表示が遅いサイトは評価を下げられ、
表示が速いサイトは、評価の高いサイトであると加点するようになりました。

実際には、検索順位の影響だけでなく、離脱率の低下や、 それがECサイトであった場合、
売上に影響するのは言うまでもありません。

注意

• 1.遅いサイトの順位が下がるのではなく、速いサイトの順位が上がる
• 2.上位20%が速いとみなされ、現在そのしきい値は約1.4秒
• 3.HTMLだけでなく画像やCSSを読み込み、JavaScriptの動作が完了するまでの全体の時間が対象となる

まずはサイトが表示される仕組みを理解しよう

高速化を考える上では、まずはWEBを表示する仕組みを理解しないといけません。
サイトが表示されるフローを簡単に説明すると、 ユーザーがサイトにアクセスした時、
プラウザ・WEBサーバー・データベースの間で通信が行われ、
リクエストされたファイル、データを送受信されることでプラウザに表示されます。

表示速度の改善を考える上で、以上のことから、次の2つにわけることができます。

• 1.サーバーの強化
• 2.ソフト面での強化
  • 2-1 サーバーやDBへのリクエストを回数を減らす
  • 2-2 サーバーやDBへの通信量を減らす
  • 2-3 スクリプトなどの実行速度を上げる

サーバーの強化については、サーバーを複数使ったり、高速サーバーを使ったりなど主にハード面の強化になるので、
今回は省略しますが、登録商品の多いECサイトや重いファイルを扱っているサイトは考慮する必要があります。
※後に記載している施策は主に2のソフト面での強化に絞った施策となっています。

表示速度の確認

では、対策する前にまずは、実際の表示速度を確認しましょう。
ここでは、Google推奨のサイト表示速度チェックツール2つご紹介します。

• 1.Googleアナリティクスのサイト速度
• 2.PageSpeed Insights

Googleアナリティクスでサイト速度を確認する方法は、
一度ログインし、行動->サイト速度-からより詳細な解析結果が確認できます。

表示速度を改善する方法

CSSスプライトを使う

使う画像を１つの画像ファイルにまとめて画像リクエスト数を減らそう

jsやCSSファイルを一つにする

SASSなどを使って、ファイルは複数で管理し、吐き出すときには一つのファイルにする。
ファイルリクエスト数を減らせる。 CSSの場合、1つにまとめすぎるのも良くない。
まとめて長くなるんだったら分割しよう。

キャッシュを使う

一度見た画像やCSS、html等のファイルは、自分のパソコンにダウンロードされ残ります。
次回、同じページを訪れた際に、同じファイルをリクエストする必要はないので、
パソコンに残っているファイルや画像を使うとより早く表示が可能になります。

キャッシュの利用は、.htaccessを設置することで有効化でます。
期間を設定することができ、設定した期間は強制的にコンピュータ内に保存された
キャッシュファイルを読み込むことになります。
但し、利用するにはサーバーがApacheモジュールの mod_expires が使えることが前提です。

[plain] <IfModule mod_expires.c> # キャッシュの有効期限を設定 ExpiresActive On ExpiresByType text/css “access plus 1 days” ExpiresByType image/gif “access plus 1 weeks” ExpiresByType image/jpeg “access plus 1 weeks” ExpiresByType image/png “access plus 1 weeks” </IfModule> [/plain]

• 期限は１年以上にしないこと。
• 更新の多いページにはなるべく使わないこと（変わってないよ？と注意されることが多発）
• ファイル名が違うとキャッシュが効かない

jsとCSSを外部ファイル化する

外部ファイル化することで、jsやcssファイルをキャッシュできる。
ただ、ファーストビューの読み込みが遅いと感じられる場合は、
直接HTMLファイル内に<style>で書くとストレスを軽減できる可能性があります。

CSSセレクタの解析時間

CCSセレクタは右から左へ読み込まれるので、子孫セレクタが長いと特定に時間かかるので、
できるだけセレクタは短くなるように努めしょう。
SASSを使っていると知らない内に子孫セレクタが増えてしまう点は要注意。

使用していないスタイルは削除する

無駄なセレクタは、余計な解析の手間がかかりページの表示速度を遅くしてしまう要因となります。

リダイレクトは避ける

リンクなどでのURLの記述の最後には必ず『/』をつける。
『/』を付け忘れても、サイトは表示されるけど実はリダイレクトされている。
2回通信されているので忘れずに『/』をつけよう。

画像ファイルを圧縮する

最近の流行りとして大きい画像を使用することが多いかと思います。
キレイに見せることも大事だけど、ファイルサイズも気になります。
この画像を圧縮するだけでかなりの通信量を減らすことが出来るので、
圧縮ソフトなどで使ってデザインを損なわない程度ギリギリを狙ってアップしまよう。

imgタグにはwidthとheightを指定する

widthとheightが省略されたimg要素は、画像の読み込みが完了するまで自身のサイズを確定できません。
widthとheightを書くことでレンダリングコストを抑制できます。代わりにCSSで指定しても構いません。

コードを圧縮する

「Minify（ミニファイ）」空白や改行を除いたり、ソース内のコメントなどなくしてソースを圧縮すること。
ソースを圧縮するのでとても見にくくなりますが、効果はあります。

まとめ

今回あらためて見直してみると、認識の誤りもあったりと勉強になりました。
実際作業をすると手間がかかり面倒になりがちですが、常日頃から意識して作業するように心掛けましょう。