mod_pagespeed の設定に関して良い記事があったのでメモ。
ページが存在しません。 | 株式会社サイバーエージェント
サイバーエージェントは「21世紀を代表する会社を創る」というビジョンを掲げ、インターネット領域で時代の変化に合わせた様々な事業を展開しています。国内トップクラスのインターネット広告代理事業や、新しい未来のテレビ「ABEMA」を提供しています...
www.cyberagent.co.jp
mod_pagespeed 自体は .htaccessファイル に以下の様に記述すれば有効になります。
ModPagespeed On
元記事によると、詳細にフィルタを変更できるようです。
私のブログでは、WPXレンタルサーバーを使用しており、mod_pagespeed を利用できるので、以下の設定にて暫く様子を見ようと思います。
ModPagespeed On ModPagespeedRewriteLevel CoreFilters ModPagespeedEnableFilters canonicalize_javascript_libraries ModPagespeedEnableFilters defer_javascript ModPagespeedEnableFilters insert_dns_prefetch ModPagespeedEnableFilters insert_image_dimensions ModPagespeedEnableFilters local_storage_cache ModPagespeedEnableFilters remove_comments ModPagespeedEnableFilters remove_quotes ModPagespeedEnableFilters resize_mobile_images ModPagespeedEnableFilters trim_urls ModPagespeedDisableFilters inline_images ModPagespeedDisableFilters inline_javascript ModPagespeedCssInlineMaxBytes 1024000
フィルタと概要（元記事から引用）
HTMLの記述方法を最適化するフィルタ
| フィルタ名 | 解説 | デフォルト |
| add_head | <head> 要素がない場合は挿入する。 | オン |
| combine_heads | <head> 要素が２つ見つかった場合は１つに統合する。 | |
| inline_import_to_link | CSSの@importsしか行なっていない<style>タグを <link> タグによる読込に書き換える。 | オン |
| move_css_above_scripts | CSS要素を<script>タグよりも上に移動する。 | |
| move_css_to_head | CSS要素を<head>タグ内に移動する。 | |
| collapse_whitespace | 不要な空白を除去する。(以下のタグ内は行わない： <pre>, <script>, <style>, <textarea>). | |
| elide_attributes | HTMLの仕様に従っていない属性は除去する。 | |
| extend_cache | 最適化を行わなかったCSS、JSおよび画像のキャッシュ保持期間をコンテンツのハッシュ付きURLを付与することで延長する。 | オン |
| extend_cache_css | 最適化を行わなかったCSSのキャッシュ保持期間をコンテンツのハッシュ付きURLを付与することで延長する。( extend_cacheで暗黙的に呼び出される。 ) | オン |
| extend_cache_images | 最適化を行わなかった画像のキャッシュ保持期間をコンテンツのハッシュ付きURLを付与することで延長する。( extend_cacheで暗黙的に呼び出される。 ) | オン |
| extend_cache_scripts | 最適化を行わなかったJSのキャッシュ保持期間をコンテンツのハッシュ付きURLを付与することで延長する。( extend_cacheで暗黙的に呼び出される。 ) | オン |
| extend_cache_pdfs | PDFのキャッシュ保持期間をコンテンツのハッシュ付きURLを付与することで延長する。 | |
| convert_meta_tags | meta タグのうち http-equiv 属性のものをレスポンスヘッダ値に置き換える。 | オン |
| trim_urls | URLをベースURLからの相対パスに書き換えることで短くする。 | |
| remove_quotes | HTMLの各属性の中にある文法上必須でない引用符を除去する。 | |
| remove_comments | HTML内のコメントを除去する。（ただしインラインのJS/CSSは除く） |
JS/CSSのリソースを最適化するもの
| フィルタ名 | 解説 | デフォルト |
| combine_css | 複数のCSS要素を１つに結合する。 | オン |
| rewrite_css | CSS内のスペースやコメントを除去する。また画像系オプションが有効な場合、CSS内でロードしている画像も書き換えたりキャッシュ延長の対象とする。 | オン |
| fallback_rewrite_css_urls | 解析・圧縮できないCSSでもURLに関しては書き換えを行うフォールバックオプション。 | オン |
| rewrite_style_attributes | スタイル属性内のCSSもルールに基づき最適化する。 | |
| rewrite_style_attributes_with_url | スタイル属性内のurlを含むCSSルールも、rewite_cssの設定を適用する。 | オン |
| flatten_css_imports | @import句を事前に読み込み１枚のフラットファイルにする。 | オン |
| rewrite_javascript | Javascript内の不要な空白やコメントを除去する。 | オン |
| combine_javascript | 複数のJavascriptを１枚のファイルにする。 | |
| inline_css | 小さな外部CSSファイルを、HTML内に埋め込む。 | オン |
| inline_javascript | 小さな外部JSファイルをHTML内に埋め込む。 | オン |
| outline_css | 巨大なHTML内のCSS記述をキャッシュ可能な外出しファイルにする。 | |
| outline_javascript | 巨大なHTML内のJS記述をキャッシュ可能な外出しファイルにする。 |
画像ファイルを最適化するもの
| フィルタ名 | 解説 | デフォルト |
| rewrite_images | 画像の最適化、再エンコード、不要なピクセルの除去を行う。また、小さな画像はインライン化する。 | オン |
| convert_jpeg_to_progressive | 巨大なjpegファイルをプログレッシブファイルに変更する。 | オン |
| convert_png_to_jpeg | gifやpngファイルをjpegにする。 | |
| convert_jpeg_to_webp | ブラウザがサポートしている場合、jpegをwebpに変換して提供する。 | |
| insert_image_dimensions | <img> タグに width と height 属性がない場合は追加する。 | |
| inline_images | 小さな画像の読み込みをdata: urls方式に置き換えます。( rewrite_imagesで暗黙的に呼び出される。 ) | オン |
| recompress_images | 画像を再圧縮し、不要なメタデータを削除し、gifの場合はpngに変換します。( rewrite_imagesで暗黙的に呼び出される。 ) | オン |
| recompress_jpeg | jpegファイルを再圧縮しメタデータを削除する。( recompress_imagesで暗黙的に呼び出される。 ) | オン |
| recompress_png | pngファイルを再圧縮しメタデータを削除する。( recompress_imagesで暗黙的に呼び出される。 ) | オン |
| recompress_webp | webpファイルを再圧縮しメタデータを削除する。( recompress_imagesで暗黙的に呼び出される。 ) | オン |
| convert_gif_to_png | gifファイルをpngに変換して最適化する。( recompress_imagesで暗黙的に呼び出される。 ) | オン |
| strip_image_color_profile | 画像内のカラープロファイルを除去する。( recompress_imagesで暗黙的に呼び出される。 ) | オン |
| strip_image_meta_data | 画像内のEXIFメタデータを除去する。( recompress_imagesで暗黙的に呼び出される。 ) | オン |
| jpeg_sampling | jpegのカラーサンプリングを4:2:0にする。( recompress_imagesで暗黙的に呼び出される。 ) | オン |
| resize_images | <img> タグの width と height 属性値に比べ画像が大きい場合は縮小する。( rewrite_imagesで暗黙的に呼び出される。 ) | オン |
| inline_preview_images | ロード完了後にオリジナル画像に置き換わるプレースホルダーとして、インラインの低クオリティ画像を作成・使用する。 | |
| resize_mobile_images | inline_preview_images と似た動作をするが、モバイルブラウザにのみ小さい画像を提供する。 | |
| sprite_images | バックグラウンド画像を結合して一つのスプライト画像にする。 | |
| local_storage_cache | インライン化されたリソースをHTML5のローカルストレージにキャッシュする。 |
その他
速度改善に直接関係ない、あるいはWEBアプリのJS動作への影響が大きいフィルタ
| フィルタ名 | 解説 |
| defer_javascript | JavaScriptの実行をHTMLページがロード完了するまで遅延させる。 |
| lazyload_images | クライアントの表示領域にはいるまで画像をロードしない。 |
| insert_dns_prefetch | DNSの解決速度を上げるため <link rel=”dns-prefetch” href=”//www.example.com”> タグを挿入する。 |
| make_google_analytics_async | Google Analyticsの同期タグがあった場合非同期タグに書き換える。 |
| rewrite_domains | pagespeed.conf で指定されていないmod_pagespeed外のコンテンツのドメインを書き換える。 |
| pedantic | <script> と <style> タグにデフォルト属性が書かれておらず、かつページがHTML5でない場合、属性を追加する。このフィルタはpagespeedがHTML4のバリデーションを壊さないためにある。 |
| add_instrumentation | 計測用JavaScriptを追加しレイテンシを測定、かつサーバに結果を送り返す。 |
| insert_ga | Google AnalyticsのJSタグを各ページに挿入する。 |
| canonicalize_javascript_libraries | Javascriptライブラリの読み込みをJavascriptホスティングサービスのものに変更する。 |
コメント