ブログ初心者もできる! WordPressサイトの表示速度を改善する方法 【STORK(ストーク) 使用】

この記事では、Wordpressサイトの表示速度改善のために試したことをまとめます。

当ブログでも使用しているWordpressテーマ STORK（ストーク）
抜群の人気テーマですが、ストークは表示速度が遅いという記事も散見されます。

当ブログも記事数が増えてきて、ページの表示速度が気になっておりました。

記事内に画像をたくさん使っていて、
ページの表示速度は気になっていたけど、色々な操作をすることで不具合が出そうで怖い、、
↓↓↓↓↓
という、ブログ初心者

であるボクが、設定が簡単なプラグインを使用して、表示速度アップに挑戦しました。

STORKの表示速度は速くなった？

どのくらいの改善があったか比べてみましょう。
サイト速度分析ツール GT metrix の評価で比較します。

改善前の評価がこちら

詳細は後述しますが、サイト表示速度が9.1sかかっていますね。

改善後の評価

結構頑張った気がします!
表示速度が4.0sまで短縮できたのは嬉しいです。

これくらい改善は、初心者さんでも十分できます。
ぜひチャレンジしてください!

今回検証したWEB環境

WordPressのカスタマイズ・プラグイン関係の記事はたくさんありますが「自分のWEB環境でも同じことできるの？」って疑問や不安に思いませんか？

ボクは思うんですよね、「これやって大丈夫かな？」って。

特にWordpressのカスタマイズ系の記事は、「プラグインのインストールにはWordpressテンプレート、レンタルサーバとの相性もありますのでインストールの際は十分注意してください」みたいなこと書くじゃないですか、要は自己責任ってわけです。

それならば、カスタマイズした時のWEB環境（サーバなど）、Wordpressのバージョン、テンプレートのテーマ名は明記してほしいと思うわけです。

というわけで、表示速度改善時のボクのWEB環境をまとめました。

まず、改善前のページ速度を検証しました。

サイトの表示速度を計測する方法

サイトの表示速度は無料で簡単に測定できます。
今回は以下の2つを使いました。

• Google PageSpeed Insights
• GT metrix

Google PageSpeed Insights

Google PageSpeed Insights は、Googleが提供しているサイト速度計測ツールです。
URLを入力するだけで、PCとモバイルの表示速度(採点)が計測できます。

結果表示もシンプルでわかりやすいです。
表示速度の測定だけでなく、改善点の指摘もしてくれるので参考になりますよ。

GT metrix

GT metrix も無料で表示速度と改善点を分析してくれるツール。
有料版を使用すると履歴を残せるようですが、基本無料版でOKだと思います。

GT metrixでは、GoogleとYahooのサイト速度計測が同時にできるのが特徴ですね。

GT metrixはサイトのパフォーマンスをA〜Fで評価判定します。
評価項目も非常に細かいので、より深くチェックしたい方におすすめです。

計測方法は、URLを入力して「Analyze」をクリックするだけです。

改善前のページ表示速度を計測

Google PageSpeed Insightsの測定結果

70点以上あれば問題なし、と言われているようです。(根拠はわかりませんが、、)
いずれにしても50点台は問題ありかと思います。

もちろん100点が出れば嬉しいですが、Googleアドセンスなどを使用している場合、100点は出ないでしょう。
これは、アドセンスのプログラムを読み込む都合上、仕方ないかなと思います。

GT metrixの測定結果

PageSpeed Score(Googleの速度計測) がE評価
YSlow Score(Yahooの速度計測) がD評価

といった結果でした。

今回は表示速度の数値改善を重点的に行います!

GT metrix の各評価項目は、ブログのページ表示速度がわかる GT metrix で改善点と対策をチェック! の記事で紹介しています。

以降、改善を行うごとにGT metrixの測定結果を提示していきます。
期待した結果が出なかったり、逆に遅くなっていたりとありますが、最終結果はそれなりの数値になっています。

また、測定結果は同じ状況下で複数測定すると結果が違うこともありました。
あくまで参考数値として活用した方が良いでしょう。

ストークの表示速度改善の方法は？

ストークに限りませんが、ブログの表示速度の改善で思いつくのは以下ことだと思います。

以上4点を検証しました。

① 画像最適化ツールCompress PNG Images Online

当ブログではトップページにイメージ画像を配置しています。
その画像を圧縮することからはじめました。

画像圧縮に使ったのは、オンラインのイメージ最適化ツール Compress PNG Images Online です。

ブラウザ上で簡単に画像圧縮ができます。

対応ファイルは、JPEG、PNG、PDF。
ドラッグ&ドロップで自動圧縮されますが、画質設定することで圧縮率を高めることもできます。

画像はまとめて圧縮することも可能です。
記事作成時にまとめて圧縮して、アップロードするといいかなと思います。

アップロードした元画像は、自動で削除されるようですが、画面の「キューを削除」から元画像を削除することも可能です。

当ブログのヘッダー画像を圧縮してみたところ、元サイズ352Kあった画像を90Kまで圧縮できました。
幅2400pxの画像なので凄く軽くなりましたね。

地味な作業ですが、ヘッダー画像を使っている方はこのへんからやってみてはいかがでしょう？

② STORK(ストーク)独自の機能の検証

機能豊富なSTORK(ストーク)ですが、表示速度の面でネックになりそうな機能もあります。

• トップページのヘッダーイメージ
• スライダー付き記事一覧(pickup記事)
• アニメーション機能

スマホで動作確認をすると、「トップページのヘッダーイメージ」「スライダー付き記事一覧」の表示が遅いことがわかります。

これらの機能をOFFにすれば表示速度は改善されると思います。
また、ストークで表示速度が速いと感じるサイトは、上記の機能を使っていないサイトが多かったように思います。

ボクもOFFにしようと思いましたが、

ということで、「トップイメージ」と「スライダー付き記事一覧」はそのままにしてあります。

STORK(ストーク)のアニメーション機能をOFF

アニメーション機能もSTORKの売りの一つですが、個人的にあまり重要視していない機能なのでOFFにしました。

体感速度は速くなっているように思います。
トップページは、画像も圧縮しているので表示が速くなったような気がします。
で、GT metrixで速度を計測してみると、、

といった具合で思ったように数値に反映されませんでした。
でも、速くなったような気がするので「アニメーション機能はOFF」にしてあります。

③ プラグインで表示速度を高速化する

完全に他力本願ですが、プラグインが使えるのはwordpressの特権です。

STORK(ストーク)でサイトの速度改善を試したサイトを調べてみると、以下のようなプラグインを使っていました。

WordPressの表示速度改善でよく使われているプラグイン

• EWWW Image Optimizer
• SNS Count Cashe
• Autoptimize
• BJ Lazy Load
• W3 Total Cashe または WP Fastest Cache

STORK場合、公式サイトで相性の悪いプラグインがアナウンスされているので注意が必要です。

参考 ＞＞＞  アルバトロス・ハミングバード・ストークテーマと相性の悪いプラグイン ｜ OPENCAGE

試しにJetpack の 「photon」を有効化してみたところ、公式サイトにあるように「スマホで見たときに画像が極端に小さく表示」されました。(汗)

ザックリ言うと、Jetpack の 「photon」は画像を高速表示する機能です。
便利な機能ですが、公式サイトで注意を促しているプラグインは避けたほうが良さそうです。

また、Lazy loadは画像を読み込ませるタイミングを遅らせて表示速度を高速化するプラグインですが、Lazy load系のプラグインは他のプラグインとの相性がイマイチのようです。

BJ Lazy Load を使っているストークユーザーさんがいましたが、公式サイトでLazy load 系のプラグインに注意があったので今回は見送りました。

というわけで、今回試したプラグインはこちら

EWWW Image Optimizer

EWWW Image Optimizer は画像を最適化して表示速度を改善するプラグイン。
画像をほとんど使っていないブログには効果がなさそうですが、ボクは画像を多めに使っているので試してみました。

プラグインをインストールして、有効化させます。
設定項目はいくつかありますが、バージョン4.0.6では基本設定の変更は特に必要ないようです。

WordPress管理画面から「メディア」→「一括最適化」に進みます。
次に、「最適化されていない画像をスキャンする」をクリックします。これで対象となる画像が選ばれます。

画像の数が表示されたら、「最適化を開始」をクリックします。

最適化がはじまると、◯◯%を減少と表示されます。これが圧縮された画像のサイズですね。

各記事の作成時にCompress PNG Images Onlineで画像を圧縮していましたが、各画像が数パーセントずつ圧縮されているのがわかります。
処理が終わるのを待ちましょう。

EWWW Image Optimizer 処理後の結果はこちら
↓↓↓↓↓↓↓↓↓↓↓↓↓

Google PageSpeed Insightsの測定結果

GT metrixの測定結果

画像データは軽くできました。サイトの評価も少しずつ良くなっています。
動作に不具合も出ていません。

ボクのサイトでは速度改善に劇的な効果はなかったようですが、EWWW Image Optimizerは導入していただいて問題ないプラグインだと思います。

Autoptimize

Autoptimize は、html、css、Javaスクリプトを最適化するプラグイン。

インストール後、「設定」→「Autoptimize」へ進み、html、css、javaスクリプトのチェックをして保存するだけです。

と、書くと非常に簡単なのですが、ボクはこのプラグインを使うのをためらいました。

だって、htmやcssのコードを最適化ってどゆこと？って思いませんか？
コードを短縮したり余計な改行を削除するってことでしょうが、多少なりともhtmlやcssの知識があると、

ってメチャクチャ不安なのです。

でも、やりましたよ。
データはバックアップとってあるし、何かあってもブログのネタにもなるだろうというわけです。

で、測定結果です。
↓↓↓↓↓↓↓↓↓↓↓↓↓

Google PageSpeed Insightsの測定結果

GT metrixの測定結果

この頃は、表示速度の評価がガンガン悪くなっていて、訳がわからなくなっていました。

でも、あることに気づきました。
同じ状況で再度測定してみると、評価が変わるんですよね。

これまでの測定はプラグインを有効化させてすぐにチェックしていました。
それらも影響あったかもしれません。

ということで、気にせず突き進むことにします。

WP Fastest Cache

WP Fastest Cacheはキャッシュ系プラグインです。
キャッシュ系のプラグインは不具合の記事を見かけることも多いので避けたいところですが、ここまでイマイチ成果が上がっていないので導入しました。

当初は、W3 Total Cache を使うつもりでしたが、初心者向けにWP Fastest Cache が使いやすいとのことだったのでインストールしました。

WP Fastest Cache には 無料版と有料版がありますが、今回は無料版で進めます。

WP Fastest Cache の日本語化

最初に WP Fastes Cashe を日本語表示します。

インストール後、管理メニューのWP Fastes Cashe をクリックして、オプションの一覧を表示します。
画面の下にある「Language」から「日本語」を選び、日本語表記にします。
やはり日本語表記の方が安心ですよね。

次に設定するのは、基本設定とキャッシュの有効期限です。

WP Fastest Cache 無料版の基本設定

基本設定は上の通りです。
文字がグレイで表示されている部分は無料版では使用できない機能です。

WP Fastesr Cache の設定項目は下記の記事で紹介しています。

キャッシュの有効期限の設定

キャッシュの有効期限の画面では、キャッシュを削除する期限を設定します。

設定するときは、最初に「Add NEW Rule」をクリックします。

Cache Timeout Wizard が表示されるので、「 If REQUEST_ URL」は「全て」を選択します。

「Then」の項目はキャッシュを削除する間隔です。
ボクは「週に1回」を選択していますが、「１日に1回」でも良いと思います。

更新頻度が高い人、 SNSのシェア数を速く反映させたい人は「Then」の間隔を短く設定すると良さそうです。

設定した後は「Save」をクリックして保存します。
WP Fastest Cacheの基本設定は以上です。

WP Fastest Cache 設定後の測定結果です。
↓↓↓↓↓↓↓↓↓↓↓↓↓

Google PageSpeed Insightsの測定結果

GT metrixの測定結果

読み込み速度が初めて改善されました!
小学校時代の50m走のタイムみたいですけど、まあ良しとしましょう(笑)

WP Fastest Cacheの無料版は速度改善にはあまり効果がない。
「有料版は劇的な効果がある」といったブログ記事も見られますが、ボクの環境では無料版でも効果がありました。
有料版を使っていないのでその違いはわかりませんが、無料版も有効だと思います。

④ PHPのバージョンを上げてみる

ここからはレンタルサーバ側の設定です。

初心者としては一番手をつけたくない領域です。
サーバの操作は十分注意して作業しましょう。

以降、ロリポップサーバについての記述となります。

ロリポップサーバには、PHPバージョン7が用意されているが、、

2017年2月以降、ロリポップサーバの「スタンダードプラン」「エンタープライズプラン」ではPHP 7.1(モジュール版)が使用できます。

2017年2月以降の契約者は自動的にPHP7.1版になっていますが、それ以前の契約者はバージョンの切替え作業をしなければいけません。

これは高速化が期待できそうです!

PHPバージョン7にはCGI版とモジュール版がある？

ご覧のように、PHPのバージョン5.6のあとにCGI、モジュール版って表示がありますね。

• 5.6（CGI版）
• 7.1（CGI版）
• 5.6 (モジュール版）

モジュール版とCGI版については、ロリポップサーバ のサイトに説明がありますが、
要はモジュール版の方が高速なようです。

で、今回でいえば7.1（モジュール版）が最も高速なはずですが、、

PHP7.1以前の契約者は、PHP7.1モジュール版に対応したサーバに移設しないといけないようです。
サーバの移設って時点で超めんどくさい感じがあります。

なので、PHP7.1 CGI版で動作確認しながら様子を見ることにしました。

PHP7.1とブログテーマ、インストールしたプラグインが対応しているかチェックしよう

サーバ側でPHP7.1 CGI版に変更できますが、Wordpressを運用しているとさまざま
サクッと変更して、一瞬で画面が真っ白! ではシャレにならんのです。

今回は、PHP Compatibility Checker を使って、使用中のプラグインやテーマが切り替えたいPHPのバージョンに対応しているかチェックしました。

インストール&有効化したら、「ツール」→「PHP Compatibility Checker」を選択します。
チェックしたいバージョンを選択して「Scan site」をクリックします。

スキャンが開始されると、スキャン総数とスキャン済みの数が画面表示されます。
しばらく待ちましょう。

画像は診断結果の一部です。
警告やエラーが表示されます。Errorsになるプラグインはないようですが、Warningsがいくつかありますね、、。
「toggle details」をクリックするとエラーの詳細を確認することができます。
ストークそのものですが、Compatibleってことで大丈夫って感じですね。

ロリポップサーバの設定

ロリポップサーバの管理画面にログインし、「PHP設定」画面へ移動します。
PHPのバージョンを変更したいドメインの「バージョン」のプルダウンメニューから、7.1CGI版を選択します。

設定変更から反映まで数分かかるので、しばらく待って画面確認しましょう。
もし、画面表示がおかしくなった時はPHPのバージョンを5.6に戻すことも可能です。

Warnings の警告が出ていたプラグインは、PHPのバージョン変更後も不具合はありませんでした。
また、仮にErrosが出たとしても必ずしも不具合が出るとは限らないようです。
非常に曖昧ですが、Warningsに関しては将来的に不具合を起こす可能性がある、、。という認識のようです。
現実的な対応策としては、PHPのバージョンを変えてみて不具合があったら元のバージョンに戻すということになります。

PHPのバージョン 変更後の測定結果です。
↓↓↓↓↓↓↓↓↓↓↓↓↓

Google PageSpeed Insightsの測定結果

GT metrixの測定結果

改善前は9.1sあった Fully Loaded Timeが4.0sまで短縮できました。
また、Google PageSpeed Insightsの測定結果もPCで57点、モバイルで60点と「普通」に近づいてきました。

PHP7.1 CGI版は速度改善の点でイマイチという評価もありましたが、今回の環境では効果ありと言えます。

ここまでのまとめ

WordPressテーマ STORK(ストーク)の表示速度改善を試してみましたが、いかがだったでしょう？

プラグインを入れる前に動作確認をしたり手間もかかりますが、試す価値はあると思います。
特に効果的だと感じたのは、以下の2点でした。

WP Fastes Casheは設定が簡単ですし、ロリポップサーバをお使いの方はPHP 7.1CGI版への変更はすぐにできるのでおすすめです。

今後、速度改善した時はブログ内で紹介したいと思います。
それでは、今回はこのへんで。

追記：
一連の作業完了後、しばらくしてから再度速度チェックしてみると、わずかですが数値が改善されていました。(その間特に改善はしていません。)
やはり参考程度に見ておいた方が良さそうですね。