WordPress で PageSpeed Insights スコア100点を取る方法

WordPress で PageSpeed Insights スコア100点を取る方法
あぱーブログ
2017年2月22日  カテゴリー:WEB  タグ: , ,
Pocket
LINEで送る

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テーマをインストールして有効化します。インストール方法は、テーマ本体と子テーマをインストールして、子テーマの方を有効化すればよいそうです。詳しいインストール方法は作者の方のサイトをご参照ください。ダウンロード | Luxeritas Theme

Luxeritasテーマを有効化している画面

スコア100点満点にするための3つの設定

Luxeritasテーマインストール直後、初期設定での PageSpeed Insights スコアは以下の通りです。ここからたった3つの設定をするだけでスコア100点満点にすることができます。

  • モバイル:67点
  • パソコン:79点

高速化用 htaccess の追加

「Luxeritas > 高速化用 htaccess」に表示された、Gzip圧縮とブラウザキャッシュの設定を、ドキュメントルート直下の「.htaccess」に追記します。

高速化用htaccessが表示されている画面

この時点で PageSpeed Insights スコアを計測してみると、これだけの設定でも10点以上もスコアが良くなります。WEBサイトの速度向上には、コンテンツ圧縮とブラウザキャッシュの設定は必須ですね。

  • モバイル:79点(+12)
  • パソコン:93点(+14)

jQuery を非同期にする

「Luxeritas > Javascript」画面の「 jQuery を非同期にする ( 高速化するが注意が必要 )」にチェックを入れます。

「 jQuery を非同期にする ( 高速化するが注意が必要 )」をチェック

この時点のスコアは以下の通りです。モバイル、パソコンともに合格点になりました。

  • モバイル:85点(+6)
  • パソコン:94点(+1)

CSS の内容を HTML に埋め込む

「Luxeritas > CSS」画面の「CSS の内容を HTML に埋め込む ( 高速化 ? )」にチェックを入れます。

「CSS の内容を HTML に埋め込む ( 高速化 ? )をチェック

この設定でグッとスコアが上がって、モバイル、パソコンともにめでたく100点満点です!(^^)/

  • モバイル:100点(+15)
  • パソコン:100点(+6)

モバイル:100点

パソコン:100点

注意点

この記事では、とにかくスコア100点満点を出すことを目的にしているので、上の設定をすることはまったく問題にはなりませんが、実際のWEBサイトでは、カスタマイズ画面の補足説明にもある通り、プラグインとの相性などに注意する必要があります。

おわりに

以前標準のWordPressテーマをカスタマイズして、スコア100点満点を出す方法を記事にしようと思ったのですが、数日間どういじくりまわしても私の知識では、せいぜいスコア80点を出すのがやっとでした(^^;) Luxeritasテーマのおかげで1つ記事が書けたことを作者の方に感謝いたします。

スポンサーリンク
Pocket
LINEで送る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です