手間なく簡単にウェブサイトの表示速度を改善して離脱率を低くしよう！

こんにちは、Maromaro佐々木です。

ウェブサイトの表示速度が遅くて改善したい・・・と思っている方多いのではないでしょうか。
今回は手間なくできるサイトの表示速度改善について書いていきます。

画像を適切なサイズで切り出す

大きな画像を小さく表示していたりすると、１ページあたりの通信量が増えてしまうので
表示の遅延につながります。
よく見かけるのが、デジカメで撮った写真そのままの画像を、imgタグで無理やり小さく表示しているサイトを見かけます。
プログラムの都合上や、レスポンシブの都合上などは難しいと思いますが、
難しくとも過度に大きな画像とならないようにも気をつけたいですね。

画像を圧縮する

画像圧縮ですが、ついつい忘れてしまいがちですね。

コーディング時にはJPGなどは80%~60%程度に圧縮したり、PNGなどはPN8とPNG24,32の使い分けを意識していきたいところです。

ブラウザ上で圧縮できるツールでおなじみの
TinyPNGなども有名ですよね。
JPG版のTinyJPGなどもあります。

WordPress使っていてクライアントがアップしちゃう・・・　そんな時は下記のプラグインを使ってみましょう
EWWW Image Optimizer

圧縮してないことは結構ありますので、ウェブサイトコンテンツの性質として圧縮をかけても問題ない
もしくは表示速度の方が重要という事であれば、積極的に圧縮していきましょう。

Javascriptはbodyの最後に書く

headタグの中にJavascriptを書くのが昔ながらのやり方ですが、scriptタグなどの読み込みが終わるまで画面は表示されないため、遅延の原因となります。
Javascriptなどはbodyの最後に記述するのが現在のトレンドになっています。
※ただし、Javascriptの設計によってはウェブサイトの作成時からでないと難しい場合もあります。

ブラウザキャッシュを利用する

初回の読み込みには影響がありませんが、回遊型のウェブサイト等では効果抜群です。

Apacheサーバをつかっている場合は簡単です、基本的にhtaccessに書くだけです。下記の記事など参考に。
キャッシュ設定でサイト表示を3倍速くする.htaccessの書き方

CDNに置き換える

ＣＤＮ（コンテンツデリバリーネットワーク）を利用する。
例えば、jQueryの読み込みや、そのプラグインなどCDNに対応しているものは積極的に利用すると良いかもしれません。
自サーバにリソースを置かないため、サーバの負荷を下げる事にもなりますし、PV数の多いウェブサイトでは有利な方法かと思います。

CSS,JSを圧縮する

初期化ファイルやJavascriptのプラグインなどは圧縮できるようでしたら圧縮しましょう。
PV数の多いウェブサイトの場合には効果があるかと思います。
更新の事を考えると、何がなんでもというのは難しいですが、可能な部分は圧縮しておくと良いと思います。

色々ツールあるかと思いますが、ブラウザ上では下記サイトが参考になります。
Online JavaScript/CSS/HTML Compressor

CSS/JSをなるべく1ファイルにまとめる

CSS/JSの読み込みタグ(link,script)をたくさん書いてしまうと、都度通信が発生してしまい、遅延の原因になります。
こちらも劇的な変化にはならない部分ですが、PV数の多いウェブサイト等では対策したい部分です。

とくに、jQueryなど、全てのページで共通に読み込んでいるものはひとまとめにしてしまっても良いと思います。

DNSプリフェッチを使う

こちらも劇的変化ではない、サポートブラウザ等もありますが
最新ブラウザではサポートされているので、積極的に使いたい機能です。

例えば、Google Analyticsのタグなどの各種解析タグ、画像サーバが別など
色々なドメインから読み込んだリソースを元にウェブサイトが構成されている場合に効果を発揮します。

下記の記事など参考に。
DNSプリフェッチでウェブページの読み込み速度をスピードアップ

いかがでしょうか、ウェブサイトの表示速度改善には色々な手法がありますが
今回は簡単にできる手軽なものだけをピックアップしてみました。