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

【サイト高速化】STORK19でモバイル96点出した方法まとめ

【サイト高速化】STORK19でモバイル96点出した方法まとめ
ずーみー
こんにちは!

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

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

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

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

近年、表示速度のはやいWebサイトが、SEOで有利だといわれています。

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

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

そんな時に、スマホでの表示速度の改善をウリに発売されたのがSTORK19です。

でも、僕はSTORK19が発売されてから半年間、「ワードプレステーマの変更は面倒くさい」「いくら速いといっても、そんなに改善しないのでは」と考えて、なかなか行動しませんでした^^;

今となっては、もっと早く行動しておくべきだったと後悔しています。

なぜなら、STORK19に変更した結果、モバイルで最高96点出せるようになったのですから!

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

この記事では、僕がSTORK19でモバイル96点を出した方法を、備忘録としてまとめます。

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

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

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

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

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

これらのうち、STORK19に変更してから行なったのは、①と②です。

③〜⑥は、旧ストーク時代から行なっていた施策です。

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

 

①:画像の遅延読み込みをオン

STORK19には、画像を遅延読み込みしてページスピードをアップさせる機能があります。

旧ストークでは、プラグインを入れないと画像の遅延読み込みができなかったので、僕はSTORK19にこの機能が搭載されてとても嬉しかったです。

WordPressテーマのカスタマイズ画面を開き、「サイト全体の設定」で「遅延読み込みする」をオンにしてください。

たったそれだけで、画像の遅延読み込みができるようになります!

STORK19で画像の遅延読み込みをオンにする
「遅延読み込みする」をオンにする

 

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

STORK19ではワードプレステーマ側で画像の遅延読み込みができます。

そのため、旧ストークで画像を遅延読み込みするために使っていたプラグイン(a3 Lazy Load)を削除しました。

一般的に、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回は必ず行なっています。

 

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

ブログで使用する画像のファイルサイズの目安とは?

ブログで使用する画像のファイルサイズの目安とは?

 

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

当ブログでは以前、サイドバーにTwitterのタイムラインを表示していました。

けれども、Twitterのタイムラインはかなり重く、サイトの表示速度に大きな影響を与えることがわかったため、寂しいですが削除しました。

 

まとめ

以上が、僕がSTORK19でモバイル96点を出した方法のまとめです。

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

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

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

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

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

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

 

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

 

2 件のコメント

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

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

  • コメントを残す

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

    ABOUT ME

    ブログ起業コンサルタント/オンラインサロン「ずーみースクール」主宰/映像制作ZOOMY VIDEO代表/当ブログでは、自分がブログ起業で苦労・失敗した経験をもとに、知識0のサラリーマンが1年以内にブログで月収10万以上稼ぐ方法を発信中。