簡単に Web サイトを最適化!mod_pagespeed

mod_pagespeed は Google が提供している Web サイトを高速化するためのモジュールです。

これは Apache のモジュール(Nginx も)として動作し HTML ファイル内の CSS や JavaScript を結合することでネットワークアクセスを減らしたりすることで高速化を図ります。

mod_pagespeed の特徴

mod_pagespeed は Google PageSpeed の公式ページでは次のような特徴を有していると記載されています。

  • Automatic website and asset optimization(自動的な Web サイトや資材の最適化
  • Latest web optimization techniques(最新の Web 最適化テクニック
  • 40+ configurable optimization filters(40以上の設定可能な最適化フィルタ
  • Free,open-source, and frequently updated(フリー、オープンソースで頻繁なアップデート
  • Deployed by individual sites,hosting providers,CDNs(CDN 等の利用

[Google PageSpeed > PageSpeed > Optimization > Modules から引用]

mod_pagespeed がしてくれること

mod_pagespeed は Apache モジュールに組み込んでおくだけで自動的に Web サイトの最適化を行います。最適化はページ単位で行われ HTML 自体や asset、つまり CSS・イメージファイル・JavaScript などを対象にします。

HTML の場合各エレメントを小文字に統一したり head タグを結合したります。

また、CSS や JavaScript の場合は初回のネットワークアクセスを減らすことを目的に 1つのファイルに結合したり HTML 内に直接埋め込んだりします(もちろんこれはオプションで ON/OFF を切り替えることが可能です)。

イメージファイルに至っては png を jpeg や webp へ変換したりすることまで可能です。

mod_pagespeed を使った Before/After

上記のように色々と mod_pagespeed の特徴がありますが手っ取り早く理解する為に以下の最適化の例を見た方が早いかもしれません。

HTML の最適化

20130817-001

CSS の最適化

20130817-002

HTML 内に直接定義されている CSS がかなり最適化されています。

イメージの最適化

20130817-003

イメージは遅延読み込み(そのイメージがスクロールされて表示された時に読み込み)に変わりました。

JavaScript の最適化

20130817-004

複数の JavaScript は一つにまとめられました。最初の外部 JavaScript はファイル名の最後に .pagespeed.jc.******.js がついて別のものに置き換えられ、それ以降のものは (mod_pagespeed_*****) に置き換えられ .pagespeed.jc.******.js 内に結合されたコードを見ているようです。

 

No Comments - Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *

*