エックスサーバーの 「mod_pagespeed設定」で Google のサイト高速化ツールをインストールしよう!

エックスサーバー社で簡単に「mod_pagespeed」が使えるようになった

2014年11月17日(月)にエックスサーバー社から新しい発表がありました。サーバー全プランに対して、Google 社の開発・提供している Apache 拡張モジュール「mod_pagespeed」をワンクリックで適用できるようになったのです。

これは国内レンタルサーバー会社として初だそうです。

この機能を利用すれば以下の効果が期待できます。

■mod_pagespeedとは

mod_pagespeedとは、Google社により開発された
Webサイトの表示速度を向上させるための拡張モジュールです。

mod_pagespeedを利用することにより
画像、キャッシュ、JS/CSSなどの最適化処理が行われ、
サーバーとクライアント間の無駄な通信を削減し、
Webサイトの表示速度をより高速化することが可能になります。

ニュース | レンタルサーバー 高速・高機能・高安定性の【エックスサーバー】 より)

エックスサーバー社と契約していれば、簡単に利用することができるようになったので、うれしいです。

Google 社の開発した Apache の拡張モジュール「mod_pagespeed」とは

多くのレンタルサーバーではサーバーを動かすために「Apache」が使われています。

Welcome    The Apache HTTP Server Project

Welcome! – The Apache HTTP Server Project

これは無料・オープンソースで開発されている Web サーバーソフトであって、世界中で広く普及しています。ローカル環境を構築するために利用されている XAMPP でも、インストールするのは「Apache」です。

Apache HTTP Server – Wikipedia

「Apache」には機能を拡張させるモジュールがあり、そのなかの1つとして、Google 社の開発したのが「PageSpeed Module」とのことです。

PageSpeed Module Make the Web Faster — Google Developers

今回、「エックスサーバー社がそれをワンクリックで行えるようにした」とありましたが、じつは利用したいと思えば数年前から利用することは出来ました。

しかし、自分でインストール作業を行わなければならず、配布ページの解説は英文であり、「Apache」の知識や技術が必要だったために、知ってはいても敬遠していた人が多くいました(自分もその一人)。「ややこしい作業を抜きにしてワンクリックで行えるようになった」というのが、エックスサーバー社を利用する人にとってありがたいところです。

このモジュールの詳しい解説は、英語になりますが、公式ページに書かれています。約1時間の動画もどうぞ。

PageSpeed Module – Make the Web Faster — Google Developers

modpagespeed – Apache module for rewriting web pages to reduce latency and bandwidth – Google Project Hosting

日本語の解説を希望されるのであれば、サイバーエージェント社による「テックレポート – TechReport」が必読です。

mod_pagespeedの概要と導入について | 株式会社サイバーエージェント

また、IBM developerWorks (日本語版)でも解説が読めます。

mod_pagespeed を利用して純粋に速度を高める | IBM developerWorks

もっと簡単に、要点のまとまった記事であれば、こちらが参考になります。

インストールするだけ! お手軽サイト高速化ツールGoogle mod_pagespeedはスゴかった | 編集長ブログ―安田英久 | Web担当者Forum

「mod_pagespeed」をざっくりと理解する

わたしはプロではないので、とりあえずざっくりと理解しておきたいと思いました。知っておきたいのは、以下の4点。

  • 「どんな仕組みなのか?」
  • 「何ができるのか?」
  • 「どんなメリットがあるのか?」
  • 「どんなデメリットがあるのか?」

くわしい内容と検証結果は、先ほどのリンク先を参照するとして、要点だけをまとめていきます。

「どんな仕組みなのか?」

「PageSpeed Module」は「Apache」の拡張機能です。

PageSpeed Module

PageSpeed speeds up your site and reduces page load time. This open-source web server module automatically applies web performance best practices to pages and associated assets (CSS, JavaScript, images) without requiring that you modify your existing content or workflow. (PageSpeed は、あなたのサイトを高速化し、ページの読み込み時間を短縮します。このオープンソースの Web サーバモジュールは自動的に既存のコンテンツやワークフローを変更することを必要とせず、ページと関連するアセット(CSS や JavaScript、画像)への Web パフォーマンスのベストプラクティスを適用します。)

modpagespeed – Apache module for rewriting web pages to reduce latency and bandwidth – Google Project Hosting より)

ここにもあるように、WordPress などの CMS にあるコンテンツやワークフローを変更することなく、Apache の拡張機能として働き、サイトの高速化に寄与してくれます。

なぜどんな CMS でも自動的に最適化できるのかというと、mod_pagespeed は Apache の一部として動作していて、ページへのアクセスがあるたびに、設定された最適化処理をした HTML などをブラウザに渡す動作を mod_pagespeed がしているからです。

ユーザーがサイトにアクセスすると、まず Apache が対応して、CMS を呼び出して、CMS から出力された HTML を Apache がユーザーのブラウザに送信します。その最初の対応部分と最後の送信部分で mod_pagespeed が割り込んで処理をしているわけです。

ですから、いままで運営していたサイトの Web サーバーに mod_pagespeed をインストールすると、その直後から高速化されますし、そのあとにサイトをどんどん更新したりリニューアルしたりしても、それがすべて高速化されるというわけです。

インストールするだけ! お手軽サイト高速化ツールGoogle mod_pagespeedはスゴかった | 編集長ブログ―安田英久 | Web担当者Forum より)

エックスサーバー社のマニュアルにわかりやすい図解がありました。

mod_pagespeed設定をONにした効果

mod_pagespeed設定について – エックスサーバー マニュアル | レンタルサーバー 高速・高機能・高安定性の【エックスサーバー】 より)

「何ができるのか?」

「mod_pagespeed」をインストールすれば、Web サイトの高速化に大きく寄与します。ファイルを圧縮してデータ転送量を削減したり、CSS や JavaScript など同種のファイルをひとつにまとめて HTTP リクエスト数を削減します。これらの処理により、サイトにアクセスしたブラウザはロード時間を短縮できるため、Web サイトの表示速度が速くなるのです。

【主な最適化処理】

  • 画像の最適化・圧縮・リサイズ
  • CSS や JavaScript ファイルを連結、縮小、またはHTML へのインライン化
  • キャッシュの有効期間の延長、ドメインシャーディング、ドメインの書き換え
  • JavaScript と画像の遅延ロード
  • その他いろいろ

ほかにも自動的にスプライト画像を作ってくれたり、HTML に書かれたコメントを削除したり 、ヘッダー内にあるCSS と JavaScript の参照 URL の記述を整理してくれたり、Google アナリティクスのトラッキングコードを非同期読み込みにしてくれる、など数多くの最適化処理をしてくれます。

Google 社によるWebサイトのパフォーマンス基準

Webサイトのパフォーマンスの基準については、サイト速度検証ツール「PageSpeed Insights」で明確にされています。

速度に関するルール

  • リンク先ページでリダイレクトを使用しない
  • 圧縮を有効にする
  • サーバーの応答時間を改善する
  • ブラウザのキャッシュを活用する
  • リソースを圧縮する
  • 画像を最適化する
  • CSS の配信を最適化する
  • 見える範囲のコンテンツを優先する
  • レンダリングを妨げる JavaScript を削除する
  • 非同期スクリプトを使用する

操作性に関するルール

  • プラグインを使用しない
  • ビューポートを設定する
  • コンテンツのサイズをビューポートに合わせる
  • タップ ターゲットのサイズを適切に調整する
  • 読みやすいフォント サイズを使用する

PageSpeed Insights のルール – PageSpeed Insights — Google Developers より)

この項目を見るとわかるように、とくに「速度に関するルール」が改善されるようです。

「どんなメリットがあるのか?」

  • インストールするだけでいい
  • あとは何も設定しなくても「mod_pagespeed」が自動的に最適化してくれる

インストールしたらそれだけでいいので、めちゃくちゃ楽ですね。

「どんなデメリットがあるのか?」

  •  インストール作業には Apache などの知識と技術の理解が必要
  • Web サーバー側で最適化処理を行うので、メモリ使用量やCPU負荷が若干上がる
  • ブラウザやコンテンツによっては、ごく稀に Web サイトの表示が崩れるなど、通常とは異なる動作を引き起こす可能性がある

「mod_pagespeed」は「サイトを閲覧する人がブラウザで体感する表示速度を向上させるためのもの」であるらしく、サーバーの処理を軽快にする処理とは違うみたいです。したがって、このモジュールをインストールすると、若干ですがサーバーへの負荷がかかります。

エックスサーバーの「mod_pagespeed設定」を ON にする手順

エックスサーバー社の「mod_pagespeed設定」を ON にする手順です。マニュアルはこちら。

mod_pagespeed設定について | エックスサーバー マニュアル

まずサーバーパネルにログインします。

サーバーパネルのログイン画面

サーバーパネルで、設定をするドメインに変更してください。

Xserver サーバーパネル

「ホームページ」欄のところにある「mod_pagespeed 設定」をクリックすると、以下の画面に切り替わります。

Xserver サーバーパネル mod_pagespeedをONにする

「ONにする」を選ぶだけです。

Xserver サーバーパネル mod_pagespeedをONにして完了した表示

これで完了です。簡単ですね。

本当にワンクリックでインストールできました。もうこの瞬間から、「mod_pagespeed設定」は有効になって、効果が出ています。

検証結果

検証は「PageSpeed Insights」「GTmetrix」「Pingdom Website speed test」で行いました。

検証ツールによる表示速度は「とくに変化なし」

結果は

表示速度: とくに変化なし

でした。あるいは、「ほんの少し遅くなったのかもしれないなー」という感じです。ただし、これらの検証ツールは時間帯によって数値が変わってくるので絶対視するより参考程度でいいと思っています。

それに当ブログはすでにプラグインを多数使っていて、初期状態でのWordPress の検証結果ではありません。HTML・CSS・JavaScript などは圧縮・連結の最適化処理をしていますし、画像は Jetpack による CDN を利用しています。キャッシュ系プラグインもいくつか入っています。

目に見えて変わった点を書いていきましょう。

「PageSpeed Insights」での検証結果

Google 社の開発したモジュールなので、まずは「PageSpeed Insights」から見てみます。

「画像を最適化する」が出なくなった

表示されるサイトの画像は Jetpack による CDN 経由になっているのですが、人気記事一覧を表示してくれるプラグイン「WordPress Popular Posts」で表示される画像などには、適用されていませんでした。

それが「mod_pagespeed」をインストールしたことで改善されました。具体的には、いままで

画像ファイル.png

だった画像ファイルが、

画像ファイル.png.pagespeed.ic.-npOIe1jT2.png

のように置き換わっています。サイズを最適化したり、不要なメタデータを削除するなど、いろいろな処理を施したものになってます。

これで画像に関する警告がなくなりました。

「サーバーの応答時間を短縮する」が出なくなった

いままでいろいろとキャッシュ系プラグインを付けたり外したり、画像の最適化処理をしたり、CSS や JavaScript のファイル圧縮・連結を試して90点以上だったとしても、このところいつも最後まで残っていた項目です。

ひどいときには「サーバーの応答時間が1.6秒もあるので何とかしなさい!」と警告が来たのですが、これが全く出なくなりました。

「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」は少しの変更

こちらはプラグインですでに圧縮・連結をしていますが、その新しく作成したファイルをさらに書き換えているようです。たとえば、スタイルシートは

style.css.pagespeed.cf.gA-jdLAijo.css

のように変わっていました。圧縮処理などが施されて、「GTmetrix」の「Minify CSS」ではグレードA の99%(残り119Bのみ削減可能)になっていました。

残りは広告とソーシャルボタン関連に

上記のように多くの改善点が見られます。その結果、残っている修正項目は、

  • 「ブラウザのキャッシュを活用する」の Google Adsense 広告の配信、Google アナリティクス、ソーシャルボタン
  • 「JavaScriptを縮小する」の Facebook のフォローボタン
  • 「画像を最適化する」の Google Adsense 広告

だけです。外部からの広告画像や JavaScript とソーシャルボタン関連ですね。まあ、これらのことはもうやらなくていいかな、と思っています。

【追記:11月25日】

その後、数日経ってからの報告です。PC・モバイル共に、広告とソーシャルボタンの指摘がなくなり、現在は

スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

だけになっています。

「GTmetrix」「Pingdom」での検証結果

とくに目立った変化は「ページサイズが増えた」という点です。1.2~1.5倍くらいになっています。いくつかのファイルからインライン化されたものがあるのでしょうか。「これが原因だ!」と特定はできなかったですが、数値上は増えていました。

その他の点については、ふだんから詳細にデータをとってないので何となくですが、ほとんど変化を感じられませんでした。

 さいごに

当ブログはそんなに多くのアクセスがあるサイトではありません。いくつかのキーワードであれば検索トップに来る記事もありますが、大々的に自慢するほどのPV数はありません。

なので、アクセス数の少ないサイトであれば、「mod_pagespeed」の効果を実感できないかもしれません。すでにプラグインや CDN などでギリギリまで最適化設定をしているのであれば、モジュールの効果はごく少ないレベルにとどまってしまうのかもしれません。

ただし、この「mod_pagespeed」をテストした記事をいくつも読んでみると、そのほとんどが高評価で、導入できるのであれば導入することをおすすめする人ばかりです。何よりもインストールすればほとんどの最適化処理を自動的にやってくれるので運用の手間がかなり省けます。「これからの Apache の標準モジュールになるのではないか」と考えている人もいました。

今回、いろいろ調べてみて Apache のことをもう少し勉強してみたくなりました。よく行く四条通のジュンク堂にはなかったですけど、このあたりが良書のようですね。

 

もし、Web サイト高速化に関して、少ない手間で行いたいという方や、いろいろなプラグインや設定などをするのがよくわからない方、あるいはこれからの標準モジュールになりそうな「mod_pagespeed」を試してみたいという方であれば、この機能をおすすめします。

いまのところワンクリックで設定できるのはエックスサーバー社だけです。

関連記事

検索エンジンに残ったウェブページのキャッシュを削除する方法

基本的に、検索エンジンにキャッシュされているウェブページの古い情報を消去したいときには「noarchive タグ」を利用します。 たとえばネットショップの商品ページで、商品の種類や値段が頻繁に変わる場合などに使われるそうです。メンバーシップ…

自分のブログの RSS フィードの調べ方

WordPressの場合だと、RSSフィードはすでに用意されているようです。 詳しいことは「WordPress Feeds « WordPress Codex」に書いてあります。全文英語で書かれていますが、真ん中手前にある以下の欄を参考にす…

eo光ネットのファミリーパックなら「多機能レンタルルーター+総合ウイルス対策ソフト+迷惑メールチェック機能+メールアドレス5つ」が月額477円!

eo光ネットなら「ファミリーパック」がおすすめ ケイ・オプティコムのeo光ネットではいろんなサービスがありますけど、それらをセットにして加入できるプランが用意されています。なかでもありがたいのが「ファミリーパック」で、我が家でも利用していま…