mod_pagespeedカスタマイズで高速化を詳細解説・Google謹製
2017/03/11
Google謹製mod_pagespeedの詳細設定方法解説
mod_pagespeedとは?
mod_pagespeedは、Googleが作成した Apacheのモジュールで、Webサイトの画面表示スピードを簡単に高速化してくれます。
Googleは、Webサイトの環境を快適にするため Webサイトの表示の高速化を求めています。
そして、Googleは、Webサイトの高速化の支援として、Google Search Console(旧 Webmaster Tools)の中に Webサイトの表示スピードのチェックツールとして Page Speed Insightsを提供し、スピードアップのためのアドバイスも提示してくれます。
そして、実際にそのスピードアップの対策を行うためのモジュールとして、mod_pagespeedを提供しています。
つまりは、Googleは、Webサイトの表示スピードを速くするために Page Speed Insightsでポイントを指摘し、mod_pagespeedを使って高速化するよう促しているわけです。
その流れから行くと、mod_pagespeedを使わない手はないワケなんですが、この記事ではデフォルトのままでも十分に効果が出る mod_pagespeedをさらに効果が出るよう、自分のサイトへの最適設定をする方法を解説する記事です。
そもそも「mod_pagespeedってなに?」ということについては「高速化の最終兵器・Google謹製mod_pagespeedでWebサイトを超簡単高速化」に記事を書いています。
また、この記事を書くきっかけになったサーバの引越しについては「ロリポップからX-Serverに引越し。サーバの月額費用が増えても求めた理由は?」に記事を書いていますので併せて参考にしてください。
mod_pagespeedは多機能
mod_pagespeedモジュールは、一つの技術でできているものではありません。
このエス技研ブログでも Page Speed Insightsの指摘に合わせて .htaccessの設定をしたり、プラグインを導入したり、とスピードアップの対策を行ってきましたが、それらの対策を行ってきた内容と同じような仕組みがどっさりと入っている多機能なモジュールになります。
【mod_pagespeedの機能一覧】
Filter名称 | 初期値 | 説明 |
---|---|---|
add_head | オン | <head> 要素がない場合は挿入する。 |
combine_heads | <head> 要素が2つ見つかった場合は1つに統合する。 | |
inline_import_to_link | オン | CSSの@importsしか行なっていない<style>タグを <link> タグによる読込に書き換える。 |
outline_css | 巨大なHTML内のCSS記述をキャッシュ可能な外出しファイルにする。 | |
outline_javascript | 巨大なHTML内のJS記述をキャッシュ可能な外出しファイルにする。 | |
move_css_above_scripts | CSS要素を<script>タグよりも上に移動する。 | |
move_css_to_head | CSS要素を<head>タグ内に移動する。 | |
combine_css | オン | 複数のCSS要素を1つに結合する。 |
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句を事前に読み込み1枚のフラットファイルにする。 |
prioritize_critical_css | ページで使われる CSSだけをインライン形式に置き換える。 | |
make_google_analytics_async | Google Analyticsの同期タグがあった場合非同期タグに書き換える。 | |
rewrite_javascript | オン | Javascript内の不要な空白やコメントを除去する。 |
rewrite_javascript_external | オン | 余分なスペースやコメントを除去。OptimizeForBandwidthモードでは URLを変更せずその場で縮小実行。(rewrite_javascriptで暗黙的に呼び出される。) |
rewrite_javascript_inline | オン | インラインブロック化し、余分なスペースやコメントを除去。(rewrite_javascriptで暗黙的に呼び出される。) |
include_js_source_maps | 書き換えた JavaScriptにソースマップを追加。 | |
combine_javascript | オン | 複数のJavascriptを1枚のファイルにする。 |
canonicalize_javascript_libraries | Javascriptライブラリの読み込みをJavascriptホスティングサービスのものに変更する。 | |
inline_css | オン | 小さな外部CSSファイルを、HTML内に埋め込む。 |
inline_google_font_css | インライン化した縮小 CSSは fonts.googleapis.comの HTMLドキュメントを使う。 | |
inline_javascript | オン | 小さな外部JSファイルをHTML内に埋め込む。 |
local_storage_cache | インライン化されたリソースをHTML5のローカルストレージにキャッシュする。 | |
insert_ga | Google AnalyticsのJSタグを各ページに挿入する。 | |
rewrite_images | オン | 画像の最適化、再エンコード、不要なピクセルの除去を行う。また、小さな画像はインライン化する。 |
convert_jpeg_to_progressive | オン | 巨大なjpegファイルをプログレッシブファイルに変更する。 |
convert_png_to_jpeg | オン | gifやpngファイルをjpegにする。 |
convert_jpeg_to_webp | オン | ブラウザがサポートしている場合、jpegをwebpに変換して提供する。 |
convert_to_webp_lossless | gif、pngをブラウザがサポートする 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で暗黙的に呼び出される。) |
resize_rendered_image_dimensions | オン | 画像の描画サイズを実際の画像より小さいサイズに変更する。(rewrite_imagesで暗黙的に呼び出される。) |
inline_preview_images | ロード完了後にオリジナル画像に置き換わるプレースホルダーとして、インラインの低クオリティ画像を作成・使用する。 | |
resize_mobile_images | inline_preview_images と似た動作をするが、モバイルブラウザにのみ小さい画像を提供する。 | |
remove_comments | HTML内のコメントを除去する。(ただしインラインのJS/CSSは除く) | |
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を付与することで延長する。 | |
sprite_images | バックグラウンド画像を結合して一つのスプライト画像にする。 | |
rewrite_domains | pagespeed.conf で指定されていないmod_pagespeed外のコンテンツのドメインを書き換える。 | |
trim_urls | URLをベースURLからの相対パスに書き換えることで短くする。 | |
pedantic | <script> と <style> タグにデフォルト属性が書かれておらず、かつページがHTML5でない場合、属性を追加する。このフィルタはpagespeedがHTML4のバリデーションを壊さないためにある。 | |
remove_quotes | HTMLの各属性の中にある文法上必須でない引用符を除去する。 | |
add_instrumentation | 計測用JavaScriptを追加しレイテンシを測定、かつサーバに結果を送り返す。 | |
convert_meta_tags | オン | meta タグのうち http-equiv 属性のものをレスポンスヘッダ値に置き換える。 |
defer_javascript | JavaScriptの実行をHTMLページがロード完了するまで遅延させる。 | |
dedup_inlined_images | インライン化した画像を、JavaScriptで適時必要な画像を呼び込み画像を差し替えながら表示する。 | |
lazyload_images | クライアントの表示領域にはいるまで画像をロードしない。 | |
insert_dns_prefetch | DNSの解決速度を上げるため <link rel=”dns-prefetch” href=”//www.example.com”> タグを挿入する。 | |
in_place_optimize_for_browser | browser-dependentin-place resourceを最適化する。 |
一覧表を見て分かる通り、多機能なモジュールなのですが、デフォルトで有効になっているもの、なっていないものとあります。
また、機能によっては On、Offだけではなく、設定値を持っているものもあります(既定値については後述)。
ほとんどの場合、デフォルトの設定でもスピードアップするのですが、デフォルトのままだともったいない!自分のサイトにぴったり来る設定にしよう!
ただ、モジュールの機能が多彩であることと、各サイトの仕様も多彩であるために、「こうすればどのサイトでも OK」という絶対的な設定はありませんので、各サイトに合わせてそれぞれで最適な設定に変更してもらう必要があります。
その設定をしていくうえで必要となる設定方法について解説をしていきます。
上記のリストは Googleの mod_pagespeedの説明ページから取得しています。
https://developers.google.com/speed/pagespeed/module/config_filters?hl=ja
ですが、X Serverのデフォルトとは設定が違う可能性もありますのでご注意ください。
mod_pagespeedの設定の基本
mod_pagespeedの設定は、.htaccessに記載することで行います。
※ここで説明しているのは、X Serverでの動作を想定していますので、Apacheでの設定方法です。
Nginxでは記述方法が違いますのでご注意ください。
mod_pagespeedの設定の基本・mod_pagespeedの On/Off
まずは、.htaccessに「ModPagespeed On」を記述して、mod_pagespeedを有効にします。
「ModPagespeed Off」と記述、もしくは、「ModPagespeed On」の記述がなくなると mod_pagespeedは無効になります。
1 |
ModPagespeed On |
X Serverの場合は、On/Offの切り替えはコントロールパネルから行うことができ、管理画面から Onにすると、.htaccessに「ModPagespeed On」が追記されます。
メインドメインに対して設定されるため、メインドメインの「public_html」の中の .htaccessに追記されます。
また、.htaccessに「ModPagespeed On」を直接追記すると管理画面でも Onになり、「ModPagespeed On」を削除すると管理画面でも「Off」になります。
mod_pagespeedの設定の基本・Filtersの On/Offの設定
特定のフィルタを有効化する場合は、「ModPagespeedEnableFilters」を使い、無効化する場合は「ModPagespeedDisableFilters」を使います。
1 2 |
ModPagespeedEnableFilters filterAAA,filterBBB ModPagespeedDisableFilters filterCCC,filterDDD |
特定のフィルタを Offにしても、クリエパラメータ、リクエストヘッダによってオンにされることを禁止する指定をする場合は、「ModPagespeedForbidFilters」を使います。
1 |
ModPagespeedForbidFilters filterAAA,filterBBB |
mod_pagespeedの設定の基本・Filtersを複数指定する設定
フィルタの指定の仕方は、「ModPagespeedEnableFilters」の後ろにフィルタ名を記述するだけです。
複数のフィルタを設定する場合は、上記の通り「,(カンマ)」で区切ることで可能になります。
ただし、「,」の後ろにスペースを入れるとエラーになりますので、スペースなどは入れずに続けて記述する必要があります。
1 2 |
ModPagespeedEnableFilters filterAAA,filterBBB ModPagespeedEnableFilters filterCCC,filterDDD |
また、複数のフィルタを設定する方法は、「,(カンマ)」で区切るだけではなく、上記の様に複数行に渡って記述することも可能です。混在していても問題ありません。
記述する順番による影響はないようです。
また、同じフィルタを重複して記述していても正常に動作するようです。
mod_pagespeedの設定の基本・Filtersを Enable/Disable両方記述した場合
1 2 |
ModPagespeedEnableFilters filterAAA,filterBBB ModPagespeedDisableFilters filterAAA,filterBBB |
上記のようにフィルタを Enableと Disableの両方に記述した場合は、デフォルトの設定になるようです。
(これはドキュメントに書いていなかった内容のため不確実ですが、実験してみた結果、デフォルト Onのものは有効となり、デフォルト Offのものは無効になりました。)
mod_pagespeedの設定の基本・Filtersを一括 Offにする設定
1 |
ModPagespeedForbidAllDisabledFilters true |
上記の記述をすることで全てのフィルタを強制的に Offにすることが出来ます。
これは、まさに X Serverに必要なフィルタですね。
X Serverは、メインドメインのドキュメントルートの中にサブドメインのドキュメントルートが生成されますので、メインドメインには mod_pagespeedが必要だけど、サブドメインには必要ないという場合にはこのフィルタの設定が必要です。
mod_pagespeedの設定の基本・フィルタの基本値
先に少し触れましたが、フィルタによっては On/Offだけではなく数値による設定値を持つものもあり、各既定値は下記のようになっています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
CssFlattenMaxBytes 102400 (was 2048 prior to 1.9.32.1) CssImageInlineMaxBytes 0 CssInlineMaxBytes 2048 CssOutlineMinBytes 3000 ImageInlineMaxBytes 3072 ImageLimitOptimizedPercent 100 ImageLimitResizeAreaPercent 100 ImageRecompressionQuality 85 ImageResolutionLimitBytes 32000000 JpegRecompressionQuality -1 JpegRecompressionQualityForSmallScreens 70 JpegNumProgressiveScans -1 JpegNumProgressiveScansForSmallScreens -1 WebpRecompressionQuality 80 WebpRecompressionQualityForSmallScreens 70 JsInlineMaxBytes 2048 JsOutlineMinBytes 3000 MaxInlinedPreviewImagesIndex -1 MinImageSizeLowResolutionBytes 3072 RetainComment "[WILDCARD PATTERN]" RewriteRandomDropPercentage 0 |
mod_pagespeedの設定の基本・ImageRecompressionQualityにより画像をキレイに
上記の既定値の中で多くのユーザに影響をすると思われるものが、「ImageRecompressionQuality」です。
これは、画像のファイル容量を圧縮してページの表示を高速化するための方法として利用する仕組みで、どれくらいの圧縮を行うかを規定している値になります。
既定値は「85」で、画像を粗くしない「100」に対して「15」ほど圧縮する処理をすることになります。
実際に比較したものが上記の画像で、上が元の画像で下が粗くなった画像です。
分かりやすく 2倍に拡大していますが、パッと目にもわかるくらい画像が粗くなります。
このエス技研ブログの様に技術ブログであれば、多少画像が粗くなっても納得できる場合もあるでしょうが、イラスト系や写真系の画像を見せることをメインとしているサイトでは致命的な障害です。
1 |
ModPagespeedImageRecompressionQuality 100 |
そんな場合のこの既定値の変更方法としては、上記のようにフィルタ名と値を記述することで既定値を変更することができます。
1 2 |
ModPagespeedDisableFilters rewrite_images ModPagespeedImageRecompressionQuality 100 |
また、「ImageRecompressionQuality」は「rewrite_images」で設定されている画像書き換えの処理の中の一つの既定値ですので、例えば、上記のように「rewrite_images」を「DisableFilters」の設定をすると、画像の圧縮処理が無効になりますので、そのあとに「ImageRecompressionQuality」の設定をしても意味がありません(書いていても害にはなりませんが)。
1 |
ModPagespeedCriticalImagesBeaconEnabled false |
デフォルトでは Onになっている lazyload_images、inline_preview_images、inline_imagesの特定のビーコンのみを Offにする場合は上記の様に設定を行います。
以上の基本的な設定方法に基づいて、各設定を行います。
mod_pagespeedの設定に対する考え方
mod_pagespeedは、多様な仕組みの組み合わせによって成り立っているモジュールです。
そのため、すでに対策を行っている仕組みとバッティングしている場合も多々あります。
その場合は、すでに対策を行っている仕組みをそのまま活かすのか、mod_pagespeedの機能を活かすのか、それを決めて対応をしていくことになります。
具体的に、私の場合は「WordPressの高速化でSEO対策!広告費も削減!高速化の施策のまとめ」にも書いていますが、これまで多様な施策を試してきています。
例えば、Lazy Loadについて。
Lazy Loadは、画面の表示に必要な画像を必要に応じて読み込むことで、画面の表示を速くする処理のことなのですが、WordPressではプラグイン Lazy Load、BJ Lazy Load、Unveil Lazy Loadなどを利用することで実現できます。
各プラグインの紹介記事は下記に書いています。
SEO効果絶大!PVもアップするWordPressの高速化プラグイン元祖Lazy Load
SEO効果絶大!PVもアップするWordPressの高速化プラグインBJ Lazy Load
SEO効果絶大!PVもアップするWordPressの高速化プラグインUnveil Lazy Load
この Lazy Loadは、WordPressのプラグインを利用して実装することもできますが、mod_pagespeedの機能を利用して実装することもできます。
また、画像ファイルを圧縮して軽量化する処理については「EWWW Image Optimizerで画像の圧縮でWordPressを高速化」に記事を書いていますが、「EWWW Image Optimizer」というプラグインを使っています。
これも mod_pagespeedの機能を利用して実装することもできます。
Lazy Loadはデフォルトでは有効になっていませんが、画像ファイルの圧縮に関してはデフォルトで有効になっています。
- もうすでにプラグインで実装して効果が出ているのでそれでいい
- デフォルトで有効になっているものは mod_pagespeedの方を利用する
- 少しでも速くしたいからプラグインと mod_pagespeedの両方を試して見ないと気が済まない
- Googleを信じて mod_pagespeedで実装できるものは mod_pagespeedの方を利用する
などなどいろいろな考え方があると思います。
一番最後のは Googleを信じるというか、いろいろなプラグインを入れるより高速化は mod_pagespeedにまかせる、と言う考え方ですかね。
また、サイトの内容(画像が多いサイト、文章が長いサイト、JavaScriptによる動的なサイトなどなど)によっても結果は違ってくるものと思いますので、少しでも高速化したいと思う場合は各自である程度の試行錯誤は必要でしょう。
今回の記事も、このエス技研ブログで使うことを前提に実験をしている記事となりますので、WordPressに提供されているプラグインとの比較の内容になっています。
そのため、WordPress以外の CMSや静的な HTMLのサイトなどの場合は、比較するまでもなく mod_pagespeedを使って実装すると便利に高速化が出来るでしょう。
Lazy Load(画像呼び出しの最適化)
Lazy Loadは先にも説明した通り、画像を適時に読み込む処理です。
「PageSpeed Insights」での計測で、Lazy Loadの有無によって 10~15ポイントも差が出ますので、Lazy Loadはいずれかの方法で導入は必須の処理です。
プラグインの BJ Lazy Loadは画像以外の iframeなども処理が可能で、細かな設定が行えるために、私はプラグインの BJ Lazy Loadを使うことにしました。
ただ、mod_pagespeedとの比較実験では明確な差は見られませんでしたので、好みでもいいのではないでしょうか。
Lazy Loadを有効にする場合は下記を追記します。
1 |
ModPagespeedEnableFilters lazyload_images |
画像の最適化
画像を最適化するプラグインとしては「EWWW Image Optimizer」がメジャーです。
そのため、すでに「EWWW Image Optimizer」によって画像を管理している場合は、改めて画像の最適化をする必要はないと思いますので、「rewrite_images」を Offにしておく方がサーバの処理が無駄にならずに済むでしょう。
1 |
ModPagespeedDisableFilters rewrite_images |
画像の最適化に関しては、「rewrite_images」が Onになっているときにそれに関連する設定が付随して呼び出されるものが多いため、「rewrite_images」を Offにすることで画像に関連する最適化をまとめて無効にできます。
ただ、「rewrite_images」は、画像そのものの最適化だけではなく、小さい画像をインライン化(HTMLのなかに取り込む処理)する処理など、後述する「Autoptimize」の機能も有していますので、新たにサイトを構築する場合には「rewrite_images」を使うことを前提にプラグインを選定していくのも良さそうです。
HTML、CSS、JavaScriptの最適化
HTML、CSS、JavaScriptの不要なコードを削除したり、ファイルを統合させたり、読み込むタイミングを変えたりといった最適化を行い、レスポンスを速くしようとする仕組みです。
WordPressのプラグインでは「Autoptimize」が有名で、「Autoptimizeで簡単設定!HTML、JS、cssを圧縮しWordPress高速化!」として記事も書いています。
Autoptimizeを使う場合など、mod_pagespeedの CSS、JavaScriptの最適化の処理を止める場合は以下の記述を行います。
1 2 |
ModPagespeedDisableFilters combine_css,rewrite_css,fallback_rewrite_css_urls,rewrite_style_attributes_with_url,flatten_css_imports,inline_css ModPagespeedDisableFilters rewrite_javascript,inline_javascript |
HTMLコメントの最適化(remove_comments)
HTMLの最適化の関連する処理として「remove_comments」があります。
これは、HTML内のコメントを削除する処理ですが、Onにする場合は下記の記述を追記します。
1 |
ModPagespeedEnableFilters remove_comments |
HTMLのコメントを削除する処理は「Autoptimize」にもありますが、一部の広告関連のタグに含まれる HTMLのコメントが影響を受けるとの指摘もあり、コメントは削除しない方がいいようです。
そのため、デフォルトでは Offになっているのではないかとも考えられます。
HTMLのリンクの最適化(trim_urls)
HTMLの最適化の処理として「trim_urls」もあります。
これは、URLを少しでも短くするために、内部リンクが URL付のリンクで設定されている場合は相対パスに置換する処理です。
有効にする場合は下記を追記します。
1 |
ModPagespeedEnableFilters trim_urls |
SEO的には URLのリンク、相対パスのいずれでも差はないと見られていますが、Google Search Console(旧 Webmaster Tools)内のヘルプで URLの記述が推奨されています。
https://support.google.com/webmasters/answer/35156?hl=ja
これは、サイトの構造が変わった場合にリンク切れになる可能性が高くなるための要望と見られています。
WordPressの場合は、構造が変わっても自動的にリンクは切り替えられますので、相対パスに切り替えられても問題ない場合が多いため、「trim_urls」を有効にしておく方がいいでしょう。
JavaScriptの最適化(defer_javascript)
HTMLの最適化の一つとして、JavaScriptの読み込みを最適化する方法があり「defer_javascript」として提供されています。
HTMLを読み込みながら JavaScriptを実行すると、処理が終わるまでページの表示が終わらず表示スピードに影響が出る場合があるため、まずは HTMLを全て読み込み終わらせて、そこから JavaScriptを実行させることによってページ表示を高速化させる仕組みです。
これを有効にするには下記を追記します。
1 |
ModPagespeedEnableFilters defer_javascript |
ページの構造に影響を与える処理が含まれる場合は不具合の原因につながりますので、Onにした場合は各ページの表示を確認しておきましょう。
headタグの最適化(add_head)
WordPressの場合は、head要素がないことはないはずなので、「add_head」を Offにして少しでも処理を減らしましょう。
1 |
ModPagespeedDisableFilters add_head |
imgタグの最適化(insert_image_dimensions)
<img> タグに widthと height属性がない場合に追加する処理です。widthと height属性を指定してある方がブラウザの画面描写が速くなるといわれています。
WordPressであれば必要ありませんが、静的なページなどではついつい忘れがちなため、widthと height属性を設定していない場合は mod_pagespeedで対応するという方法もあるでしょう。
下記の設定で有効になります。
1 |
ModPagespeedEnableFilters insert_image_dimensions |
Google Analyticsのタグの追加/書き換え(insert_ga/make_google_analytics_async)
mod_pagespeedには、Google Analyticsのタグを編集するフィルタも用意されています。
WordPressの場合は、ヘッダー、フッターとそれぞれファイルが分かれていますので、ヘッダーのテンプレートファイル 1箇所に追記すれば済みますが、静的な HTMLのサイトなどの場合であとから追加する必要がある場合などに役に立つでしょう。
また、Google Analyticsのタグは同期タグと非同期タグとありますが、非同期タグの方がページの表示に影響を与えずに処理されますので、非同期タグが推奨されています。
そのため、自動的に非同期タグに置き換えてくれるフィルタも用意されています。
1 2 3 4 5 |
## Google Analyticsのタグ設置 ModPagespeedEnableFilters insert_ga ModPagespeedAnalyticsID <Analytics ID> ## 非同期タグに置き換える ModPagespeedEnableFilters make_google_analytics_async |
mod_pagespeedは、多機能ですので全てを説明し切れていませんが、仕組みを理解するとよりよい設定が見えてきますので、その一助になればと思います。
また、各フィルタの詳細設定のためのリファレンスが下記にありますので、より詳しく知りたい方は参考にしてみてください。英語ですが...
https://developers.google.com/speed/pagespeed/module/filter-head-add
GoogleAdwords
GoogleAdwords
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです!
関連記事
-
直リンク禁止の.htaccessを超分かりやすく解説。日本語じゃなくてPHPで説明
直リンクを禁止する.htaccessの記述内容を日本語ではなくPHPで解説!私自身もこの方法ですっかり理解できました。.htaccessって簡単!って思えますよ。
-
XSERVERにCakePHP3をインストール。コマンドラインのPHPのバージョンを変更する方法で解決
XSERVERにCakePHP3をインストールするときに問題となるのはサーバーパネルとSSH接続の時とで認識されるPHPのバージョンの違いがあるため。その解消方法を解説する。
-
Pythonをコマンドラインで実行。全角文字(日本語)を引数にする場合の対処方法
Pythonをコマンドラインで実行する際、引数を付与して実行する方法の解説。その時問題となる日本語(全角文字)を利用する方法を解説。Windows環境での解説。
-
EストアのショップサーブのWordPressサービスにメリット無し
ショップサーブのオプションサービスのWordPressを使ってみましたがデータベースには直接触れず使えないサービスでした。
-
ロリポップからX-Serverに引越し。サーバの月額費用が増えても求めた理由は?
ロリポップからX-Serverに引越すその理由とは?SEOの観点からも少しでもサーバレスポンスが早いサーバが求められロリポップでは限界を感じたからです。
-
Selenium WebDriverでFirefoxをプライベートウィンドウ/Chromeをシークレットモードで起動する方法・言語はpython
Seleniumでは初期状態でブラウザを起動する Seleniumでブラウザ …
-
So-netのレンタルサーバHSはヤバイ・借りてはいけないレンタルサーバリスト
餅は餅屋。サーバはサーバ屋が提供するサービスを利用するべきという記事で、単独でSo-netを紹介。OEMでサービスの提供を受けているだけなので何とも残念すぎる内容。
-
エックスサーバーで独自SSLは永久無料で取り放題。利用方法と理由を解説!
エックスサーバーでは独自SSLが無料でいくつでも設置できるように!しかも、国、都道府県などの数項目の入力と数クリックだけという超簡単!SSL化しない理由がない!
-
Selenium WebDriver、Pythonをインストールしブラウザ自動操作の環境構築手順のまとめ
ブラウザを自動操作しテストを実行するロボットをselenium WebDriver+Pythonの環境を構築し、動作確認までの手順のまとめ。初心者向けに詳細解説。サンプルソースも。
-
Gitで基本的なデプロイ(push、pullで本番公開)環境を作る手順解説
開発進行中の環境、公開中の環境にGitを導入する。その基本的な手続きを解説。Gitの導入、ローカルリポジトリを作成。リモートリポジトリを利用し、本番環境にデプロイする手続きを解説。