WordPressの有料テーマの STORK(ストーク)を高速化してみた ので、その方法を紹介していきたいと思います。
STORK(ストーク)は『ブロガー専用テーマ』といわれるように、有名ブロガー達が使用している人気テーマになります。発売日は2016年の5月30日とかなり前なんですが、未だに沢山のブロガーに愛されています。
良いことずくめのSTORK(ストーク)ですが、唯一のデメリットがあります。それはブログの表示速度が遅い事です。確かにオシャレな外観をしているのでページの読み込みが遅くなるのも仕方がありませんが、ページ表示速度が2秒遅いだけで直帰率は50％も増加するといわれているので、何とかしたいところです。
そうならないためにもSTORK(ストーク)を高速化していきたいと思います。
目次
高速化する前のページ表示速度
では、高速化する前のブログのページ表示速度を調べてみましょう。ちなみにワタシがSTORK(ストーク)で運営しているブログのスペックです。
- エックスサーバー(X10プラン)
- PHP7.2.17
- プラグイン 16個
まずは、速度分析ツールのGT metrixで調べてみましょう。
続いてはGoogleが提供しているPageSpeed Insightsで調べてみる事に。
パソコン
モバイル
パソコン『 67/100』モバイル『18/100』という結果でした。
ご丁寧に『改善できる項目』という項目を表示してくれているのですが、専門用語が多くて何がなんやら分かりません。
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を有効化すると、ダッシュボード上に何かしらが現れました。
- Create an Account＝アカウントを作成する
- Enter your API Key＝あなたのAPIキーを入力してください
- 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 Level
画像圧縮率の変更
- Auto-Optimize images on upload
画像アップロード時に自動圧縮の有無
- EXIF Data
EXIF Dataを残すかどうか
Optimizationでも、変更するところはないと思います。
- Resize larger images
大きなサイズの画像をリサイズするかどうか。
- Files optimization
どのサイズの画像を圧縮するかの選択です、全てにチェックを入れておくと良いです。
Display OptionsでもそのままでOKです。
- Show Toolbar Menu
ダッシュボードにImagifyのステータスを表示する。
圧縮の開始
ページ最下部の『Save & Go to Bulk Optimizer』へと進んでみましょう。
月額50MBまでは無料で利用できますよ、ダッシュボードの『Imagify』をクリックすると残量が表示されます。
『IMAGIF’EM ALL』⇒『START THE OPTIMIZATION』と進むと、圧縮が開始されます。
1ヶ月の容量をオーバーするとERRORが表示されて圧縮が終了します。
WP Fastest Cache
次はキャッシュ系プラグインのWP Fastest Cacheの導入です。キャッシュ系プラグインと言えば不具合という言葉が真っ先に浮かんできますね。当ブログでも『W3 Total Cache』というキャッシュ系プラグインをインストールしましたが、不具合が出て大変な思いをしました。
W3 Total Cacheでエラーが出た時に試したい3つの対処法なので、キャッシュ系プラグインはもう懲り懲りなのですが、WP Fastest Cacheは比較的手軽に扱えて不具合も少ないプラグインと言えます。
早速ダウンロード・インストールしていきましょう。ダッシュボードから『プラグイン』⇒『新規追加』と進み、『プラグインの検索BOX』にWP Fastest Cacheを貼りつけます。すると、いちばん頭に表示されるので、『今すぐインストール』⇒『有効化』と進みます。有効化が終わるとダッシュボードに現れるのでクリックします。
最初に英語から日本語へと言語を変更しておきましょう。
次に設定画面が表示されますが、チェック可能な項目はすべてチェックを入れておきます。なお、チェックが入れられない項目は有料版の項目です。
キャッシュの削除方法
蓄積されたキャッシュを削除していきましょう。『設定』の隣の『キャッシュの削除』をクリックすると削除ページへ移動するので、『キャッシュの削除』と『キャッシュと圧縮されたCSS/JSファイルを削除』の2つをクリックします。
キャッシュの有効期限の設定
最後にキャッシュの有効期限の設定を行っておきましょう。あまり短い間隔だとサーバーに負担がかかるので、程ほどの期間を設定しておきましょう。
『キャッシュの削除』欄の『Timeout Rules』をクリックしてルールを書き換えます。
こんな感じになりました。
高速化を行った後のページの表示速度
さて、『Imagify Image Optimizer』『WP Fastest Cache』の2つのプラグインを導入してみましたが、ページの速度はどう変わったのでしょうか？
GT metrix
導入前はDEでしたが、導入後はCDにアップしていて、サイトの表示速度も0.4秒速くなりました。
PageSpeed Insights
パソコンが『67/100』⇒『90/100』へ、モバイルが『18/100』⇒『36/100』に数値がアップしていました。
まとめ
今回は2つのプラグインを導入して、ページの表示速度のスピードアップ化に挑戦しました。
- Imagify Image Optimizer
- WP Fastest Cache
Imagify Image Optimizerでは、月間の無料圧縮容量が50MBまでなので、3割くらいしか画像の軽量化が進みませんでした。なので、これからもう少し数値も伸びていくと思います。
全体的にページの表示速度も速くなったと思うので、これからアクセスが延びることを期待したいですね。
コメントを残す