ブログ初心者でも改善できる! WordPressテーマ 「ストーク」 の表示速度をアップする方法

こんにちは、yamaです。

この記事では、WordPressテーマ STORK(ストーク)の表示速度改善のために試したことをまとめています。

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

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

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

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

最初に、結果から

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

改善前の評価がこちら
↓↓↓↓↓↓↓↓↓↓↓↓↓

改善前のGTmetrix速度

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

 

で、これが改善後の評価
↓↓↓↓↓↓↓↓↓↓↓↓↓

Gtmetrix最終の評価

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

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

 

「ひとり広報」のWEB環境

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

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

特にWordpressのカスタマイズ系の記事は、

プラグインのインストールにはWordpressテンプレート、レンタルサーバとの相性もありますのでインストールの際は十分注意してください。

みたいなこと書くじゃないですか、要は自己責任ってわけです。

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

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

 

ひとり広報のWEB環境

サーバ:ロリポップサーバ
サーバプラン:スタンダード
PHPのバージョン:5.6モジュール版
WordPressバージョン:4.9.1
WordPressテーマ:ストーク

 PHPのバージョンは速度改善前のバージョンです。

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

 

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

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

  • Google PageSpeed Insights
  • GT metrix

 

Google PageSpeed Insights

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

PAGESPEEDINSIGHTSの画面

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

 

GT metrix

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

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

GTmetrixの画面

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

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

 

yama
速度計測はとても簡単です。
まず、試してみてください。

 

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

 

Google PageSpeed Insightsの測定結果

改善前のストークPC速度
改善前のストークスマホ速度

改善前はモバイルで53点、PCで55点

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

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

 

GT metrixの測定結果

改善前のGTmetrix速度

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

といった結果でした。

yama

一番気になるのは、全ての読み込み完了までの時間である Fully Loaded Timeが9.1sもかかってること。

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

GT metrix の各評価項目は下記の記事で紹介しています。

 

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

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

 

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

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

  1. 画像の容量を軽くする
  2. ブログテンプレート独自の機能の確認
  3. プラグインで速度アップ
  4. PHPなどサーバの動作状況

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

 

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

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

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

画像圧縮サービスの画面

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

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

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

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

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

yama
この要領で気になる画像をチェックして画像圧縮していきました。

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

 

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

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

ストーク管理画面

 

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

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

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

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

yama
ストークがいいなって思ったのは、これらの機能がカッコイイからだよね、、

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

 

②-1 ストークのアニメーション機能をOFF

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

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

アニメーションOFFにした結果

 

yama
変わってないじゃん(汗)
むしろ評価悪くなってない?

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

 

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

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

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

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

全て試してもいいですが、気をつけたいのはストークの公式サイトで相性の悪いプラグインがアナウンスされていることです。

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

 

公式サイトで不具合をアナウンスしているプラグイン
  • Jetpack の 「photon」
  • Jetpack の 「共有」
  • jQuery Image Lazy Load WP
  • Lazy Load
  • WordPress Visual Icon Font
  • WP-Copyright-Protection

 

公式サイトで使用の注意をアナウンスしているプラグイン
  • WP Super Cache
  • lightbox系プラグイン

 

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

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

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

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

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

ストークの高速化に使ったプラグイン
  • EWWW Image Optimizer
  • Autoptimize
  • WP Fastes Cache

 

③-1 EWWW Image Optimizer

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

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

EWWW Image Optimizeの起動


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

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

 

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

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

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

Google PageSpeed Insightsの測定結果

ewwwimageのモバイル

GT metrixの測定結果

ewwwimage-GTmetrixの評価

 

yama
一部の評価は良くなっていますが、表示速度がどんどん結果が悪くなってますが、、何か?

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

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

 

③-2 Autoptimize

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

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

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

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

yama
ホントに大丈夫かいな?

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

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

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

Google PageSpeed Insightsの測定結果

autoptiize_pcの結果
autoptiize-モバイルの結果

GT metrixの測定結果

 

yama
もはや効果があるのかわかりません!

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

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

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

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

 

③-3 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 無料版の基本設定

wpfastescash基本設定

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

yama
チェックできるところに全てチェックして、「変更を保存」をクリックすればOKです

 

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

 

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

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

wpfastestcashe-キャッシュの期限を決める

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

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

キャッシュの期限の設定

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

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

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

 

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

Google PageSpeed Insightsの測定結果

wpfastestcashe-PCの結果
wpfastestcashe-モバイルの結果

GT metrixの測定結果

wpfastestcashe-gtmetrixの結果
yama
読込み速度が8.0sになってる!

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

 

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

 

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

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

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

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

 

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

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

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

yama
PHPのバージョン 7.1 は、PHP5系に比べて5.5倍高速化しているそうです!

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

 

CGI版とモジュール版がある?

PHPのバージョン

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

  • 5.6(CGI版)
  • 7.1(CGI版)
  • 5.6 (モジュール版)


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

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

yama
ないですね、、(汗)

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

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

 

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

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

 

phpcheckerの画像

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

 

phpcheckerの設定画面

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

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

 

phpcheckerの結果

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

ストークそのものですが、Compatibleってことで大丈夫って感じですね。

 

ロリポップサーバの設定

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

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

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

現実的な対応策としては、PHPのバージョンを変えてみて不具合があったら元のバージョンに戻すということになります。

 

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

Google PageSpeed Insightsの測定結果

PHP7.1の評価PC
PHP7.1の評価モバイル

GT metrixの測定結果

Gtmetrix最終の評価
yama
やっとそれらしい結果になりまた!

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

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

 

ここまでのまとめ

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

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

  • WP Fastes Cashe
  • PHPのバージョンアップ

この2点でした。

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

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

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

 




【ブロガー・個人向け】 デザインの悩み解決します!

グラフィックデザイン作成サービス

ブロガー、個人で活動している方向けのデザイン作成サービスです。

ロゴマークや名刺など、デザインでお悩みの方 !

自分で作る時間がない!」
「自分で作りたいけどまとまらない!」
「何をどうしていいのかわからない!!」

そんなデザインに関する悩みを解決します。
個人で仕事を依頼するって何だか難しく感じますが、メール等で打ち合わせしながらデザインを進めています。
料金設定も個人向けにわかりやすく設定しています。

お問い合わせフォームまたは、下記のページからご相談ください!
お待ちしております!

何でも聞いちゃってください!
ひとり広報 Line@

デザインのコツに関する質問・疑問
デジカメの購入相談など。
気軽に使ってください!

↓ コチラをポチッと

友だち追加

コメントを残す

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

CAPTCHA