サーバー高速化。Googleが提供しているmod_PageSpeedのインストール。

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タグの widthheight よりも大きい場合、リサイズ
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 and
ShardDomain 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"
href="//www.example.com">
を挿入

実際の使用例 PageSpeed Examples Directory

 

参考にさせて頂いたサイト

Googleの公式ページ
mod_pagespeedの概要と導入について | 株式会社サイバーエージェント

設定周りで悩んだら、お気軽にご相談ください。
問合せの際は「web担当者を見た」とお伝えください。

この記事を書いた人

デジタルマーケティングに16年間従事しているMITSUIです。Google AnalyticsとGoogle Tag Managerが大好きで、これらのツールを活用した情報提供を行っています。ブログではデジタルマーケティングに関する情報や最新のトレンド、ベストプラクティスを紹介しています。

コメント

コメントする

CAPTCHA


目次