[Apache]modpagespeedでWEBサービスを爆速化する

modpagespeedとは

modpagespeedとはApacheモジュールとして提供されているWEBのベストプラクティスを自動的に適用してくれるオープンソースのモジュールです。
このモジュールのよいところは、現在動いているプログラムに対して何も変更を加えなくても最適化してくれるところにあります。

現在10万以上のサイトに適用され、その数も日々増えていることでしょう。

具体的なベストプラクティスは以下のページで紹介されています。

modpagespeed

modpagespeedをサイトに適用してみた

適用前後のパフォーマンス検証を行うために、スピード測定ができるWEBサービスのGTmetrixを利用しました。
※GTmetrixとは、GoogleのPage Speed InsightsとYahoo のYSlowのスコアを同時に計測することができるWEBサービス
スクリーンショット 2013-05-18 20.48.34

[BEFORE]まず、適用前です。
スクリーンショット 2013-05-18 20.49.01

[AFTER]つぎに、適用後です。
スクリーンショット 2013-05-18 20.53.09

簡単なページでのテストですが、劇的に改善されています。

Page Speed Insights F grade B Grade
YSlow C grade A Grade
読み込み時間 1.39sec 1.05sec
ページサイズ 243KB 84.7KB
リクエスト数 11 8

modpagespeedのベストプラクティス

○画像ファイルの圧縮、最適化
○スタイル、スクリプトの結合、最小か
○外部ファイルの遅延ロード
などなど

modpagespeedをインストールしてみる

まずは、以下のリンクからサーバのOSやビット数別のrpmモジュールをダウンロードします。
https://developers.google.com/speed/docs/mod_pagespeed/download

ダウンロードしたら適用するサーバに配置しrpmコマンドをたたきます。

[root@www.web.server]# rpm   -Uvh    --test    mod-pagespeed-stable_current_x86_64.rpm 
警告: mod-pagespeed-stable_current_x86_64.rpm: ヘッダ V4 DSA signature: NOKEY, key ID 7fac5991
準備中...                ########################################### [100%]
[root@www.web.server]# rpm   -Uvh  mod-pagespeed-stable_current_x86_64.rpm 
警告: mod-pagespeed-stable_current_x86_64.rpm: ヘッダ V4 DSA signature: NOKEY, key ID 7fac5991
準備中...                ########################################### [100%]
   1:mod-pagespeed-stable   ########################################### [100%]
job 1 at 2013-05-18 20:52

そして、modpagespeedの設定ファイルが追加されていることを確認します。
※httpd.confでconf.d配下のconf拡張子がIncludeされていること、これがない場合は個別にIncludeしてください。

[root@www.web.server]# ls -ltr /etc/httpd/conf.d/
合計 80
-rw-r--r-- 1 root root   674  2月  3  2012 php.conf
-rw-r--r-- 1 root root   560  2月 16  2012 proxy_ajp.conf
-rw-r--r-- 1 root root   299  2月 24  2012 welcome.conf
-rw-r--r-- 1 root root   392  2月 24  2012 README
-rw-r--r-- 1 root root 45859  5月  2 04:41 pagespeed_libraries.conf
-rw-r--r-- 1 root root 15338  5月  2 04:41 pagespeed.conf

Apacheを再起動します。

[root@www.web.server]# /etc/init.d/httpd configtest
[root@www.web.server]# /etc/init.d/httpd restart

なんて簡単なの。

[WordPress]固定ページのカスタムテンプレートを作成する

カスタムテンプレートとは

WordPressで固定ページを作成する際に利用するテンプレートのことを指しています。テーマがtwentyelevenの場合、テンプレートは以下のディレクトリに配置されています。

${WP_HOME}/wp-content/themes/twentyeleven/

初期状態ではデフォルトテンプレート, Showcase Template, Sidebar Templateがありますが今回はこちらに新規テンプレートを追加します。

新規作成方法

1. ${WP_HOME}/wp-content/themes/twentyeleven配下にtest.phpを配置します。
2. test.phpのヘッダーに以下を追加します。

<?php
/**
 * Template Name: Test Template
 */

3. test.phpをカスタマイズします。

新規テンプレートを利用した固定ページの作成方法

ADMINのダッシュボードから固定ページを選択し、新規作成か既存の固定ページを編集します。そして、ページ属性のテンプレートのドロップダウンリストに「Test Template」が追加されていることを確認してください。以上となります。