ストークも速いよ!ブログの表示速度を向上させるためにした4つのこと

ブロガー専用テーマストークを使っていますが、ブログの表示するスピードが遅かったのでいろいろ試してみました。

その結果、かなりスピードアップしました。

今回は、そのスピードアップするために実施したことをまとめてみました。

ブログの表示速度を見直してみた。

他のサイトやブログ記事を読みたいときになかなか読み込まれずにイライラ。

ササーっとスマホをスクロールしたり、違う記事やページを読もうと離脱したりする人は多いと思います。

他のサイトを見ながら、自分のサイトはどうなのかかな〜と思ったら、かなり遅いことが発覚しました。

参考:【Google推奨】サイト(ページ)表示速度計測チェックツールまとめ

▲サイトやブログの表示速度はGoogleのアルゴリズムに導入されていて、検索順位を決める上での要素の一つになっているとのことです。

ブロガー専用テーマのストークは遅い!?そんなことないよ〜。

現在、ぼくの活用しているブログテーマは、ストークです。

有料テーマですが、使いやすくかゆいところに手が届く作りになっていてとても気に入っています。

参考:ブロガー専用WordPressテーマSTORK(ストーク)にして良かった3つのこと

そんなテーマですが、巷では「ページの表示速度が遅くない!?」といった意見を聞きます。

その意見に対するぼくの解答は、こうです。

コーヘイ
全然、そんなことないよ〜♪むしろ速くない!?

先ほどの検索順位に関する記事を読んだ後、あの手この手で実施してみたところ、表示速度はスピードアップしました。

▲では、実際にGTmetrixでスピードを計測してみました。

▲ページスピードスコアは、右側がGoogleのスピードですが、96%でスコアはAです。

右側は、Yahooでのスピードですか、88%とスコアはBです。

ほらね、意外と早いでしょう!?

表示速度を向上するために実施したこと。

では、このスピードアップのために自分が実施したことをまとめてみました。

1.ヘッダー、スライドショーを非表示にする。

▲OPENCAGEのテーマ特有の大きなヘッダーを設置できる項目を非表示にしています。

また、記事のタグに「Pickup」を挿入するとトップベージにおすすめ記事や読んでほしい記事をスライドショーのようにできますが、オフにしています。

とてもインパクトがあって、目立つのですが現在これといってピックアップするのがないので、これでだいぶ読み込み速度を向上できます。

2.キャッシュ系、圧縮系プラグインを活用する。

▲そして、キャッシュ系、圧縮プラグインを活用します。

▲以上のようなプラグインを活用しています。

①はHTML,CSS,JavaScriptを最適化してくれます。

②はブログ内の画像を圧縮して読み込みを速くなります。

③は各記事ごとのSNSボタンシェア数をキャッシュしていち早く表示くれます。

④はページの表示速度を改善できるキャシュ系プラグインの代表格です。

    キャッシュ系プラグインは、テーマやサーバーの相性によって使わないほうがいいものもあります。

    プラグインを有効化したらすぐに、ブログの状態を確認するようにしましょう。

3.CDN(コンテンツ・デリバリー・ネットワーク)を導入する。

Cloudflare

自分が管理しているサーバーとは、また別のサーバー(これがCDN)が一部手伝ってくれることで負荷が分散されるようです。

結果的に、ブログの表示速度が向上するので、SSL化したサイトでも使えるCDNのサービスCloudFlare(クラウドフレア)を導入してみました。

参考:表示速度を劇的に向上する、無料のCDNサーバー「CloudFlare」は導入必須だ!!

▲英語のサイトでわかりにくかったのですが、こちらのサイト参考にしてなんとか設定できました。

4.サーバーをエックスサーバーにする。



▲今年2017年の2月からさくらのレンタルサーバからエックスサーバーに移転しました。

月々のサーバー代は515円から1080円(※x10プランの12ヶ月契約のプランの月割)になりましたが、その分サクサク読み込んで表示してくれるので気に入っています。

☞まとめ

もう一度まとめると
  1. ヘッダー、スライドショーを非表示。
  2. キャッシュ系、圧縮系プラグインを活用する。
  3. CDN(コンテンツ・デリバリー・ネットワーク)を導入する。
  4. サーバーをエックスサーバーにする。

▲以上の4つをしたことで、ストークを活用していても、かなり早い速度でサイトを運用することができています。

以上、「ストークも速いよ!ブログの表示速度を向上させるためにした4つのこと」と題して記事をお送りしました!!

Twitterでコーヘイを

▲SNSでこの記事をシェアする▲