Nullyのぶろぐ

仙台で働くエンジニアの日記

Google Page Speedを使って表示速度の改善を測る

Google Page Speedは、入力されたURLのページを動やったら高速化することができるかを分析し、改善すると良いと思われるポイントを重要度別にリストアップしてくれるツールです。

まだLabsなので、今後の改善も気になりますので、ご紹介。

Google Page Speed にアクセスし、ブログなどの表示速度を向上させたいページのURLを入力します。

分析するということなので、お茶でものみます。

且⊂(゚∀゚*)

分析が終わると、このような画面が表示されます。

改善ポイントのランク付け

表示される改善ポイントは重要度別にランキングされています。

これは改善した方がいい!という印。

改善することでよりよくなるよ!という印。

これはやらなくてもいいけど、やっておくことで微力ながら表示速度は早くなるよ。という印。

で、私のブログはというと...

  • 赤が2個
  • 黄色が2個
  • 緑が多数

Rules without suggestionというのは、これらもおすすめですよ;)というもの。

ほとんどの場合やらなくてもいいと思います。

気になる方はどうぞ。程度かと思います。

で、でた結果がこちら。

High priority

  • Leverage browser caching

    • ブラウザキャッシュを利用しましょう

  • Combine images into CSS sprites

    • CSSスプライトで画像の転送量を小さくしましょう

Medium priority

  • Specify a cache validator

Low priority

  • Minify JavaScript

  • Defer parsing of JavaScript

    • Deferを利用して、ドキュメントのロードを妨害しないようにしましょう

  • Inline Small CSS

    • インラインのCSSを小さくしましょう

  • Avoid CSS @import

    • @importの利用は控えましょう

  • Optimize the order of styles and scripts

    • 読み込み順序の最適化

  • Minify CSS

    • CSSの軽量化

  • Optimize images

    • 画像の最適化

  • Minify HTML

    • HTMLコードの軽量化

  • Serve scaled images

    • 画像ファイルの大きさ(高さと幅)を適切な大きさに

  • Put CSS in the document head

    • CSSはドキュメントのheadタグの中に置きましょう

  • Remove query strings from static resources

    • 静的ページからクエリ文字を削除しましょう

  • Specify a Vary: Accept-Encoding header

ということでした。

いずれやります...。

おわりに

Webデータの高速化はかなり前から推されていますが、サイトに合わせた手段をとるようにし、後に備えて下準備しておくのもいいかもしれません。

あまり過渡にやり過ぎて神経質になると疲れますし[wp_emoji2 code="d276" alt="げっそり (顔)"]