ワードプレステーマ『ストーク』を2つのプラグインで高速化する方法

ワードプレステーマ『ストーク』を2つのプラグインで高速化する方法

ワードプレスの有料テーマの STORK(ストーク)を高速化してみた ので、その方法を紹介していきたいと思います。

STORK(ストーク)は『ブロガー専用テーマ』といわれるように、有名ブロガー達が使用している人気テーマになります。発売日は2016年の5月30日とかなり前なんですが、未だに沢山のブロガーに愛されています。

公式WordPressテーマ「ストーク」

良いことずくめのSTORK(ストーク)ですが、唯一のデメリットがあります。それはブログの表示速度が遅い事です。

確かにオシャレな外観をしているのでページの読み込みが遅くなるのも仕方がありませんが、ページ表示速度が2秒遅いだけで直帰率は50%も増加するといわれているので、何とかしたいところです。

半分が帰っちゃうのね…。

そうならないためにもSTORK(ストーク)を高速化していきたいと思います。

追記

2019年11月にSTORKの新バージョンとなる、STORK19が公開されました。

これによると、機能面でのパワーアップと表示スピードの改善を中心にアップデートが行われたという事です。

公式STORK19の特徴や変更点など

高速化する前のページ表示速度

では、高速化する前のブログのページ表示速度を調べてみましょう。ちなみにワタシがSTORK(ストーク)で運営しているブログのスペックです。

  • エックスサーバー(X10プラン)
  • PHP7.2.17
  • プラグイン 16個

まずは、速度分析ツールのGT metrixで調べてみましょう。

GT metrix

う~む、DとEか、おまけにサイトの表示速度が3.2秒もかかっているのね。

続いてはGoogleが提供しているPageSpeed Insightsで調べてみる事に。

icon-check-square-o パソコン

GT metrixパソコン

icon-check-square-o モバイル

GT metrixモバイル

パソコン『 67/100』モバイル『18/100』という結果でした。

現在ではスマホからのアクセスが多いので、モバイルの数値が悪いのは気になりますね。

ご丁寧に『改善できる項目』という項目を表示してくれているのですが、専門用語が多くて何がなんやら分かりません。

GT metrix『改善できる項目』

JavaScriptとかCSS とかをイジらないで、プラグインで何とかしたいと思い、下記の2点を導入することにしてみました。

  • Imagify Image Optimizer
  • WP Fastest Cache
スポンサーリンク

Imagify Image Optimizer

Imagify Image Optimizer(以下Imagify)とは、ページの表示速度に関係する画像の容量を圧縮・軽量化できるWordPressのプラグインです。

同じような圧縮・軽量化プラグインにEWWW Image Optimizer(以下EWWW)がありますね、この2つのプラグインの違いですが、

EWWW 可逆圧縮 圧縮後に元に戻せる
Imagify 不可逆圧縮 圧縮後に元に戻せない

EWWWは圧縮した画像を元に戻せる事が出来るのに対して、Imagifyは元に戻せません、ところが、Imagifyは不可逆圧縮なので、画像の圧縮率を高める事ができるのですね。

画像サイズを圧縮したら、元に戻す必要は無いですからね(笑)。

Imagify Image Optimizerの使い方

ダッシュボードから『プラグイン』⇒『新規追加』と進み、『プラグインの検索BOX』にImagify Image Optimizerを貼りつけます。すると、いちばん頭に表示されるので、『今すぐインストール』⇒『有効化』と進みます。

Imagify Image Optimizerの使い方

Imagify Image Optimizerを有効化すると、ダッシュボード上に何かしらが現れました。

Imagify Image Optimizerの使い方

ちょっと翻訳してみよう、1の意味はと…。

  1. Create an Account=アカウントを作成する
  2. Enter your API Key=あなたのAPIキーを入力してください
  3. Configure it=設定する
こんな感じですね。

Create an Account

1.Create an Accountの下『SIGN UP, IT’S FREE!』をクリックしていきます。

Imagify Image Optimizerの使い方

続いてメールアドレスを入力して、『SIGN UP』をクリックします。

Imagify Image Optimizerの使い方

何やら英語で『Congratulations!』と言われました。

これくらいは訳せますね、『おめでとう!』ですね。しかし下の文章は分からないな~。

下記の英文を翻訳すると、『アカウント作成に成功しました。メールを確認して下さい、あなたはAPIキーを受け取ります。』てな感じですね。

Your account has been successfully created. Please check your mailbox, you are going to receive an email with API key.

メールを開くと、ログインURLが記載されているのでクリックします。

Imagify Image Optimizerの使い方

メールに記載されているユーザーネームとパスワードを入力して『SIGN IN』をクリックします。サインイン後は必要ないので閉じてもOKです。

Imagify Image Optimizerの使い方

Enter your API Key

次に、『Enter your API Key』の下の『I HAVE MY API KEY』をクリックします。

Imagify Image Optimizerの使い方

先ほど届いたメールに記載されていたAPI keyを貼りつけて『CONNECT ME』をクリックします。

Imagify Image Optimizerの使い方

『おめでとう!』と言われました(笑)。

Imagify Image Optimizerの使い方

Configure it

最後に設定を行います。Configure itの下『GO TO SETTINGS』をクリックします。

General Settingsではデフォルトのままでも良いと思います。あえて変更するとすれば、AGGRESSIVEからULTRAに変更するくらいですね。

Imagify Image Optimizerの使い方

  • Optimization Level

    画像圧縮率の変更

  • Auto-Optimize images on upload

    画像アップロード時に自動圧縮の有無

  • EXIF Data

    EXIF Dataを残すかどうか

Optimizationでも、変更するところはないと思います。

Imagify Image Optimizerの使い方

  • Resize larger images

    大きなサイズの画像をリサイズするかどうか。

  • Files optimization

    どのサイズの画像を圧縮するかの選択です、全てにチェックを入れておくと良いです。

Display OptionsでもそのままでOKです。

Imagify Image Optimizerの使い方

  • Show Toolbar Menu

    ダッシュボードにImagifyのステータスを表示する。

圧縮の開始

ページ最下部の『Save & Go to Bulk Optimizer』へと進んでみましょう。

Imagify Image Optimizerの使い方

ちょマテヨ、このプラグインは無料で使えるのですか?

月額50MBまでは無料で利用できますよ、ダッシュボードの『Imagify』をクリックすると残量が表示されます。

『IMAGIF’EM ALL』⇒『START THE OPTIMIZATION』と進むと、圧縮が開始されます。

Imagify Image Optimizerの使い方

Imagify Image Optimizerの使い方

1ヶ月の容量をオーバーするとERRORが表示されて圧縮が終了します。

スポンサーリンク

WP Fastest Cache

次はキャッシュ系プラグインのWP Fastest Cacheの導入です。キャッシュ系プラグインと言えば不具合という言葉が真っ先に浮かんできますね。

当ブログでも『W3 Total Cache』というキャッシュ系プラグインをインストールしましたが、不具合が出て大変な思いをしました。

W3 Total Cacheでエラーが出た時に試したい3つの対処法

なので、キャッシュ系プラグインはもう懲り懲りなのですが、WP Fastest Cacheは比較的手軽に扱えて不具合も少ないプラグインと言えます。

早速ダウンロード・インストールしていきましょう。ダッシュボードから『プラグイン』⇒『新規追加』と進み、『プラグインの検索BOX』にWP Fastest Cacheを貼りつけます。

すると、いちばん頭に表示されるので、『今すぐインストール』⇒『有効化』と進みます。有効化が終わるとダッシュボードに現れるのでクリックします。

WP Fastest Cache設定

最初に英語から日本語へと言語を変更しておきましょう。

WP Fastest Cache設定

次に設定画面が表示されますが、チェック可能な項目はすべてチェックを入れておきます。なお、チェックが入れられない項目は有料版の項目です。

WP Fastest Cache設定

キャッシュの削除方法

蓄積されたキャッシュを削除していきましょう。『設定』の隣の『キャッシュの削除』をクリックすると削除ページへ移動するので、『キャッシュの削除』と『キャッシュと圧縮されたCSS/JSファイルを削除』の2つをクリックします。

WP Fastest Cache キャッシュの削除方法

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

最後にキャッシュの有効期限の設定を行っておきましょう。あまり短い間隔だとサーバーに負担がかかるので、程ほどの期間を設定しておきましょう。

『キャッシュの削除』欄の『Timeout Rules』をクリックしてルールを書き換えます。

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

こんな感じになりました。

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

高速化を行った後のページの表示速度

さて、『Imagify Image Optimizer』『WP Fastest Cache』の2つのプラグインを導入してみましたが、ページの速度はどう変わったのでしょうか?

icon-check-square-o GT metrix

導入前はDEでしたが、導入後はCDにアップしていて、サイトの表示速度も0.4秒速くなりました。

WordPressテーマSTORK(ストーク) 高速化を行った後のページの表示速度

おおっ、プラグイン導入の成果が表れていますね!

icon-check-square-o PageSpeed Insights

パソコンが『67/100』⇒『90/100』へ、モバイルが『18/100』⇒『36/100』に数値がアップしていました。

WordPressテーマSTORK(ストーク) 高速化を行った後のページの表示速度

モバイル版のアップ率が少し悪いですね、これからはスマホの時代なのでこちらの数値の改善が必要になりますね。

まとめ

今回は2つのプラグインを導入して、ページの表示速度のスピードアップ化に挑戦しました。

  • Imagify Image Optimizer
  • WP Fastest Cache

Imagify Image Optimizerでは、月間の無料圧縮容量が50MBまでなので、3割くらいしか画像の軽量化が進みませんでした。なので、これからもう少し数値も伸びていくと思います。

無料版でコツコツ圧縮ですね(笑)。

全体的にページの表示速度も速くなったと思うので、これからアクセスが延びることを期待したいですね。

追記:今後はストークの最新バージョンのSTORK19が購入可能です。

STORK最新バージョン【STORK19】

WordPress有料テーマSTORK(ストーク)関連記事一覧はコチラ

コメントを残す

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

日本語が含まれない投稿や心無いコメントは無視されますのでご注意ください。(スパム対策)

//アドセンス高速化// //END アドセンス高速化//