mod_pagespeed設定値

WordPress

mod_pagespeed の設定に関して良い記事があったのでメモ。

https://www.cyberagent.co.jp/techinfo/techreport/report/id=7992

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> 要素が2つ見つかった場合は1つに統合する。
inline_import_to_linkCSSの@importsしか行なっていない<style>タグを <link> タグによる読込に書き換える。オン
move_css_above_scriptsCSS要素を<script>タグよりも上に移動する。
move_css_to_headCSS要素を<head>タグ内に移動する。
collapse_whitespace不要な空白を除去する。(以下のタグ内は行わない: <pre>, <script>, <style>, <textarea>).
elide_attributesHTMLの仕様に従っていない属性は除去する。
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_pdfsPDFのキャッシュ保持期間をコンテンツのハッシュ付きURLを付与することで延長する。
convert_meta_tagsmeta タグのうち http-equiv 属性のものをレスポンスヘッダ値に置き換える。オン
trim_urlsURLをベースURLからの相対パスに書き換えることで短くする。
remove_quotesHTMLの各属性の中にある文法上必須でない引用符を除去する。
remove_commentsHTML内のコメントを除去する。(ただしインラインのJS/CSSは除く)

JS/CSSのリソースを最適化するもの

フィルタ名解説デフォルト
combine_css複数のCSS要素を1つに結合する。オン
rewrite_cssCSS内のスペースやコメントを除去する。また画像系オプションが有効な場合、CSS内でロードしている画像も書き換えたりキャッシュ延長の対象とする。オン
fallback_rewrite_css_urls解析・圧縮できないCSSでもURLに関しては書き換えを行うフォールバックオプション。オン
rewrite_style_attributesスタイル属性内のCSSもルールに基づき最適化する。
rewrite_style_attributes_with_urlスタイル属性内のurlを含むCSSルールも、rewite_cssの設定を適用する。オン
flatten_css_imports@import句を事前に読み込み1枚のフラットファイルにする。オン
rewrite_javascriptJavascript内の不要な空白やコメントを除去する。オン
combine_javascript複数のJavascriptを1枚のファイルにする。
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_jpeggifや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_jpegjpegファイルを再圧縮しメタデータを削除する。( recompress_imagesで暗黙的に呼び出される。 )オン
recompress_pngpngファイルを再圧縮しメタデータを削除する。( recompress_imagesで暗黙的に呼び出される。 )オン
recompress_webpwebpファイルを再圧縮しメタデータを削除する。( recompress_imagesで暗黙的に呼び出される。 )オン
convert_gif_to_pnggifファイルをpngに変換して最適化する。( recompress_imagesで暗黙的に呼び出される。 )オン
strip_image_color_profile画像内のカラープロファイルを除去する。( recompress_imagesで暗黙的に呼び出される。 )オン
strip_image_meta_data画像内のEXIFメタデータを除去する。( recompress_imagesで暗黙的に呼び出される。 )オン
jpeg_samplingjpegのカラーサンプリングを4:2:0にする。( recompress_imagesで暗黙的に呼び出される。 )オン
resize_images<img> タグの width と height 属性値に比べ画像が大きい場合は縮小する。( rewrite_imagesで暗黙的に呼び出される。 )オン
inline_preview_imagesロード完了後にオリジナル画像に置き換わるプレースホルダーとして、インラインの低クオリティ画像を作成・使用する。
resize_mobile_imagesinline_preview_images と似た動作をするが、モバイルブラウザにのみ小さい画像を提供する。
sprite_imagesバックグラウンド画像を結合して一つのスプライト画像にする。
local_storage_cacheインライン化されたリソースをHTML5のローカルストレージにキャッシュする。

その他

速度改善に直接関係ない、あるいはWEBアプリのJS動作への影響が大きいフィルタ

フィルタ名解説
defer_javascriptJavaScriptの実行をHTMLページがロード完了するまで遅延させる。
lazyload_imagesクライアントの表示領域にはいるまで画像をロードしない。
insert_dns_prefetchDNSの解決速度を上げるため <link rel=”dns-prefetch” href=”//www.example.com”> タグを挿入する。
make_google_analytics_asyncGoogle Analyticsの同期タグがあった場合非同期タグに書き換える。
rewrite_domainspagespeed.conf で指定されていないmod_pagespeed外のコンテンツのドメインを書き換える。
pedantic<script> と <style> タグにデフォルト属性が書かれておらず、かつページがHTML5でない場合、属性を追加する。このフィルタはpagespeedがHTML4のバリデーションを壊さないためにある。
add_instrumentation計測用JavaScriptを追加しレイテンシを測定、かつサーバに結果を送り返す。
insert_gaGoogle AnalyticsのJSタグを各ページに挿入する。
canonicalize_javascript_librariesJavascriptライブラリの読み込みをJavascriptホスティングサービスのものに変更する。

コメント

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