Google PageSpeed Insights は、WEBページの速度に関するパフォーマンスを計測して、スコア付けや、改善方法を提案してくれるサービスです。WordPressを使ったWEBサイトで、満点のスコア100点を取るのは、なかなか至難な技なのですが、最近話題の Luxeritas（ルクセリタス）というWordPressテーマを使えば、スコア100点を出すことも可能なようです。そこで今回は、WordPressのLuxeritasテーマを使い、Google PageSpeed Insights でスコア100点満点を取る方法をまとめてみました。
計測した環境
以下の環境で、WordPressをインストールするとはじめに作成されているサンプルページを Google PageSpeed Insight で計測しました。
- サーバ：AWS（東京）EC2 t2.micro（メモリ1GB）
- OS：CentOS7.3 (1611)
- ミドルウェア：Apache2.4、PHP7.1、MySQL5.7
- WordPressバージョン：4.7.2
- テーマ：Luxeritas1.3.1
Luxeritas（ルクセリタス）について
Luxeritas（ルクセリタス）は、かわいいマスコットキャラクターとは裏腹に、SEO対策済み、多機能、高速な動作といった特徴のある無料のWordPressテーマです。
また、Luxeritasのカスタマイズ画面はわかりやすく、補足説明でこれを設定するとどうなるのかが簡潔に書かれているのも嬉しいところです。
Luxeritas テーマのインストールと有効化
まずはじめに、Luxeritasテーマをインストールして有効化します。インストール方法は、テーマ本体と子テーマをインストールして、子テーマの方を有効化すればよいそうです。詳しいインストール方法は作者の方のサイトをご参照ください。ダウンロード | Luxeritas Theme
スコア100点満点にするための３つの設定
Luxeritasテーマインストール直後、初期設定での PageSpeed Insights スコアは以下の通りです。ここからたった３つの設定をするだけでスコア100点満点にすることができます。
- モバイル：67点
- パソコン：79点
高速化用 htaccess の追加
「Luxeritas ＞ 高速化用 htaccess」に表示された、Gzip圧縮とブラウザキャッシュの設定を、ドキュメントルート直下の「.htaccess」に追記します。
この時点で PageSpeed Insights スコアを計測してみると、これだけの設定でも10点以上もスコアが良くなります。WEBサイトの速度向上には、コンテンツ圧縮とブラウザキャッシュの設定は必須ですね。
- モバイル：79点（+12）
- パソコン：93点（+14）
jQuery を非同期にする
「Luxeritas ＞ Javascript」画面の「 jQuery を非同期にする ( 高速化するが注意が必要 )」にチェックを入れます。
この時点のスコアは以下の通りです。モバイル、パソコンともに合格点になりました。
- モバイル：85点（+6）
- パソコン：94点（+1）
CSS の内容を HTML に埋め込む
「Luxeritas ＞ CSS」画面の「CSS の内容を HTML に埋め込む ( 高速化 ? )」にチェックを入れます。
この設定でグッとスコアが上がって、モバイル、パソコンともにめでたく100点満点です！(^^)/
- モバイル：100点（+15）
- パソコン：100点（+6）
注意点
この記事では、とにかくスコア100点満点を出すことを目的にしているので、上の設定をすることはまったく問題にはなりませんが、実際のWEBサイトでは、カスタマイズ画面の補足説明にもある通り、プラグインとの相性などに注意する必要があります。
おわりに
以前標準のWordPressテーマをカスタマイズして、スコア100点満点を出す方法を記事にしようと思ったのですが、数日間どういじくりまわしても私の知識では、せいぜいスコア80点を出すのがやっとでした(^^;) Luxeritasテーマのおかげで1つ記事が書けたことを作者の方に感謝いたします。
コメント