ブログ起業セミナーをプレゼント!

【サイト高速化】STORK19でモバイル80点以上を目指す方法

STORK19を高速化する方法
ずーみー

こんにちは!

ブログ起業コンサルタントのずーみー(⇒プロフィール)です^^

2020年7月に、当ブログのWordPressテーマを、3年間使った旧ストークから、新バージョンの「STORK19(ストーク19)」に乗り換えました。

▼ストーク19はこちら▼ストーク19

なぜSTORK19に変更したかというと、サイト高速化が一番の目的です。

近年、表示速度のはやいWebサイトの方がSEOに強くなるといわれています。

そのため、僕も以前から表示速度の改善に取り組んでいたのですが、旧ストークではどうやってもモバイルで70点台しか出せませんでした。(※PageSpeed Insightsで計測)

旧ストークではPageSpeed Insightsでモバイル70点台だった
旧ストークではモバイル70点台だった

そこで、STORK19に乗り換えたところ、モバイルで最高96点出せるようになりました!

STORK19ではPageSpeed Insightsでモバイル96点に改善!
STORK19ではモバイル96点に改善!

その後、PageSpeed Insightsの計測基準が厳しくなったため、モバイル90点台を出すことは難しくなりましたが、モバイル80点以上を目指すことは可能です。

この記事では、プラグインやサーバーの細かい設定など、僕がサイト高速化のために行った全ての施策を紹介します。

これからSTORK19を購入する予定の人や、すでに購入した人は、ぜひ参考にしてくださいね!

STORK19でサイト高速化に成功した6つの方法とは?

僕がブログのページスピードを高速化するために行なったのは、次の6つです。

STORK19でサイト高速化に成功した6つの方法

  1. AMP化する
  2. 使用していないプラグインの削除
  3. 高速化に有効なプラグインの導入
  4. Xサーバーでの施策(PHP Ver・Xアクセラレータ変更)
  5. 画像を圧縮して軽量化
  6. Twitterのタイムラインを削除

順番に解説していきますね。

 

①:AMP化する

2021年4月にリリースされたSTORK19(ver.2.1)から、サイトを手軽にAMP化できるようになりました。

AMPとは、Accelerated Mobile Pagesの略称で、 Webコンテンツを瞬時に読み込んで表示するためのフレームワーク(手法)のこと です。 … AMP化によって、サイトの読み込み速度を向上させれば、ユーザビリティが高まります。 出典:SEOラボ

当ブログでもAMP化をテストしてみたところ、PageSpeed Insightsのスコアが約10点もアップしました。(平均75点→85点)

ただし、当ブログでは諸事情によりAMP化できないことがわかったので、泣く泣く設定をOFFにしましたが。。。(※自前のアフィリエイトセンターを運用するためにサイトを改造しているためです。一般的なブログでは問題なくAMP化できますよ。)

AMP化の導入手順については、公式サイトに解説がありますので、ぜひ参考にしてください。

 

 

②:使用していないプラグインの削除

一般的に、WordPressにインストールしているプラグインが多ければ多いほど、ブログの表示速度は遅くなります。

そのため、インストールするプラグインの数は、極力減らしましょう。

もし停止したまま放置しているプラグインがあるなら、すぐに削除するのをおすすめします。

 

③:高速化に有効なプラグインの導入

当ブログでは、サイト高速化のために、次の3つのプラグインを入れています。

  • Autoptimize(CSSやJavascriptを最適化)
  • Optimize Database after Deleting Revisions(リビジョンを削除)
  • WP Fastest Cache(キャッシュを削除)

これら3つは、ストークと相性の良いプラグインです。

ワードプレステーマによっては、不具合を起こしてしまうプラグインもあるので、事前に相性をよく調べてからインストールしてくださいね。

以下は、僕が3つのプラグインをどのように設定しているかのご紹介です。

設定をマネしたい人は、万が一失敗した時のためにデータのバックアップをとった上で、自己責任でマネしてください^^

Autoptimizeをインストールしたら有効化して、以下の設定をします。

まずは「JS、CSS & HTML」の設定です。

Autoptimizeの設定方法1 Autoptimizeの設定方法2

HTMLオプションの「HTMLコードを最適化」はオンにしても良いそうですが、当ブログでは表示速度が落ちたため、オフにしています。

Autoptimizeの設定方法3 Autoptimizeの設定方法4 Autoptimizeの設定方法5

ここまで設定したら、「変更を保存してキャッシュを削除」をクリックします。

次に画像の設定ですが、ここは何もチェックしなくて大丈夫です。

Autoptimizeの設定方法6

最後に、追加設定です。

当ブログでは次のように設定しました。

Autoptimizeの設定方法7

この項目は、ブログの状況によってベストな状態が違うため、1つずつオンオフしながら表示速度が改善されたかを確認するのをおすすめします。

変更を保存したらAutoptimizeの設定は完了です。

Optimize Database after Deleting Revisionsをインストールしたら有効化して、WP管理画面の「設定」で「Optimize Database」を開き、以下の設定をします。

Optimize Databaseの設定方法1

設定が終わったら「Save Settings」をクリックして保存します。

次に、隣の「Go To Optimizer」をクリックすると、次の画面に飛びます。

(この画面は、WP管理画面の「ツール」→「Optimize Database」でも見れます。)

Optimize Databaseの設定方法2

この画面の一番下の「Optimize(summary)」をクリックします。

すると、リビジョン(記事を書いたときに自動保存したデータ)を削除したり、データベースを最適化したりして、ブログを軽くしてくれます。

以下が作業完了画面の一例です。

Optimize Databaseの設定方法3

ちなみに、僕は1日に1回は先ほどの「Optimize(summary)」をクリックして、リビジョンを削除しています。

毎日のお掃除みたいな感じですね。笑

WP Fastest Cacheをインストールしたら有効化して、以下の設定をします。

WP Fastest Cacheの設定方法1

設定が終わったら「変更を保存」をクリックして保存します。

次に、「キャッシュの削除」を開きます。

WP Fastest Cacheの設定方法2

「キャッシュと圧縮されたCSS/JSファイルを削除」というボタンをクリックして、キャッシュを削除します。

この作業も、僕は1日に1回は必ず行なっています。

 

④:Xサーバーでの施策(PHP Ver・Xアクセラレータ変更)

僕はXサーバーの一番安いプラン(X10プラン)を使用していますが、エックスサーバーでもサイト高速化のためにできることが何個かあります。

1つ目は、PHPバージョンを最新版に切り替えることです。

PHPバージョンの切り替えは、サーバーパネルから簡単に行なえます。

エックスサーバーで最新のPHPバージョンに変更する
最新のPHPバージョンに変更する(現在は7.4.13が最新)

2つ目は、Xアクセラレータの設定です。

Xアクセラレータとは、サイト高速化のためにXサーバーが用意したツールです。

通常はXアクセラレータ Ver.1が設定されていますが、より高速なVer.2に変更しましょう。

変更は、サーバーパネルから簡単に行なえます。

エックスサーバーでXアクセラレータ Ver.2に変更する
Xアクセラレータ Ver.2に変更する

 

⑤:画像を圧縮して軽量化

ファイルサイズの大きい画像を使うと、サイトの表示速度が一気に遅くなります。

そのため、ブログで使う画像は、できる限り圧縮して軽量化しましょう。

画像の圧縮方法については、次の記事で詳しく解説しているので、ぜひチェックしてください。

色々なブログをコンサルしたきた実感としては、これが一番効果的な人も多いと思いますよ!

ブログで使う画像容量の目安と圧縮方法

 

⑥:Twitterのタイムラインを削除

Twitterのタイムラインはかなり重いため、削除することをおすすめします。

当ブログも以前、サイドバーにTwitterのタイムラインを表示していましたが、サイトの表示速度に大きな影響を与えることがわかったため、削除しました。

 

まとめ

以上が、STORK19でモバイル80点以上を目指す方法のまとめです。

旧ストークに比べて、STORK19は想像以上に動作が軽く、高速でした。

これからブログを始める人にとって、STORK19は強力な武器になってくれるでしょう。

また、STORK19は、旧ストークのショートコードを全て引き継げます。

そのため、旧ストークユーザーにとっては、他のWordPressテーマに変更するより作業が楽という魅力もあります。

ちなみに僕の場合は、たった1日で全ての変更作業が完了しました。(他のWordPressテーマだと1週間くらいかかったかもしれません。)

旧ストークユーザーは、STORK19に変更して絶対に損はないので、この機会にぜひ変更をご検討くださいね!

 

▼ストーク19はこちら▼ストーク19

 

2件のコメント

自分のブログはモバイル50点以下なので参考なになりました。
エックスサーバーの方でも高速化の方法があるのは初耳でした。
家に帰ったら早速設定してみようと思います!
ありがとうございました!

かねがえさん、こんばんは!
コメントありがとうございます^^
Xアクセラレータの話って、意外と知られていないんですね。
速度がアップすることをお祈りしております!

コメントを残す

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

ABOUT ME

ずーみー
早大→テレビディレクター→会社をクビになり映像制作で起業。現在はブログ起業コンサルタントとして活動中。2018年からブロガー向けサロン『ずーみースクール』主宰。100人に1PVあたり10円以上の高単価ブログの作り方を教えてます。少ないアクセス数のブログで収益化するのが得意。3児の父。