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

Google
スポンサーリンク

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_headHtmlYes<head>がない場合に<head>をつける
combine_headsHtmlNo複数の<head>が存在した時に、一つにまとめる
inline_import_to_linkHtmlYes<style> タグで CSS @importsだけしている場合、 <link>タグに置換える
outline_cssCssNoHTML内のCSS記述が大きい場合、キャッシュ可能な外部ファイルにする
outline_javascriptJsNoHTML内のjavascript記述が大きい場合、キャッシュ可能な外部ファイルにする
move_css_above_scriptsHtmlNoCSSを<script>タグよりも上に配置する
move_css_to_headHtmlNoCSSファイルを <head>タグの中に配置する
combine_cssCssYes複数のCSSファイルを一つにまとめる
rewrite_cssCssYesCSSファイルの、空白やコメントの削除。可能な場合は、CSSでよんでいる画像も、キャッシュの画像に置換える
fallback_rewrite_css_urlsCssYes解析・縮小ができないCSSファイルでも、参照されるリソースは書き換える
rewrite_style_attributesCssNoスタイル属性内(タグの中に書かれた style=”hoge”)も、設定されたフィルターに基づいてリライトする
rewrite_style_attributes_with_urlCssYesスタイル属性内(タグの中に書かれた style=”hoge”)に記述されたURLも、設定されたフィルターに基づいてリライトする
flatten_css_importsCssYes@ImportのCSSファイルを、読み込んで1つのファイルにする
prioritize_critical_cssNoReplace CSS tags with inline versions that include only
the CSS used by the page.
make_google_analytics_asyncNoGoogle analiticsの同期タグがあった場合は、非同期タグに置換える
rewrite_javascriptJsYesjavascriptの空有やコメントを削除
combine_javascriptJsYesCombines multiple script elements into one.
canonicalize_javascript_librariesJsNojavascriptの読込みを、googleなどのhostingサービス先に書換える
inline_cssCssYes小さい外部CSSファイルは、Htmlに直接記述
inline_google_font_cssCssNoGoogleのWEBFontを使用している小さい外部CSSファイルは、Htmlに直接記述
inline_javascriptJsYes小さい外部javascriptファイルは、Htmlに直接記述
local_storage_cacheNoインライン化されたリソースを、html5ローカルストレージにキャッシュする
insert_gaNoGoogle Analytics snippetを各ページ記述
rewrite_imagesImageYes画像の最適化、画像を軽くする。小さい画像ファイルは、インライン化する
convert_jpeg_to_progressiveImageYes重いJpegファイルをプログレッシブ形式に変換
convert_png_to_jpegImageNogifとpngファイルをJpegに変換
convert_jpeg_to_webpImageNoブラウザがサポートしている場合、JpegファイルをWebpに変換Generates webp rather than jpeg images for browsers that support webp.
insert_image_dimensionsImageNoイメージタグに、widthとheighがない場合、つける
inline_imagesImageYes小さい画像ファイルはdeta:urls形式で、埋込む(このインライン化でhoverでの画像ON、OFFが効かなくなる。そのため、ModPagespeedDisableFilters inline_imagesで無効化する)
recompress_imagesImageYes圧縮し余分なメタデータの削除。gifファイルの場合はpngファイルに変換
recompress_jpegImageYesJpegファイルを圧縮し余分なメタデータの削除
recompress_pngImageYespngファイルを圧縮し余分なメタデータの削除
recompress_webpImageYeswebpファイルを圧縮し余分なメタデータの削除
convert_gif_to_pngImageYesgifファイルを圧縮し、最適化した状態でpngファイルへ書換え
strip_image_color_profileImageYesカラープロファイルの削除
strip_image_meta_dataImageYesEXIF meta dataの削除
jpeg_samplingImageYesカラーサンプリングを 4:2:0.へ変更※色差成分を間引く方法らしい
resize_imagesImageYes画像が、imgタグの widthheight よりも大きい場合、リサイズ
resize_rendered_image_dimensionsImageYesレンダリングされた大きさが、実際の画像よりも地位さ場合にリサイズ
inline_preview_imagesImageNoページが読み込まれた際、実際の画像よりも軽い画像を表示させ、読み込み完了後に実際の画像を表示
resize_mobile_imagesImageNoモバイルブラウザでページが読み込まれた際、実際の画像よりも軽い画像を表示させ、読み込み完了後に実際の画像を表示
remove_commentsHtmlNoHtml内のコメント削除。インライン化されている、JavaScript or CSS内のコメントは消さない
collapse_whitespaceHtmlNoHtml内の空白を削除。(
<pre>,
<script>,
<style>,
<textarea> 内の空白は対象外)
elide_attributesHtmlNoHtmlの仕様にあっていない属性の削除
extend_cacheCacheYesURLにハッシュを付け、最適化されなかった、
CSS、JS、イメージファイルのキャッシュの保存期間を延長
extend_cache_cssCacheYesURLにハッシュを付け、最適化されなかった、
CSSのキャッシュの保存期間を延長
extend_cache_imagesCacheYesURLにハッシュを付け、最適化されなかった、
イメージファイルのキャッシュの保存期間を延長
extend_cache_scriptsCacheYesURLにハッシュを付け、最適化されなかった、
javascriptファイルのキャッシュの保存期間を延長
extend_cache_pdfsCacheNoURLにハッシュを付け、PDFのキャッシュの保存期間を延長
sprite_imagesImageNoCSSファイル内の画像を結合して、スプライト画像にする
rewrite_domainsNoRewrites the domains of resources not otherwise touched by
PageSpeed, based on MapRewriteDomain and
ShardDomain settings in the config file.
trim_urlsHtmlNo絶対パスで記載されているURLを、相対パスに書換え
pedanticHtmlNoHTML5で作成されてなく、<script>、 <style>のデフォルトの属性が記述されていない場合、属性をつける
remove_quotesHtmlNoHtmlの文法上不要な引用タグの削除
add_instrumentationJsNo計測用のjavascriptを追加し、レイテンシを計測し結果をサーバーに送る※レイテンシとはバイスに対してデータ転送などを要求してから、その結果が返送されるまでの遅延時間のこと。
convert_meta_tagsHtmlYeshttp-equiv のメタタグにはレスポンスヘッダーを付ける
defer_javascriptJsNoページの読込みが完了するまで、Html内にあるjavascriptの実行を遅延
dedup_inlined_imagesImageNo重複するイメージの代わりにjavascriptを使う
lazyload_imagesImageNo表示領域きたら画像を読みこむ
insert_dns_prefetchNoDNS解決時間を減らすために、 <link rel="dns-prefetch"
href="//www.example.com">
を挿入

実際の使用例 PageSpeed Examples Directory

 

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

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

コメント

タイトルとURLをコピーしました