STORK(ストーク)を高速化する方法【WordPress人気テーマ】

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

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

LINK WordPressテーマ「ストーク」

良いことずくめのSTORK(ストーク)ですが、唯一のデメリットがあります。それはブログの表示速度が遅い事です。確かにオシャレな外観をしているので、ページの読み込みが遅くなるのも仕方がありませんが、ページ表示速度が2秒遅いだけで直帰率は50％も増加するといわれているので、何とかしたいところです。

そこで今回は、STORK(ストーク)を高速化していきたいと思います。

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

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

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

飼いヌコ

う～む、Dか、サイトの表示速度が3秒もかかっているのね。

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

どうやらPageSpeed Insightsは2018年1月11日にリニューアルされたみたいで、Unavailable(無効)という数字が加えられたみたいです。

モバイルで『Low 55/100』パソコンで『Medium 66/100』という結果でした。

飼いヌコ

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

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

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

Imagify Image Optimizer

Imagify Image Optimizer(以下Imagify)とは、ページの表示速度に関係する画像の容量を圧縮・軽量化できるWordPressのプラグインです。同じような圧縮・軽量化プラグインにEWWW Image Optimizer(以下EWWW)がありますね、この2つのプラグインの違いですが、

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

飼いヌコ

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

Imagify Image Optimizerの使い方

ダッシュボードから『プラグイン』⇒『新規追加』と進み、『プラグインの検索BOX』に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!』をクリックしていきます。

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

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

飼いヌコ

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

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

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

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

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

Enter your API Key

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

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

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

Configure it

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

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

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

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

圧縮の開始

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

飼いヌコ

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

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

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

WP Fastest Cache

次はキャッシュ系プラグインのWP Fastest Cacheの導入です。キャッシュ系プラグインと言えば不具合という言葉が真っ先に浮かんできますね。当ブログでも『W3 Total Cache』というキャッシュ系プラグインをインストールしましたが、不具合が出て大変な思いをしました。

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

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

早速ダウンロード・インストールしていきましょう。ダッシュボードから『プラグイン』⇒『新規追加』と進み、『プラグインの検索BOX』にWP Fastest Cacheを貼りつけます。すると、いちばん頭に表示されるので、『今すぐインストール』⇒『有効化』と進みます。有効化が終わるとダッシュボードに現れるのでクリックします。

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

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

キャッシュの削除方法

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

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

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

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

さて、2つのプラグインを導入してみましたが、ページの速度はどう変わったのでしょうか？

GT metrix

導入前はどちらもDでしたが、導入後はBとCにアップしていて、サイトの表示速度も0.8秒速くなりました。

飼いヌコ

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

PageSpeed Insights

モバイルが『Low 55/100』⇒『Medium 61/100』へ、パソコンが『Medium 66/100』⇒『Good 84/100』に数値がアップしていました。

飼いヌコ

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

まとめ

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

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

飼いヌコ

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

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