ストークの遅い表示速度の改善に効果的なプラグイン5つ

train-speed-green

ストークは、発売されてから2年経っているにも関わらず(2018年7月現在)、いまだに多くのブロガーに愛用されているWordPressテーマです。

PC言語にあまり詳しくない人でも、おしゃれなサイトが簡単に作れるメリットがあるのですが、その反面、

読み込みに時間がかかるため表示速度が遅くなるという、致命的な欠点があります。

WordPressにはプラグインという便利な機能があって、プラグインを使えば表示速度の改善も簡単にできてしまいます。

ですが、ストークには1つ大きな問題があるのです。

ここでは、WordPressの人気テーマの1つ、ストークで表示速度の改善をするときの大きな問題と、ストークで効果的なプラグインをご紹介したいと思います。

 

スポンサーリンク

ストークって何?

始めに、ストークって何なの?というところから入っていきたいと思います。

ストークは、モバイルファーストのWordPressテーマ

ストークは、Open CageがブログマーケッターのJUNICHI氏監修のもと開発した、有料のWordPressテーマです。

「とことんモバイルファースト」のコンセプトで作られており、導入していきなりスマホでの表示に最適化されています。

今のSEOを語る上で、切り離せないことの1つがズバリ、スマホユーザーを意識したサイトになっているか?ということです。

スマホで見やすいデザイン、使いやすいレイアウトのサイトがSEOで有利なのです。

それでなくても、ストークはSEOに強いWordPressテーマとして有名です。事実、私もストークを使っていますが、多くの記事がアップしてから割と短期間で上位表示されるようになりました。

そういったことが要因なのか?ストークは、発売してから2年経った2018年7月の時点でも、多くのブロガーに人気のWordPressテーマです。

 

ストークの表示速度改善での問題って?

ストークには、表示速度が遅いという欠点があるのは最初にお話しした通りですが、ストークで表示速度の改善を行うときに問題になることは何か?というところから、入っていきます。

プラグインとの相性

ストークに限らず、WordPressにはテーマ(外観デザインのこと)やプラグインなどの間で相性があります。

この相性が良いと、WordPressの機能が倍増されるのですが、反対に相性が悪いと、デザインの表示が崩れたり、最悪エラーを起こしてWordPressが表示されなくなったりといったトラブルが、発生してしまうのです。

ストークもこの例に漏れず、相性の悪いプラグインが存在するのですが、問題なのは、表示速度の改善に役立つプラグインの多くが、ストークと相性が悪いということです。

ただでさえ読み込みが遅いのに、それを改善してくれるツールの多くが使えないということです。このことが、ストークの表示速度の改善をややこしくさせている問題だと思います。

とはいえ、ストークで表示速度改善に効果的なプラグインが、まったく使えないという訳では、ありません。この中でも、ストークとの相性が良いプラグインが、少なからず存在するのです。

次の項からは、いよいよストークとの相性をクリアして、表示速度の改善に効果を発揮してくれるプラグインをご紹介します。

 

ストークの遅い読み込み改善に、効果的なプラグイン

ここからは、いよいよストークの表示速度の改善に効果的なプラグインをご紹介していきますが、

WordPressで表示速度の改善って、どうやるの?と、いうのも合わせて、お話ししていきます。

表示速度を改善する方法

WordPressで表示速度を改善する方法は、大きく分けて以下の3つがあります。

  • 画像の最適化
  • コードの記述を最適化する
  • キャッシュを使う

それぞれを、詳しくお話ししていきます。

画像の最適化で表示速度アップ

Webサイトの表示速度が遅くなる原因の多くは、この画像によるものです。

データ量の大きな画像は、読み込みに時間がかかるので、その分表示が遅くなるという訳です。

分かりやすく数字にすると、1万文字のテキスト(文字)が約30㎅なのに対して、画像は数十㎅から数百㎅にもなるのです。さらに、今のデジカメは高画質で高画素な分、データ量も高く、1枚で数㎆になったりします。

1枚の画像だけで、コンテンツのデータ量が大きく増えてしまうのが、分かっていただけると思います。

旅行ブログなどで、デジカメの写真を多用する人も多いと思いますが、画像のサイズを節約することで、1つ1つのコンテンツのデータ量を大きくカットすることができるのです。

画像の最適化について詳しくは、こちらのブログで紹介しています。ご一緒に、ぜひ読んでみてください。
画像を最適化して表示速度のスコアを73%上げた3つの方法

画像を最適化するプラグイン

EWWW Image Optimizer

EWWW Image Optimizerは、画像の圧縮を自動的に行なってくれるプラグインです。

EWWW Image Optimizerのすごいところは、今までにアップロードした画像も、一括で圧縮してくれることです。そして、画質を損なわずに圧縮してくれるのも嬉しいですね。

BJ Lazy Load

画像を最適化する方法は、先ほどの画像の圧縮ともう1つ、画像の読み込みを遅らせるという方法があります。データ量の小さいテキストの読み込みを優先することで、表示速度を上げるという訳です。

BJ Lazy Loadは、画像の遅延読み込みを行なってくれるプラグインです。

画像の遅延読み込みプラグインで有名なのにLazy Loadがありますが、残念ながらストークとの相性が悪いです。

Lazy Loadの代わりと言っては失礼ですが、BJ Lazy Loadは表示速度の改善に大きな効果を発揮してくれます。

BJ Lazy Loadと先ほどのEWWW Image Optimizerは、こちらの記事で詳しく紹介しているので、ぜひご覧ください。
画像を最適化して表示速度のスコアを73%上げた3つの方法

コードの記述を最適化して、表示速度アップ!!

コードとは、簡単に言ってしまうと、サイトを構成するためのプログラム言語です。このうちの、

  • サイトのデザインやレイアウトを決めるCSS
  • アニメーションなどで使われるJava Script

この2つはテキストに比べると、はるかにデータ量が大きいので、読み込み時間が必要になります。そのため、同じ場所にCSSとJava Scriptの両方が記述されていると、両方の読み込みが終わるまで、サイトの表示の処理が止まってしまうのです。

そこで、CSSとJava Scriptを別々の場所に記述することで、サイト表示のタイムラグを回避させるという訳です。

難しく感じるかもしれませんが、これもプラグインを使えば、簡単に設定できるんです。

コードの記述を最適化するプラグイン

Autoptimize

Googleが提供する表示速度の測定ツール、PageSpeed Insightsでの指摘事項で、「JavaScriptを縮小する」「CSSを縮小する」「HTMLを縮小する」、というものがあります。

要は、それぞれのコードを圧縮してデータ量を小さくしなさいよ、ということですが、画像の圧縮と違って、コードの記述は知らない人が闇雲に削除したりすると、表示崩れを起こしたりして、取り返しのつかないことになってしまいます。

Autoptimizeは、そんな素人には難しいCSSやJava Scriptの圧縮などの最適化を、簡単な設定で行なってくれる、ありがたいプラグインです。

私のブログでも、Autoptimizeを導入して、「JavaScriptを縮小する」、「CSSを縮小する」、「HTMLを縮小する」の

3つの項目が、すべて改善されました。

Autoptimizeの詳しい設定方法などは、こちらのブログが参考になると思います。
WordPressならAutoptimizeプラグインでHTML,JavaScriptの圧縮をするべき

キャッシュを利用して表示速度アップ!

キャッシュというと、現金のキャッシュを思い浮かべるかもしれません。ですが、ここでのキャッシュは、

サーバーやブラウザ、データベースなどに一時的に保存されるデータのことです。

WordPressは、サイトを表示させるために、サーバーやWordPressのデータベースからデータを引っ張り出して、表示させています。

でも、この方法だと、検索上位で多くの人によく見られているページなども、その都度データを引っ張り出すことになるため、時間がかかってしまいます。

そこで、あるユーザーがそのページを見たときに、データを一時保存します。そして、別のユーザーがそのページを見るときは、一時保存データを表示させることで、サイトの表示にかかる余分な時間を短縮させる訳です。この一時保存データが、キャッシュです。

例によって、WordPressではこのキャッシュの設定も、プラグインで簡単にできちゃいます。

キャッシュを設定してくれるプラグイン

W3 Total Cache

W3 Total Cacheは、キャッシュのプラグインで真っ先に名前が挙がってくるプラグインです。

キャッシュと一言で言っても、ブラウザのキャッシュやWordPressのデータベースのキャッシュなどがありますが、

W3 Total Cacheは、これらのキャッシュを全部一緒に設定できる優れものです。

さらに、W3 Total Cacheは次にお話しする、Cloud FlareというCDNと、簡単に紐づけすることができちゃいます。

サーバーへの負荷が分散されるので、表示速度の改善に効果的なのです。

W3 Total Cacheの詳しい設定方法は、こちらのブログを参考にしてください。
W3 Total Cache のおすすめの設定方法

Cloud Flare

Cloud Flareはプラグインではなく、CDN(コンテンツ・デリバリー・ネットワーク)と呼ばれるサービスの1つです。

CDNは、簡単に言うと、Webサイトを複数の地域の複数のサーバーで共有するサービスです。ユーザーがそのサイトにアクセスした時に、そのユーザーがいる地域から近い地域のサーバーが応答するというものです。

物理的な距離が近ければ、データの転送も早くなり、表示速度が上がるということです。そして、複数のサーバーで処理するので、サーバーへの負荷も下がるという訳です。

Cloud Flareは、そんなCDNの1つで無料で提供しているので、多くのブロガーがCloud Flareを推しています。

先ほどもお話ししたように、Cloud FlareはW3 Total Cacheと紐づけて簡単に設定できるので、プラグインに加えました。

Cloud Flareの詳しい設定方法は、こちらのブログが役に立ちます。
すぐできる!CloudFlare の設定方法

ストークで入れない方が良い?プラグイン

ストークと相性が悪いプラグインは、販売元のOpen Cageでも紹介されています。

基本的に、そこで紹介されている内容で間違いないのですが、ストークの表示速度の改善で、ストークを使っている人たちが薦めているプラグインだけど、インストールしたらエラーを起こしたプラグインがありました。そのプラグインを、ご紹介したいと思います。

お使いのPC環境などでも変わってくると思いますので、あくまでも参考程度にしていただけると良いと思います。

Java-script-to-footer

先ほどのPageSpeed Insightsの指摘事項で、

「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」があります。

サイトの読み込みを邪魔しているCSSとJava Scriptがありますよ。ということなのですが、それを対策してくれるプラグインで、Java-script-to-footerが紹介されていました。

先ほどの「コードの記述の最適化」のくだりでお話しした考え方で、読み込みに時間のかかるJava Scriptをフッター(サイトの一番下でメニュー表示などがある部分)に記述することで、表示速度を上げるものです。

「実際にストークを使っている人が薦めているなら、大丈夫だろう」と考えて、私も導入したのですが、有効化したとたん、表示されなくなるという悲しいできごとが起きました。なので、使用を止めました。

Java-script-to-footerに限らず、こういったコードの記述系のプラグインは、少なからずプログラムを書き換えることになるので、使っているテーマや導入しているプラグインとの兼ね合いで、サイトが表示されなくなるなどのトラブルが、特に多いようです。

そういったことがあるので、プラグインの導入は慎重に行なった方が良いと思います。

繰り返しになりますが、PC環境などでも変わってくると思いますので、あくまでも参考程度にしてください。

 

表示速度は、どれだけ改善されたか?

今回ご紹介したプラグインを導入して、表示速度がどうなったか?表示速度の測定には、以下のツールを使いました。

それぞれのツールについての詳しい説明は、「画像を最適化して表示速度のスコアを73%上げた3つの方法」で紹介しているので、ここでは省略します。

上の3つのツールで測定した結果が、こちらです。


まだまだ、要改善の項目があって、今も取り組んでいる最中ですが、それでもある程度の効果が得られました。

 

まとめ

ストークの表示速度の改善での1つの問題点と、ストークで表示速度を改善するのに効果的なプラグインをご紹介しました。

最後に、ストークでの表示速度改善に効果的な、5つのプラグインをまとめます。

  • EWWW Image Optimizer
  • BJ Lazy Load
  • Autoptimize
  • W3 Total Cache
  • (プラグインではないが)Cloud Flare

ストークでの表示速度の改善に役立てていただけると幸いです。

 

今日も、最後まで読んでいただいて、ありがとうございました。

 

 

 

 



train-speed-green

コメントを残す

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

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください