皆様こんにちは！
天気も悪く、寒い日が続いていますね、
いっそのこと雪が降ってくれれば良いよ！
と思ってしまうところです。

こんなに寒くてもオフィスの中では、
良く半そでで動き回ってます。
暖かな環境に感謝ですね！

さてさて、最近サイトの読み込み速度をいろいろと眺めていました。
弊社のサイトもTOPに沢山”もの”がありすぎるために、
御世辞にも速い！といえる状況ではなくなっているのが、
悲しいところです。

ページ表示速度を上げるメリットは？
■ユーザー直帰率を下げる！
・ユーザーがページ表示に待てるのは最大２秒！
・３秒以上読み込みにかかると４０％以上のユーザーは離脱！
そんなにユーザーは待ってくれません！遅い、即直帰ということです。
２秒を超えたら不快感が。シビアな世界なのです。
面白い画像何かが貼ってあったら、１０秒くらい待ってしまいますよ？私は笑
■SEOの観点で効果がある
・微々たるものですが、Googleさんのサイト表示順位が上昇するそうです。

では実際に速度を計ってみましょう♪

(カンタンにこの二つを使っていきましょう)
1.PageSpeed Insights

https://developers.google.com/speed/pagespeed/insights/?hl=ja
URLを入力し、簡単にサイト表示スピードを知ることができます。
0～100 ポイントで評価され、85以上のスコアはそのページの、
パフォーマンスが高いことを示します。

2.GTmetrix

http://gtmetrix.com/
こちらもURLを入力するだけでカンタンにサイト表示することができます。

サイト構成で気をつけるべき点は？

・リンク先ページでリダイレクトを使用しない
・圧縮を有効にする
・サーバーの応答時間を改善する
・ブラウザのキャッシュを活用する
・リソースを圧縮する
・画像を最適化する
・CSS の配信を最適化する
・見える範囲のコンテンツを優先する
・レンダリングを妨げる JavaScript を削除する
・非同期スクリプトを使用する

といった点が上げられます。

中でも、【ブラウザのキャッシュを活用する】
は対策が比較的容易ですので、早めに手を打つことをオススメします。
■実際にキャッシュを活用していない場合は？

“修正が必要:”とのアドバイスをいただけます。

点数的評価で･･･

79％となります。

対策を行うと･･･

86％となりました！

■実際に何が良くなるの？
・静的なリソース(画像,JSファイル,CSSファイル,メディアファイル,pdfファイル等)をブラウザでキャッシュしておけば、複数回サイトにアクセスした場合に表示までの時間を短縮できます。

■対策の方法は？
⇒サーバー側でブラウザのキャッシュを有効にします。

方法１.Expires ヘッダー& Cache-Control: max-age ヘッダーの設定
⇒無条件で適用される「強いキャッシュ ヘッダー」
新しいバージョンがあるか、更新されているかを確認しません。
キャッシュ済みのリソースを使用できる期間を指定します。
キャッシュされた後に有効期限や最大期間に達するか、ユーザーが消去するまで、GETリクエストが発生しなくなります。

方法２.Last-Modifed ヘッダーと ETag ヘッダーの設定
⇒”経験則”を基にキャッシュするかどうか判断する、「弱い」キャッシュ ヘッダーです
キャッシュするファイルが同じかどうかをブラウザが判断する方法を指定してあげます。
・Last-Modifiedヘッダーでは日付、ETagヘッダーでは、リソースを一意に識別する値を用います。
条件付きのGETリクエストを発行し、完全なレスポンスが返るわけではないため、結果として速度は速くなります。

引用元：ブラウザのキャッシュを活用する

■Expiresヘッダーを設定
⇒.htaccess の記述でApache mod_expiresをONにしましょう

まずは、mod_expiresが使えるかどうか判断させましょう。

<ifModule mod_expires.c>

~

</ifModule>

そして、mod_expiresをONにします。

<ifModule mod_expires.c>

ExpiresActive On

</ifModule>

あとは、それぞれのリソースに対する設定を記述しましょう。

<ifModule mod_expires.c>

ExpiresActive On
ExpiresByType text/html “access plus 1 seconds”
ExpiresByType image/gif “access plus 604800 seconds”
ExpiresByType image/jpeg “access plus 604800 seconds”
ExpiresByType image/jpg “access plus 604800 seconds”
ExpiresByType image/png “access plus 604800 seconds”
ExpiresByType image/x-icon “access plus 604800 seconds”
ExpiresByType text/css “access plus 604800 seconds”
ExpiresByType text/javascript “access plus 604800 seconds”

</ifModule>

頻繁に更新されるものについては、注意が必要となりますが、これらの記述でブラウザキャッシュを用いてページの表示を行うようになります。

あもりにも遅いと感じたときに、試してみてはいかがでしょうか。