WordPress人気テーマ『STORK(ストーク)』を高速化したった!

WordPress人気テーマ『STORK(ストーク)』を高速化したった!

当ブログはWordPressの人気テーマ STORK(ストーク) を利用しています。

STORK(ストーク)は、ブログマーケッターJUNICHIさん監修のもとOPENCAGE(オープンケージ)WordPress人気テーマ『STORK(ストーク)』を高速化したった!が開発したブロガー専用テーマです。

『とことんモバイルファースト』『美しいデザイン』『ショートコードを標準装備』をコンセプトに作られており、便利なウィジェット機能・ランディングページ作成機能や、スライドショーも簡単設置出来て商用サイトのベースは勿論のこと、アフィリエイトサイトにも幅広く利用されています。

mars
 吹き出し機能も標準で装備されていて便利です。

tako
言う事ないですね。

ブロガー達に大人気のSTORK(ストーク)ですが、唯一弱点があります。それはブログの表示速度の遅さです。

当ブログでもトップページに大きなヘッダー画像と、スライドショーを設置している関係で表示が遅くなっています。この表示速度の遅さを何とか解消したく2つのプラグインを入れてみたので紹介しておきます。

スポンサーリンク

プラグインを入れる前のブログの表示速度を計ってみた

ちなみに、当ブログは巷で速いと評判のエックスサーバーWordPress人気テーマ『STORK(ストーク)』を高速化したった!を利用しています。

当ブログのスペック
  • エックスサーバー(X10プラン)
  • PHPバージョン(PHP7.1.4)
  • プラグイン16個

ここでは、ブログの表示速度を計ってくれるサイト、PageSpeed Insightsと、GTmetrixの2種類で計測してみました。

 

PageSpeed Insights

最初はモバイル版の計測ですが、スコアは『Low』で、56/100の表示でした。

WordPress人気テーマ『STORK(ストーク)』を高速化したった!

次にパソコン版では、『Medium』で66/100という結果になりました。

WordPress人気テーマ『STORK(ストーク)』を高速化したった!

 

GTmetrix

続いてはGTmetrixで計測しました。結果はスコアは『D』で、ページが表示されるまでの時間は4.2秒でした。

WordPress人気テーマ『STORK(ストーク)』を高速化したった!

今回、STORK(ストーク)を高速化するにあたり、下記のプラグインを導入する事により、この数値がどれだけ改善するのかを見ていきたいと思います。

  • Imagify Image Optimizer
  • WP Fastest Cache

 

Imagify Image Optimizer

当ブログでは記事の途中に画像を貼っていますが、この画像の読み込みに時間がかかる場合があります。そこで、Imagify Image Optimizerを使うことにより、画像の容量を大幅に圧縮して軽量化してやります。

画像系プラグインでは、EWWW Image Optimizerが有名ですが、この2つの違いを簡単に説明すると、

  • EWWW  可逆圧縮(元に戻すことが可能)
  • Imagify  不可逆圧縮(元に戻すことが不可能)

EWWWに対してImagifyは不可逆圧縮なので、画像の圧縮率が高くなります。結果、ページの表示速度が速くなるのですね。

 

Imagify Image Optimizerの導入方法

ダッシュボードから『プラグイン』→『新規追加』と進み、プラグインの検索BOXで『Imagify Image Optimizer』と入力し手検索、『今すぐインストール』→『有効化』と進むと、下記の様な画面が現れます。

WordPress人気テーマ『STORK(ストーク)』を高速化したった!

それぞれの意味を検索してみました。

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

1つずつ順番に進んでいきましょう。まずは1のCreate an Accountの『SIGN UP, IT’S FREE!』をクリックします。

WordPress人気テーマ『STORK(ストーク)』を高速化したった!

次に、メールアドレスを入力して、『SIGN UP』と進みます。

WordPress人気テーマ『STORK(ストーク)』を高速化したった!

すると、メールを送ったといわれるのでチェックすると、全文英語のメールが届いていました。

WordPress人気テーマ『STORK(ストーク)』を高速化したった!

  • ①ログインURL
  • ②ユーザーネームとパスワード
  • ③API key

まずは、①メールに記載されているURLをクリックします。②ユーザーネームとパスワードを入力、『SIGN IN』に進みます。なお、サインインするとこちらのページは要なしなので閉じておきます。

WordPress人気テーマ『STORK(ストーク)』を高速化したった!

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

WordPress人気テーマ『STORK(ストーク)』を高速化したった!

Paste your API key below(下にAPIキーを貼り付けます)と言われるので、③メールに記載されていたAPI keyを貼りつけていき『CONNECT ME』をクリックします。

WordPress人気テーマ『STORK(ストーク)』を高速化したった!

『Congratulations!』と言われれば成功です。

WordPress人気テーマ『STORK(ストーク)』を高速化したった!

最後は3のConfigure itです。『GO TO SETTINGS』をクリックすると、Imagify Image Optimizerの設定画面が開きます。

General Settings

WordPress人気テーマ『STORK(ストーク)』を高速化したった!

  • Optimization Level

    画像圧縮率の変更が可能です、ここはお好みで。

  • Auto-Optimize images on upload

    画像のアップロード時に自動で圧縮するかどうか。

  • EXIF Data

    EXIF Dataを残すかどうか。

Optimization

WordPress人気テーマ『STORK(ストーク)』を高速化したった!

  • Resize larger images

    サイズが大きい画像をリサイズするかどうか。

  • Files optimization

    どのサイズの画像を圧縮するかどうかの選択です。分からなければすべてにチェックを入れておくと良いです。

Display Options

WordPress人気テーマ『STORK(ストーク)』を高速化したった!

  • Show Toolbar Menu

    ダッシュボードのツールバーメニューにImagifyのステータスを表示するかどうか。

ちなみに、Imagify Image Optimizerは無料アカウントの場合、圧縮できるデータ量は月額50MBまでです。

 

圧縮の開始

設定が終わったら、ページ最下部の『Save & Go to Bulk Optimizer』をクリックします。

WordPress人気テーマ『STORK(ストーク)』を高速化したった!

『IMAGIF’EM ALL』をクリック。

WordPress人気テーマ『STORK(ストーク)』を高速化したった!

『START THE OPTIMIZATION』をクリックすると圧縮が始まります。

WordPress人気テーマ『STORK(ストーク)』を高速化したった!

当サイトは現在50記事程度ですが、圧縮が21%完了したところで無料の50MB分を使い果たしてしまいました。残念ながら続きは来月まで持ち越されそうですね(笑)。

WordPress人気テーマ『STORK(ストーク)』を高速化したった!

 

WP Fastest Cache

最後はキャッシュ系プラグインのWP Fastest Cacheです。キャッシュ系プラグインと言えば、不具合が起きるというイメージがありますね。しかしWP Fastest Cacheはキャッシュ系プラグイン初心者にも扱いやすいです。

ちなみにキャッシュとは、サイトにアクセスした時のデータをパソコン上に一時保存して、次にアクセスした時に素早く読み込む方法です。

 

WP Fastest Cacheの導入方法

ダッシュボードから『プラグイン』→『新規追加』と進み、プラグインの検索BOXで『WP Fastest Cache』と入力し手検索、『今すぐインストール』→『有効化』と進みます。有効化が終わると、ダッシュボードのサイドバーの下に表示されるのでクリックします。

WordPress人気テーマ『STORK(ストーク)』を高速化したった!

とりあえず言語を日本語に変更しておきます。

WordPress人気テーマ『STORK(ストーク)』を高速化したった!

設定方法ですが、全ての項目にチェックを入れます。ちなみに文字が薄くなっていてチェックが入れられない部分は有料版の機能です。最後に『設定を保存』をポチっと。

WordPress人気テーマ『STORK(ストーク)』を高速化したった!

最後に貯まったキャッシュを削除します。『設定』横の『キャッシュの削除』欄の2つの項目を削除していきます。

  • キャッシュの削除
  • キャッシュと圧縮されたCSS/JSファイルを削除

WordPress人気テーマ『STORK(ストーク)』を高速化したった!

 

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

キャッシュを自動で削除する間隔を設定しておきます。あまり間隔を短くするとサーバーへの負担がかかるので、当ブログでは1日1回に設定しておきました。

WordPress人気テーマ『STORK(ストーク)』を高速化したった!

 

プラグインを入れた後のブログの表示速度は

今回は2つのプラグイン『Imagify Image Optimizer』『WP Fastest Cache』を導入してみましたが、サイトの表示速度がどのように変わったのかを調べていきたいと思います。

PageSpeed Insights

モバイル版では、スコアは『Medium』で、60/100の表示でした。

WordPress人気テーマ『STORK(ストーク)』を高速化したった!

パソコン版では、『Good』で84/100という結果になりました。

WordPress人気テーマ『STORK(ストーク)』を高速化したった!

スマホ版のスコアの上がり方はわずかでしたが、パソコン版ではかなり数値が上がりました。

スマホ版 パソコン版
導入前 Low 56/100 Medium 66/100
導入後 Medium 60/100 Good 84/100

GTmetrix

こちらでも数値が大幅にアップしていますね。

WordPress人気テーマ『STORK(ストーク)』を高速化したった!

ページの表示速度が4.2秒から2.3秒に大幅に短縮されていますね。

PageSpeed Score YSlow Score Fully Loaded Time
導入前 D(66%) D(66%) 4.2s
導入後 B(82%) C(78%) 2.3s

 

まとめ

今回はWordPressの人気テーマのSTORK(ストーク)を高速化してみました。なお、Imagify Image Optimizerでは圧縮が2割程度しか完了しませんでしたが、とりあえずサイトの表示スピードは改善されました。パソコン表示に比べてモバイル表示がイマイチ数値が改善されなかったのは今後の課題になります。

2つのプラグインを導入するだけでサイトの表示速度がアップするので、是非とも導入しておきたいですね。

スポンサーリンク
スポンサーリンク

コメントを残す

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

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