VPSにmod_pagespeedをインストールしwebp画像置換えの設定

2021.02.26

VPSにmod_pagespeedをインストールしwebp画像置換えの設定

VPSに自分でmod_pagespeedをインストル

ダウンロード:http://code.google.com/

自分の環境に合わせたファイルをこちらからダウンロードしてください。

PHP

//設定ファイル   /etc/apache2/mods-enabled/pagespeed.conf

ModPagespeedRewriteLevel CoreFilters

インストールすると、特に設定もなく特に設定をしなくてもCoreFiltersが設定されています。

mod_pagespeed_statistics

mod_pagespeedの統計情報。 サーバによってはmod_pagespeed_statisticsへの閲覧が初期設定では許可されている。 curlがインストールされてなければ、sudo apt-get install curlでインストールする。

mod_pagespeedの統計情報。サーバによってはmod_pagespeed_statisticsへの閲覧が初期設定では許可されている。curlがインストールされてなければ、sudo apt-get install curlでインストールする。

PHP


$ curl http://localhost/mod_pagespeed_statistics
resource_fetches_cached: 32
resource_fetch_construct_successes: 0
resource_fetch_construct_failures: 0
total_page_load_ms: 0
page_load_count: 0
cache_extensions: 42
not_cacheable: 0
css_file_count_reduction: 0
css_filter_files_minified: 34
css_filter_minified_bytes_saved: 30984
css_filter_parse_failures: 33
css_elements: 0
image_inline: 190
image_rewrite_saved_bytes: 440452
image_rewrites: 19
image_ongoing_rewrites: 0
javascript_blocks_minified: 170
javascript_bytes_saved: 208633
javascript_minification_failures: 1
javascript_total_blocks: 185
resource_url_domain_rejections: 652
url_trims: 0
url_trim_saved_bytes: 0
resource_404_count: 0
slurp_404_count: 0
serf_fetch_request_count: 77
serf_fetch_bytes_count: 1922757
serf_fetch_time_duration_ms: 4192
serf_fetch_cancel_count: 0
serf_fetch_outstanding_count: 0
serf_fetch_timeout_count: 0

PHP


//apacheを再起動して設定を有効化する。
$ /etc/init.d/apache2 restart

2020年2月時点ではMac版のサファリはwebp未対応ｄす。iOSのChromeでも画像webpに変更したくない場合は以下を打ち込み。

PHP


//webp画像への置き換えを無効化する
ModPagespeedDisableFilters convert_jpeg_to_webp
フィルタ名   初期設定  
add_head Html Yes ＜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\”>を挿入

インストールできたら.htacsessでの設定

PHP


//.htacsessでModPagespeed Onにする
ModPagespeed On

参考サイト：https://dev.classmethod.jp

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