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

2016年1月23日2023年4月7日

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` 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">`を挿入