ウェブサイト運営

エックスサーバーの 「mod_pagespeed設定」機能についてのメモ

投稿日:2018年12月5日 更新日:

2019年3月27日:「mod_pagespeed設定」機能の新規設定の受付が終了しました。

「mod_pagespeed設定」機能の新規設定の受付終了について – 2019/03/27 | レンタルサーバー【エックスサーバー】

このページでは、エックスサーバーの 「mod_pagespeed設定」機能についての情報を書いていきます。

PageSpeed モジュール

エックスサーバーの 「mod_pagespeed設定」機能は、Google社が開発した PageSpeed モジュール を利用した機能です。

PageSpeed モジュール
PageSpeed モジュール

PageSpeed モジュールは、ウェブサーバーに組み込んで使用するタイプのプログラムで、Apache用 と Nginx 用の2種類が提供されています。

エックスサーバーの 「mod_pagespeed設定」機能

エックスサーバーの「mod_pagespeed設定」機能では Nginx用の PageSpeed モジュールを使っているようです。

この機能が何をするのかについて、エックスサーバーからは以下のように説明されています。

本機能を有効にすることで以下のような最適化処理が実施されます。

  • CSSファイル、JavaScriptファイルなどの圧縮
  • 最適な画像タイプへの変換、軽量化
  • 同種のファイル(画像、CSS、JavaScriptファイルなど)を一つにまとめ、サーバーとクライアント間の無駄な通信(リクエスト)を削減
  • CSSファイル、JavaScriptファイル、画像ファイルのキャッシュ有効期間の延長
  • 小さなファイルサイズのCSSやJavaScriptをHTML内に埋め込む

など。

引用元:mod_pagespeed設定 | レンタルサーバー【エックスサーバー】

「mod_pagespeed設定」機能を有効にする

ドメイン単位で「有効/無効」を切り替えることができます。

また、Xアクセラレータ機能を有効にしておかないと、mod_pagespeed機能は使えません。

mod_pagespeed機能を使うには、Xアクセラレータを有効にする
mod_pagespeed機能を使うには、Xアクセラレータを有効にする

少し実験

この機能によってどのような動作になるのか、簡単にテストしてみましたので、そこから分かったことを一部書いておきます。

例えば、https://example.com/ にアクセスして表示されるページの中に、以下の linkタグがあったとします。

<link rel="stylesheet" id="style-css"
      href="https://example.com/css/style.css?ver=1"
      type="text/css" media="all">

これを受け取ったブラウザは、href 属性で指定されている https://example.com/css/style.css?ver=1 にアクセスして CSSファイルを取得しページのレンダリングに利用します。

再度、このウェブページにアクセスすると、今度は PageSpeed が加工を加えた HTML が返ってきます。
こちらの HTML では、先程の linkタグが以下のように書き換えられています。

<link rel="stylesheet" id="style-css"
      href="https://example.com/css/style.css,qver=1.pagespeed.ce.XXXXXXXXXX.css"
      type="text/css" media="all">

当然ブラウザは、今度は https://example.com/css/style.css,qver=1.pagespeed.ce.XXXXXXXXXX.css にアクセスして CSSファイルを取得します。こちらは、PageSpeed が最適化を加えた CSSファイルになっているため転送速度や解析処理の短縮が望めるというわけです。

これは一例に過ぎませんが、PageSpeed はウェブブラウザに返す HTML を書き換えることによって、独自に最適化を施した CSSファイル・JavaScriptファイル・画像ファイルを読み込ませるという処理を行っているようです。

注意点

  • CSS ファイルなどを編集して、実際の表示を確認するような作業を行う時には、この機能をオフにしておきましょう。

メモ

  • 今回 圧縮していない CSSファイル(余分なスペースや改行を削除していない)が PageSpeed によって別のURLになって転送されましたが、圧縮処理はされていませんでした。そのためファイルサイズは元のままです。それでありながら、PageSpeed の処理が増えているわけですから、TTFB(初期レスポンスの待機にかかった時間。最初のバイトを受け取るまでの時間)は大きくなることがありました。ということで、ウェブサイトによって効果の大きさは違うと思われるため、それぞれのウェブサイト毎に効果測定を行って採用するかどうかを決めることになりそうです。
  • 「mod_pagespeed設定」機能を使うと、HTTPレスポンスヘッダに cache-controlフィールドや expiresフィールドが出力されていました(有効期間は1年間)。これによるブラウザキャッシュの効果も期待できます。
    • 「ブラウザキャッシュ設定」機能もこれらのフィールドを出力しますが、「mod_pagespeed設定」機能による出力が優先されるようです。
  • cache-controlフィールドや expiresフィールドで指定された有効期限に達する前に、PageSpeed がキャッシュを更新する時があったのですが、条件はよく分かりませんでした。

-ウェブサイト運営

執筆者:fitallright

関連記事

no image

【エックスサーバー】「Xアクセラレータ」機能

2018年9月 Xアクセラレータ Ver.1 2018年9月11日 エックスサーバーに「Xアクセラレータ」という機能が追加されました。 従来の10倍以上のアクセス処理性能!Webサイトの高速化・同時ア …

ウェブサイト移転時、新旧どちらのサイトが表示されているか区別できるようにしておきましょう

ウェブサイトを別のサーバーに引っ越しする際、「ドメイン名とサーバーのIPアドレスの対応付け情報」をネームサーバーで変更するわけですが、この作業中にいつものURL(ドメイン名)でウェブサイトにアクセスし …

no image

【エックスサーバー】ブラウザキャッシュ機能

2018年9月6日 エックスサーバーに「ブラウザキャッシュ設定」機能が追加されました。 Expiresヘッダで表示速度を向上!「ブラウザキャッシュ設定」機能提供開始のお知らせ – 2018 …

no image

Google Analytics のタグ(トラッキングコード)を出力する WordPress プラグイン

WordPress のプラグインには、Google Analytics のタグを出力してくれるプラグインが複数存在していますが、どれを使えばよいのでしょうか? ここでは、お勧めプラグインを紹介します。 …

no image

【エックスサーバー】「Xアクセラレータ」機能の標準有効化について

2018年11月29日以降、エックスサーバーの「Xアクセラレータ」機能が標準で有効化されます。 (対象となるサーバーに順次適用されていきます) ■実施日  2018年11月29日以降、順次メンテナンス …

ロリポップ!「スタンダードプラン」
さくらのレンタルサーバ「スタンダードプラン」