【この記事の所要時間 ： 約 3 分】
Googleが検索順位を決定する要素の一つとして、ページの表示速度を盛り込んだことで、速度を気にする人が増えているのかもしれません。表示速度を上げれば順位が上がるというものでもないのですが、速度を向上させることは100％良い事ですので、自分のサイトの速度を知るためのチェックツールをご紹介します。
ということでいくつかのツールを使ってこのブログの表示速度をチェックしてみた！
一番重要そうなのが、Googleの「PageSpeed Insights」であるのでそれにてチェックすると、
・Leverage browser caching
・Enable compression
・Optimize images
・Eliminate render-blocking JavaScript and CSS in above-the-fold-content
の４つが赤いアイコンでワーニングっぽくなっていた。
そこで１つづつ修正を試みた！
まず、「Leverage browser caching」については、画像、CSS、JSにおいてブラウザキャッシュが効くように設定をした。このブログはCoreseverにおいているため mod_expires が利用できない。よって代替手段として、.htaccess で設定する方法を取った。以下を参照した。
HTTPキャッシュヘッダを設定してページの表示速度を改善
次に、「Enable compression」については、CSSとJSを手動にてGZIP圧縮して対応した。以下を参照。
手動でGZIP圧縮してページの表示速度を改善
３つ目が「Optimize images」であるが、JPEG画像のファイルサイズを圧縮する方法を取った。JPEG画像の圧縮に利用したのは、「JPEGmini」である。このツールは無償と有償があり、無償版は圧縮できるJPEG画像の数が限定されていたので、有償版を利用した。
有償版のJPEGminiであるが、Mac用とWindows用があったので、Windows用を購入。
ファイルサイズを圧縮するWindows版「JPEGmini」の使い方とインストール方法
上記のサイトでは、購入してからアクティビティコードが来るまで半日ほどかかって焦ったと書いてあったが、メールですぐに来たのでいい意味で驚いた。
そしてこのブログで使っているJPEG画像を一旦全部ダウンロードし、JPEGmini にて圧縮をかけた後、再度アップロードした。
最後が、「Eliminate render-blocking JavaScript and CSS in above-the-fold-content」であるが、HTMLの上部に必要なさそうなJSがあったので、HTMLの最後の方に移動させた。
まだまだできることはあるんだろうが、大変なので、とりあえずここまで。
一応これで赤いマークのワーニングはなくなり、黄色マークの注意のみになった。
過去にこのあたりの表示改善についてエントリーしたことがあったので、リンクを貼っておく。
ブラウザキャッシュを利用してパフォーマンスチューニング
フロントエンドのパフォーマンスチューニング – Expiresヘッダ追加
YSlow を使ってみようと思う。 – Firefoxアドオン
mod_deflateによるコンテンツのgzip圧縮転送の効果
表示改善系は、レンタルサーバだとできることが限られているなあとは思う。
