Googleが提供しているサーバーに組み込む、mob_pagespeedを入れてみた。
mob_pagespeedは、画像、HTML、Javascript、CSS、をWEBページの表示が早くなるように、自動で最適化してくれるモジュールです。
実際に導入してみる
使っているサーバーはkagoyaVPSのApache（centOS）なので、CentOS用のパッケージをインストールします。
$ sudo yum install at $ wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_x86_64.rpm $ sudo rpm -U mod-pagespeed-stable_current_x86_64.rpm $ sudo /sbin/service httpd restart
設定ファイルは /etc/httpd/conf.d/pagespeed.conf です。
初期設定では、キャッシュファイルや作業用の一時ディレクトリは /var/www/mod_pagespeed 以下に作成されます。
これはpagespeed.conf で変更可能です。
また、画像等を変更した際には、mod_pagespeedでキャッシュが残っているので即時反映されません。一度キャッシュをクリアする必要があります。
キャッシュのクリア（purge）方法は以下です。
# touch /var/cache/mod_pagespeed/cache.flush
pagespeedを一瞬OFFにしたいって時は、URLに?ModPagespeed=offをつければ、OFFにした状態のサイトが確認できます。
もしくは、?PageSpeed=off でもOKです。
また、色々な設定がpagespeed.conf から可能です。
Googleのpagespeed_modの様々な設定は、以下のフィルターで設定できます。
デフィルトで利用されているものを、OFFにするには下記の記載でOKです。
ModPagespeedDisableFilters フィルタ名
逆にOFFになっているものを利用するには、下記の記載方法でOKです。
ModPagespeedEnableFilters フィルタ名
| フィルタ名 | 初期設定 | ||
| add_head | Html | Yes | <head>がない場合に<head>をつける |
| combine_heads | Html | No | 複数の<head>が存在した時に、一つにまとめる |
| inline_import_to_link | Html | Yes | <style> タグで CSS @importsだけしている場合、 <link>タグに置換える |
| outline_css | Css | No | HTML内のCSS記述が大きい場合、キャッシュ可能な外部ファイルにする |
| outline_javascript | Js | No | HTML内のjavascript記述が大きい場合、キャッシュ可能な外部ファイルにする |
| move_css_above_scripts | Html | No | CSSを<script>タグよりも上に配置する |
| move_css_to_head | Html | No | CSSファイルを <head>タグの中に配置する |
| combine_css | Css | Yes | 複数のCSSファイルを一つにまとめる |
| rewrite_css | Css | Yes | CSSファイルの、空白やコメントの削除。可能な場合は、CSSでよんでいる画像も、キャッシュの画像に置換える |
| fallback_rewrite_css_urls | Css | Yes | 解析・縮小ができないCSSファイルでも、参照されるリソースは書き換える |
| rewrite_style_attributes | Css | No | スタイル属性内（タグの中に書かれた style=”hoge”）も、設定されたフィルターに基づいてリライトする |
| rewrite_style_attributes_with_url | Css | Yes | スタイル属性内（タグの中に書かれた style=”hoge”）に記述されたURLも、設定されたフィルターに基づいてリライトする |
| flatten_css_imports | Css | Yes | @ImportのCSSファイルを、読み込んで1つのファイルにする |
| prioritize_critical_css | No | Replace CSS tags with inline versions that include only the CSS used by the page. | |
| make_google_analytics_async | No | Google analiticsの同期タグがあった場合は、非同期タグに置換える | |
| rewrite_javascript | Js | Yes | javascriptの空有やコメントを削除 |
| combine_javascript | Js | Yes | Combines multiple script elements into one. |
| canonicalize_javascript_libraries | Js | No | javascriptの読込みを、googleなどのhostingサービス先に書換える |
| inline_css | Css | Yes | 小さい外部CSSファイルは、Htmlに直接記述 |
| inline_google_font_css | Css | No | GoogleのWEBFontを使用している小さい外部CSSファイルは、Htmlに直接記述 |
| inline_javascript | Js | Yes | 小さい外部javascriptファイルは、Htmlに直接記述 |
| local_storage_cache | No | インライン化されたリソースを、html5ローカルストレージにキャッシュする | |
| insert_ga | No | Google Analytics snippetを各ページ記述 | |
| rewrite_images | Image | Yes | 画像の最適化、画像を軽くする。小さい画像ファイルは、インライン化する |
| convert_jpeg_to_progressive | Image | Yes | 重いJpegファイルをプログレッシブ形式に変換 |
| convert_png_to_jpeg | Image | No | gifとpngファイルをJpegに変換 |
| convert_jpeg_to_webp | Image | No | ブラウザがサポートしている場合、JpegファイルをWebpに変換Generates webp rather than jpeg images for browsers that support webp. |
| insert_image_dimensions | Image | No | イメージタグに、widthとheighがない場合、つける |
| inline_images | Image | Yes | 小さい画像ファイルはdeta:urls形式で、埋込む（このインライン化でhoverでの画像ON、OFFが効かなくなる。そのため、ModPagespeedDisableFilters inline_imagesで無効化する） |
| recompress_images | Image | Yes | 圧縮し余分なメタデータの削除。gifファイルの場合はpngファイルに変換 |
| recompress_jpeg | Image | Yes | Jpegファイルを圧縮し余分なメタデータの削除 |
| recompress_png | Image | Yes | pngファイルを圧縮し余分なメタデータの削除 |
| recompress_webp | Image | Yes | webpファイルを圧縮し余分なメタデータの削除 |
| convert_gif_to_png | Image | Yes | gifファイルを圧縮し、最適化した状態でpngファイルへ書換え |
| strip_image_color_profile | Image | Yes | カラープロファイルの削除 |
| strip_image_meta_data | Image | Yes | EXIF meta dataの削除 |
| jpeg_sampling | Image | Yes | カラーサンプリングを 4:2:0.へ変更※色差成分を間引く方法らしい |
| resize_images | Image | Yes | 画像が、imgタグの width、height よりも大きい場合、リサイズ |
| resize_rendered_image_dimensions | Image | Yes | レンダリングされた大きさが、実際の画像よりも地位さ場合にリサイズ |
| inline_preview_images | Image | No | ページが読み込まれた際、実際の画像よりも軽い画像を表示させ、読み込み完了後に実際の画像を表示 |
| resize_mobile_images | Image | No | モバイルブラウザでページが読み込まれた際、実際の画像よりも軽い画像を表示させ、読み込み完了後に実際の画像を表示 |
| remove_comments | Html | No | Html内のコメント削除。インライン化されている、JavaScript or CSS内のコメントは消さない |
| collapse_whitespace | Html | No | Html内の空白を削除。(<pre>,<script>,<style>,<textarea> 内の空白は対象外) |
| elide_attributes | Html | No | Htmlの仕様にあっていない属性の削除 |
| extend_cache | Cache | Yes | URLにハッシュを付け、最適化されなかった、 CSS、JS、イメージファイルのキャッシュの保存期間を延長 |
| extend_cache_css | Cache | Yes | URLにハッシュを付け、最適化されなかった、 CSSのキャッシュの保存期間を延長 |
| extend_cache_images | Cache | Yes | URLにハッシュを付け、最適化されなかった、 イメージファイルのキャッシュの保存期間を延長 |
| extend_cache_scripts | Cache | Yes | URLにハッシュを付け、最適化されなかった、 javascriptファイルのキャッシュの保存期間を延長 |
| extend_cache_pdfs | Cache | No | URLにハッシュを付け、PDFのキャッシュの保存期間を延長 |
| sprite_images | Image | No | CSSファイル内の画像を結合して、スプライト画像にする |
| rewrite_domains | No | Rewrites the domains of resources not otherwise touched by PageSpeed, based on MapRewriteDomain andShardDomain settings in the config file. | |
| trim_urls | Html | No | 絶対パスで記載されているURLを、相対パスに書換え |
| pedantic | Html | No | HTML5で作成されてなく、<script>、 <style>のデフォルトの属性が記述されていない場合、属性をつける |
| remove_quotes | Html | No | Htmlの文法上不要な引用タグの削除 |
| add_instrumentation | Js | No | 計測用のjavascriptを追加し、レイテンシを計測し結果をサーバーに送る※レイテンシとはバイスに対してデータ転送などを要求してから、その結果が返送されるまでの遅延時間のこと。 |
| convert_meta_tags | Html | Yes | http-equiv のメタタグにはレスポンスヘッダーを付ける |
| defer_javascript | Js | No | ページの読込みが完了するまで、Html内にあるjavascriptの実行を遅延 |
| dedup_inlined_images | Image | No | 重複するイメージの代わりにjavascriptを使う |
| lazyload_images | Image | No | 表示領域きたら画像を読みこむ |
| insert_dns_prefetch | No | DNS解決時間を減らすために、 <link rel="dns-prefetch"を挿入 |
実際の使用例 PageSpeed Examples Directory
コメント