ブログの表示速度の改善をやってみた!

【この記事の所要時間 : 約 3 分

Webサイトのページ表示速度チェックツールまとめ

Googleが検索順位を決定する要素の一つとして、ページの表示速度を盛り込んだことで、速度を気にする人が増えているのかもしれません。表示速度を上げれば順位が上がるというものでもないのですが、速度を向上させることは100%良い事ですので、自分のサイトの速度を知るためのチェックツールをご紹介します。

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

スポンサーリンク
レクタングル(大)広告
  • このエントリーをはてなブックマークに追加
スポンサーリンク
レクタングル(大)広告