WordPressを高速化して「Google PageSpeed Insights」の評価を上げる方法まとめ

このブログサイトを「Google PageSpeed Insights」で評価したところ、遅いサイトの称号を与えられてしまいました。そこで、WordPressを高速化して高評価を得るまでに行った試作をまとめてみました!

WordPressを高速化して「Google PageSpeed Insights」の評価を上げる方法まとめ

Google PageSpeed Insightsでページの読み込み時間を計測する
PageSpeed Insights

Google PageSpeed Insightsでページの読み込み時間を計測

スマートフォンで100点満点中48点、PCで100点満点中61点という、危険なスコアを叩きだしてしまいました。

Google PageSpeed Insightsでページの読み込み時間を計測SP Google PageSpeed Insightsでページの読み込み時間を計測PC

そこで、「WordPress Simplicity 高速化」でGoogle検索したところ、「Simplicity」本家サイトで高速化の記事を発見しました。

ブログをダイエット!簡単15分でWordpressを高速化する為の5つの「減らす」設定

今回は、本家サイトの高速化を実際に試してみた際のメモをまとめます。また、ApacheではなくNginxを使っているので、ブラウザキャッシュの仕方が本家と異なります。その部分をより詳細にまとめます。

今回行った高速化のリスト

ブログをダイエット!簡単15分でWordpressを高速化する為の5つの「減らす」設定

に書かれている高速化を中心に、5つの高速化を行ってみました。

  1. ブログで使っている画像をプラグインを使って圧縮
  2. Nginxでブラウザキャッシュを設定
  3. リソースを圧縮し転送サイズを減らす
  4. リソースの軽量化
  5. CDNを設定して大きなファイルを別サーバーにおく

1. ブログで使っている画像をプラグインを使って圧縮

WordPressプラグイン「EWWW Image Optimizer」を使用する。

このプラグインを利用するとロスレス圧縮という、画像の質を落とさずキレイなまま画像サイズを減らすことができる。プラグインの新規追加から、「EWWW Image Optimizer」を検索し、インストールして有効化する。

1. ブログで使っている画像をプラグインを使って圧縮

設定画面にて、「This will remove ALL metadata: EXIF and comments.」にチェックが入っていることを確認。これを設定していると、撮影情報を削除することができる。

1. ブログで使っている画像をプラグインを使って圧縮

メディア->Buld Optimizeに移動し、「Start optimizing」をクリックする

1. ブログで使っている画像をプラグインを使って圧縮 1. ブログで使っている画像をプラグインを使って圧縮

2. Nginxでブラウザキャッシュを設定

今回ベースにしている「Simplicity」本家の高速化では、Apacheベースで書かれております。本ブログでは、Apacheより軽量なWebサーバーであるNginxを利用して運営しています。

Ubuntu14.04にてnginx環境を構築しWordpPressを高速に

そこで、Nginxでブラウザキャッシュを利用する方法を別に調べてみました。基本的なブラウザキャッシュの対応の仕方はApacheの場合と同じ。Apacheだと.htaccessファイルを編集するがが、Nginxの場合は.confファイルを変更していく。

Nginxの.confファイルは、/etc/nginx/site-availableにあります。該当する.confファイルを開き、以下のコードを追記するだけの簡単設定。

本家の高速化と同じく、キャッシュの期間を1週間に設定する。最後に忘れずに、Nginxを再起動する。

以下の記事を参考にしました。

Nginxでブラウザのキャッシュを活用する

3. リソースを圧縮し転送サイズを減らす

リソースの圧縮転送とは、サーバー側でリソースを圧縮してから転送しブラウザ側で展開して表示させる仕組みです。ブラウザで「このサイト思いなあああ」と感じる場合、表示の部分に負担がかかっていない場合がほとんどです。通信の部分が一番ボトルネックになっているのです。どの高速化にも共通の考え方になるのですが、通信の負担をできるだけ減らすのがポイントになります。

Nginxでリソースの圧縮転送を実現するには、ブラウザキャッシュと同じ設定ファイルに追記していく。Nginxの.confファイルは、/etc/nginx/site-availableにあります。該当する.confファイルを開き、以下のコードを追記する。

最後に忘れずに、Nginxを再起動する。

以下の記事を参考にしました。
nginxパフォーマンスチューニング〜静的コンテンツ配信編〜 – Qiita

4. リソースの軽量化

jQueryのライブラリやプラグインを使ったことがあると、「〇〇.min.js」というファイルをよく見かけます。「.min」は「minify」の略で、コードに含まれる無駄な改行や余白やコメントを削除し軽量化したファイルを意味します。

なので、「〇〇.min.js」ファイルを開いてみると、人では理解できないコードになっています。リソースを軽量化するためのプラグインは数多くあるのですが、「Simplicity」本家でも紹介されている「Autoptimize」を使用してみます。

4. リソースの軽量化

プラグインの新規追加から、「Autoptimize」を検索し、インストールして有効化する。

autoptimize_setting

設定画面にて、

  • Optimize HTML Code? HTMLコードの軽量化
  • Optimize JavaScript Code? JavaScriptコードの軽量化
  • Optimize CSS Code? CSSコードの軽量化

をチェックして、「Save Cahges and Empty Cache」ボタンをクリック。

5. CDNを設定して大きなファイルを別サーバーにおく

CDNとはコンテンツデリバリーネットワークの略で、画像などの大きなサイズのファイルを専用のサーバーで配信する最適化ネットワークのことです。画像などの静的なファイルを別サーバーに置くことで、画像配信の負荷を軽減に繋がります。

WordPressが提供する「JetPack」というプラグインの機能の一つである「Photon」を有効化することで、簡単にCDNを導入することができます。

【完全保存版】WordPressでブログサイトを運営するためにやった設定リスト

にて、JetPackのインストール方法は紹介しました。

5. CDNを設定して大きなファイルを別サーバーにおく

JetPackの設定画面で、Photonを有効化するだけで簡単に導入できます。

5つの設定前後でページ読み込みスピードが改善されたか

今回の設定以前は、スマートフォンで100点満点中48点、PCで100点満点中61点というスコアでした。

Google PageSpeed Insightsでページの読み込み時間を計測SP Google PageSpeed Insightsでページの読み込み時間を計測PC

今回の5つの設定後は、スマートフォンで100点満点中67点、PCで100点満点中82点というスコアになりました。赤い危険な表示から、ちょっと危ない黄色表示になったので、ほんのすこし安心しました。

PageSpeed_Insights_after_sp PageSpeed_Insights_after_pc

でも、まだまだ足りなそうなのでまた時間があるときに対応していきたいと思います。


もしよければ応援クリックお願いします
↓↓↓↓↓
にほんブログ村 IT技術ブログ IT技術メモへ