【cocoon 高速化】あなたはブログの高速化してますか?【遅いは損する!】

ブログ運営

皆さんはブログの高速化対策をしていますか?

ブログの表示速度コンバージョンやSEOにも影響する重要なポイントとなっています。

現状記事の表示速度が遅いことでGoogleからの評価が大きく下がることはありませんが記事を読んでくれる読者や今後のことを考えておくとやっぱり意識しておきたいところです。

猫又
猫又

ブログの高速化っていってもなんだか難しそうじゃない?
専門知識のない人でもできるの?

ひいらぎ
ひいらぎ

その気持はよーく分かる!

ブログの高速化をやろうと考えている方の中には、

  • 高速化って難しそう・・・。
  • 自分でもできるか心配。
  • 専門的な知識がなくても大丈夫?

など考えている方もいると思います。

正直知識はあるに越したことはありませんがなくても全然大丈夫だと思います。ボク自身専門的な知識がない状態で高速化を始めてある程度速くすることができたので!

ただどうしても心配な方は一度記事全体をざっくり見てみて“自分でもできそうかどうか”を確認してください。

 

また当ブログの高速化はフジワラさんが執筆した「WordPressを高速化してPageSpeed Insightsで100点取った方法」を参考にしているので本記事で解説する方法はフジワラさんの記事と近いものになっています。

ボクなりに噛み砕いて説明していきますが、より専門的なことが知りたい方はフジワラさんの記事を参考にしてみてください。

 

そもそもなんでブログの表示速度を意識する必要があるのか?

猫又
猫又

なんで表示速度を意識する必要があるの?

ひいらぎ
ひいらぎ

遅いとSEO的に不利になるから!

なんでブログの表示速度を意識する必要があるのか?という話ですが、これは記事のはじめにも軽く触れましたがSEOの評価に関わるからですね。

表示速度が遅いと読者の動きが悪くなり同時に自分のブログの評価も下がってしまいます。

実際に「読み込み速度が3秒以上かかると40%のユーザが離脱する」とか「操作開始時間が2秒遅いだけで直帰率は50%も増加」といったデータがあるくらいです。

Googleもページ表示速度がSEOに影響することを公表しているので優先的に意識しないまでも最終的に意識するポイントにはなるんじゃないかなと思います。

なので現状ブログの表示速度が遅いと感じている方はちょっと工夫しておいたほうが良いかもしれませんね。

表示速度のチェック方法は?

ブログの表示速度をチェックする方法はいろいろありますが、本記事では無料で利用できるツールかつ代表的な測定方法を2つ紹介します。

  1. PageSpeed Insights
  2. Googleアナリティクスの「サイトの速度」
ひいらぎ
ひいらぎ

どちらもGoogleが提供しているツールなので安心!

1つ目:PageSpeed Insights

PageSpeed InsightsはGoogleが提供している測定ツールでブログのURLを入力するだけでモバイル・パソコンのページパフォーマンスを測定してくれます。

100点満点で評価してくれる上に修正が必要な項目や改善方法も教えてくれるので使わない手はありません。

利用するために登録する必要もないので誰でも簡単に利用できます。

ひいらぎ
ひいらぎ

100点満点でスコアを出してくれるのでわかりやすい!

2つ目:Googleアナリティクスの「サイトの速度」

Googleアナリティクスでも表示速度をチェックすることができます。

Googleアナリティクスを開いて左のメニュー「行動」→「サイトの速度」→「概要」から平均読み込み時間をチェックすることが可能です。

 

左のメニュー「行動」→「サイトの速度」→「速度についての提案」から各ページの表示速度をチェックすることもできます。

ひいらぎ
ひいらぎ

PageSpeed Insightsと違ってURLを入力する手間がないので便利です!

当ブログを実際に測定した結果・・・

猫又
猫又

実際このブログの表示速度ってどのくらいなの?

ひいらぎ
ひいらぎ

とりあえずPageSpeed Insightsで測定してみます!

 

モバイルの評価

パソコンの評価

猫又
猫又

ほぼ満点だ!!

ひいらぎ
ひいらぎ

一応PageSpeed Insightsからは良い評価をもらっています!

画像のようにPageSpeed Insightsからは良い評価をもらっていますがもちろん計測するタイミング(時間帯など)でこのスコアは多少上下します。

何回かにわけて計測をしてみたところモバイルは大体86~94くらい、パソコンは大体96~100くらいを行き来していますね。

それでも高速化をする前より格段に良くなっているのでここからさらに高速化をしようとは考えていません。

ひいらぎ
ひいらぎ

過去に高速化で数万円飛ばしているのがトラウマになっています・・・。笑

ボクが行った高速化対策

ここからは実際にボクがどういったことをしてブログの高速化をしたのか解説していこうと思います。

本記事で触れるものは以下の通り。

  • レンタルサーバー
  • WordPressテーマ
  • CDN(コンテンツデリバリーネットワーク)
  • WordPressプラグイン

この4つについて触れていきます。

その中のCDN(コンテンツデリバリーネットワーク)では課金が必要です。本当はすべて無料でできればよかったんですが、より良い効果を得るためにはお金をかける必要がありました。

とはいっても当ブログのように毎月数千アクセスくらいのブログなら月額大体1500~2000円くらいです。

ひいらぎ
ひいらぎ

毎月の料金は訪問者の人数によっても変動します。

毎月数万アクセスのブログだともう少しかかってしまいますが、そのレベルのブログを運営している方なら全然支払えると思います。

きつい方もその分頑張れば良いしブログへの投資だと思って払ってしまいましょう。

 

また高速化を行う際はブログのバックアップを必ずとるようにしましょう。

使うWordPressテーマやサービスによって動作不良を起こす場合があります。バックアップは「UpdraftPlus WordPress Backup Plugin」というプラグインがおすすめ。

より安全に作業したい方はFTPにアクセスしてファイルをすべてパソコンにコピーするのもアリだと思います。

本記事を参考にした結果、なんらかの問題が発生しても当ブログと運営者のひいらぎは一切責任をとりません。すべて自己責任でお願いします。

レンタルサーバーについて

利用するサーバーは「LiteSpeed」を使っているものを選ぶのがベストですね。

後述しますが無料のプラグイン「LiteSpeed Cache」を使ってブログ全体のキャッシュを管理したいのでこのプラグインが対応している「LiteSpeed」を選ぶ必要があります。

日本のサービスでいうと「Mixhost」や「colorfulbox」などが有名です。

ひいらぎ
ひいらぎ

ボクは「colorfulbox」で当ブログを運営しています。

以前はMixhostで運営していましたが、高速化をしようと思ったときになぜか上手くいかなかったのでcolorfulboxに移行しました。

Mixhostでも本記事の高速化は問題なくできるはずですが、なぜかボクの環境だとできなかったですね。

これから高速化を視野に入れつつブログを新しく作ろうと考えている方には一応「colorfulbox」をおすすめしておきます。料金も安いしその割にスペックも高いので問題なくブログ運営することができます。

ひいらぎ
ひいらぎ

colorfulboxにはMixhostが廃止した30日間無料お試し期間があるのも嬉しいポイントです。スタッフの対応も迅速で頑張っているイメージがあるので個人的にはこれから応援していきたいレンタルサーバーです。

WordPressテーマについて

当ブログで利用しているテーマはわいひらさんが制作した「cocoon」です。

今まで当ブログでは「AFFINGER5」「JIN」「THE THOR」といった評判の良い有料テーマを使ってきましたが、最終的に行き着いたのは完全無料の「cocoon」でした。

 

  • シンプルで軽量かつ高機能
  • 標準機能で高速化が可能
  • スキン対応
  • 広告対応
  • AMP対応
  • 高頻度なアップデート
  • 製作者わいひらさんの神対応

まさに無料テーマとは思えない優れたテーマです。

個人的にお金を払ってでも使いたいと思えるテーマなのでこれからブログを始める方で無料のテーマを探している方は「cocoon」以外考えなくてOKだと思います。

 

WordPressテーマの移行作業がかなり大変です。

前記事リライトやレイアウトの再配置などすべてやり直す必要があります。そう何度も変えられるものじゃないのでテーマ選びは慎重に行いましょう。

ひいらぎ
ひいらぎ

ボクも何度もテーマを変えて移行作業に数十時間とられました。

ひいらぎ
ひいらぎ

また本記事の高速化はcocoonで行うことを前提に説明しているので他のテーマを利用している方は注意してください。

CDN(コンテンツデリバリーネットワーク)について

体感できるレベルで高速化するためにはCDN(コンテンツデリバリーネットワーク)の導入は必須。

 

そもそもCDNとはなんぞや?って感じだと思いますがWikipediaには、

コンテンツデリバリネットワーク(英: content delivery network、CDN)とは、ウェブコンテンツをインターネット経由で配信するために最適化されたネットワークのことである。コンテンツ配信網とも。

コンテンツデリバリネットワークを用いることにより、ウェブのみならず、大容量アプリケーション、音楽、動画の配信やオンラインゲームといったブロードバンドのコンテンツを配信することが安定かつ低コストで行えるようになる。そのためビジネス分野において注目されている。

Wikipedia

といった感じで説明されています。

簡単にいうと記事データや画像などを世界中にあるサーバーに保存してどんな場所からでもページを高速表示させるサービスみたいなものです。

ひいらぎ
ひいらぎ

このへんは理解しなくてもOKです。
ざっくりデータが保存されたサーバーが設置されている地域からアクセスされた場合高速で表示させることができるよ!って感じです。

このCDNというサービスを2種類導入していきます。1つは「Cloudflare」もう1つは「BunnyCDN」です。

Cloudflare」に関しては完全無料で利用することができますがそのかわり高速化という観点ではそこまで仕事はしてくれません。今回はDDoS攻撃などの有害アクセスのブロックやリバースプロキシの利用を目的に導入してきます。

BunnyCDN」は課金が必要になりますがそのかわり表示速度を格段に速めてくれます。前述した通り月額の料金はブログの訪問者の人数によって変動します。

Cloudflareの導入

Cloudflare」を導入する主な目的は、

  • ページ表示の高速化
  • DDoS攻撃などの有害アクセスのブロック
  • 無料SSL証明書
  • リバースプロキシの利用(Webサイトの匿名化)

上記4つは登録すれば無料で使うことができます。

前述した通り「Cloudflare」の無料プランだと表示速度の高速化はそこまで期待することができないのでブログのセキュリティや匿名性の向上に徹底してもらいます。

高速化に関しては後述する「BunnyCDN」を活用していくので”セキュリティや匿名性には興味がないよ!”という方は最悪「Cloudflare」はスルーでも問題ないと思います。

ひいらぎ
ひいらぎ

当ブログでも「Cloudflare」は利用していますが表示速度にはそこまで影響していないように思えます。

Cloudflare」の導入目的は”リバースプロキシ”という機能。

通常ネームサーバ(DNS)はブログ(WordPress)を運営しているホスティングのサーバーIPを参照先としてますが、これを「Cloudflare」にすることで本来のサーバーIPが匿名化されるので結果セキュリティが向上します。

以前まで英語にしか対応していませんでしたが、今は日本語をはじめ様々な言語に対応しているので導入するハードルはかなり低くなったと思います。

 

Cloudflare」の導入方法は以下の記事が一番わかりやすいです。

そこそこ昔の記事なので今と画像が違うと思いますが大体の流れは一緒なので参考になると思います。

https://nelog.jp/cloudflare-registration

 

ひいらぎ
ひいらぎ

以下「Cloudflare」の設定。

 

「Caching」構成ページ

  • キャッシュレベル:スタンダード
  • ブラウザキャッシュTTL:既存のヘッダーを優先

 

「ページルール」

  • *ドメイン名/*&preview=true
    キャッシュレベル, スキップ, パフォーマンスを無効にする
  • *ドメイン名/*wp-admin/*
    キャッシュレベル, スキップ, パフォーマンスを無効にする
  • *ドメイン名/*
    キャッシュレベル, スタンダード, エッジ キャッシュ TLL: 1ヶ月

ページルールは上記の設定が推奨。

この設定をしないとブログにアクセスした人に見えちゃいけないページもキャッシュする可能性があります。上記の設定はWordPressの管理画面とプレビュー画面のキャッシュを無効にするものですね。

ひいらぎ
ひいらぎ

その他の設定はデフォルトのままでOKです。

BunnyCDN

BunnyCDN」を導入する主な目的は、

  • 画像最適化
  • WebP配信
  • CSS、JS等のコンテンツ配信

表示速度の高速化には必要不可欠なものを「BunnyCDN」が補ってくれます。

前述したとおり課金が必要になりますが、他のサービスと比べてもかなり低価格で高速化のサポートをしてくれるので導入しない手はないかなと思います。

BunnyCDN」で支払うお金は毎月の訪問者の数によって変動する料金と「Bunny Optimizer」と呼ばれる機能の使用料月額9.50ドル(約1000円)のみ。

ひいらぎ
ひいらぎ

当ブログは毎月3000円あれば結構余るくらい。小さいブログであればそこまでお金はかかりませんね。

月額9.50ドルの「Bunny Optimizer」という機能はブログ内の画像を圧縮してサイズを小さくしてくれたり、WebP配信してくれたり・・・さらにCSSファイルやJavaScriptファイルのサイズを小さくしてくれたりもします。

正直「BunnyCDN」で高速化したいのであれば「Bunny Optimizer」の利用は必須です。

 

ただ画像の最適化やWebP配信だけなら有名なプラグイン「EWWW Image Optimizer」でも可能です。

ボクも以前まで利用していました。

この「EWWW Image Optimizer」は簡単な設定をするだけで画像のサイズをキレイな状態で圧縮してくれたり、WebP配信してくれたりしますが、たまにWebP配信されない画像が出てきたりブログ全体が少し重くなるという理由で使うのをやめてしまいました。

どうしても9.50ドルが厳しいという方は「EWWW Image Optimizer」の利用をおすすめしますが、「Bunny Optimizer」を利用していない分高速化には期待できないので注意してください。

 

いろいろ書いてきましたが「BunnyCDN」では2週間の無料トライアルの用意されています。

その期間であれば完全無料ですべての機能(Bunny Optimizerを含む)を利用することができるのでとりあえず2週間利用して高速化を体験してみるのが良いと思います。

ひいらぎ
ひいらぎ

普通に登録するだけで2週間の無料トライアルは適応されるようになっています。

 

BunnyCDN」の設定方法は下記の記事がわかりやすいです。

全体が英語なので記事上で右クリックして「日本語に翻訳」から翻訳して見てみてください。

https://wpspeedmatters.com/bunnycdn-wordpress/

 

ひいらぎ
ひいらぎ

以下「BunnyCDN」の設定。

 

「General」

  • Force SSL:ON

 

「Caching」

  • Cache Expiration Time:Override 1year
  • Browser Cache Expiration Time:Override 1year
  • Query String Sort:ON
  • Disable Cookies:ON
  • Browser WebP Support:ON

 

「Headers」

  • Add Canonical Headers:ON

 

「Optimizer」

  • Bunny Optimizer:ON(月額9.50ドル)
  • WebP Compression:ON

「WebP Compression」はWebP最適化の設定です。

ブログ内の画像を自動でWebPに変換したい方はONにしましょう。無論WebPにしたほうが表示は速いです。

「Minify CSS Files」と「Minify JavaScript Files」はCSSとJavaScriptの圧縮設定です。

フジワラさんの記事では「BunnyCDN」から配信される「style.css」はレイアウトが崩れるということでOFFが推奨されていたので当ブログでもOFFにしています。

ひいらぎ
ひいらぎ

とりあえずONにしてもOKですがブログのレイアウトが崩れたらこの2つはOFFにしてください。

ひいらぎ
ひいらぎ

その他画像にない設定はデフォルトのままでOKです。

WordPressプラグインについて

最後にWordPressのプラグインについて書いていきます。

当ブログで使用しているプラグインの数は14個ですが、基本プラグインの数が多ければ多いほど高速化に影響してくるので少ないに越したことはありません。

ひいらぎ
ひいらぎ

14個はちょっと多めかも・・・。

プラグインは必要最低限を意識しておくとより高速化することができます。

これから当ブログで使っているプラグインの役割と簡単な説明をしてきますが、自分のブログには必要ないと思ったものは入れなくてOKです。

またプラグインの設定は基本画像の通りに設定してなにか問題が起きたら各自調整してみてください。

BunnyCDN

「BunnyCDN」とブログを紐付ける際に使ったBunnyCDNのプラグインです。

紐付けのやり方は他にもありましたがプラグインのやり方が一番簡単そうだったので選びました。プラグイン内の設定は特にいじる必要はありません。

Flying Analytics

Flying Analyticsは高速化の足を引っ張るGoogleアナリティクスのサポートをしてくれるプラグイン。

cocoonにも標準で入力する項目は用意されていますが、そっちにコードを入力するとどうしても速度が落ちてしまいます。そこでこのプラグインの出番です。

「JavaScript method」はよくわからなかったので推奨されていた「Minimal Analytics Inlined」を選択。

Googleアナリティクスを使っていない方はいらないプラグインです。

Flying Images

Flying ImagesはChromeでサポートされている画像ネイティブ遅延読み込みを可能にするプラグイン。

画像を遅らせて読み込ませることでより速くページを表示させることができます。「Enable lazy loading」にチェックを入れて「Lazy load method」は「Native only」を選択します。

「Exclude Keywords」に画像のファイル名をいれることで遅延読み込みさせないこともできます。

 

CDNは「BunnyCDN」を利用するので「Enable CDN」はOFFにします。

Flying Pages

Flying Pages内にある「Preload only on mouse hover」にチェックを入れるとリンクにマウスホバー(リンクの上をマウスが通過)したときに読み込まれるようになるのでアクセス時の無駄な読み込みが少なくなり表示が速くなります。

Flying Scripts

Flying ScriptsはJavaScriptの実行を遅延させるプラグイン。

JavaScriptは高速化において何かと足を引っ張るのでそれを遅らせることでページの読み込みを速くするということです。

 

flying-pages.min.js
adsbygoogle.js
vcdal.js
stickyfill.min.js
jquery-migrate.min.js
jquery.min.js
highlight.min.js
javascript.js
ひいらぎ
ひいらぎ

フジワラさんが用意したものをお借りしました。上記をコピーしてFlying Scripts内にペーストしましょう。

「~~.js」というファイルをFlying Scripts内に入力することでそれらすべてを遅延読み込みさせることができますが、なんでもかんでも送らせていると不具合が起きたりする可能性もあるのであまりおすすめしません。

よくわからない方はそのまま使いましょう。

LiteSpeed Cache

LiteSpeed CacheはLiteSpeedWebサーバーのみで使用できるキャッシュプラグイン。

項目が多すぎて説明が面倒なのでこちらの記事「LiteSpeed Cache WordPress Plugin – UNOFFICIAL GUIDE」を翻訳して各自設定してください。

ボクもほとんど上記の記事と一緒です。

 

ひいらぎ
ひいらぎ

一部違う設定は以下の通り。

 

「LiteSpeed Cache」除外ページ

「URIs をキャッシュしない」という項目に特定のページを設定しています。

キャッシュされたくないページを入力しておくと良いかなと。当ブログではお問い合わせページにフォームがあってキャッシュされてしまうと何かと怖いので一応除外しています。

必要ない人はデフォルトのままでOK。

 

「LiteSpeed Cache CDN」CDNページ

「LiteSpeed Cache CDN」CDNページで「Cloudflare」「BunnyCDN」の設定をしていきます。

 

LiteSpeed Cache内にBunnyCDNのホストネームを入力することで今後画像やCSS、JavaScriptは「BunnyCDN」から配信されるようになります。

 

前述しましたがBunnyCDNから「style.css」を配信するとブログのレイアウトが崩れるのでここで除外設定をしておきます。

cocoon以外のテーマだと崩れない可能性があるので各自確認してみてください。

 

「Cloudflare」はメールアドレスとグローバルAPIキー、ドメインを入力することでキャッシュ管理することができます。

 

グローバルAPIキーは「マイプロフィール」→「APIトークン」→「Global API Key」から確認することができます。

ひいらぎ
ひいらぎ

これでLiteSpeed Cacheの設定は終了。LiteSpeed Cacheのキャッシュを削除するしておくことをおすすめします!

Google XML Sitemaps

Google XML Sitemapsは定番のサイトマップ生成プラグイン。

サイトマップを自動生成して検索エンジンに通知してくれます。

細かい設定はバズ部の記事が一番新しくてわかりやすいです。

https://bazubu.com/google-xml-sitemaps-27067.html

WebSub/PubSubHubbub

WebSub/PubSubHubbubは検索エンジンに更新したページをいち早く認識させることができるプラグイン。

効果がわかりづらいですがおまじない的なノリで入れています。

WP Multibyte Patch

WP Multibyte PatchはWordPressで使う際に日本語のようなマルチバイト文字を文字化けなどの不具合が起こらないようにするためのプラグイン。

AddQuicktag

AddQuicktagはよく使うHTMLコードを簡単に挿入できるようにするプラグイン。

太字や赤字、マーカーなどの装飾をこれで管理しています。

Limit Login Attempts Reloaded

Limit Login Attempts Reloadedはパスワード総当たり攻撃(ブルートフォースアタック)による不正ログインを防止するためのプラグイン。

利用しているレンタルサーバー「ColorfulBox」で設定をすると自動でインストールされます。

あとから追加することも可。

Rich Table of Contents

Rich Table of Contentsは日本発の目次プラグイン。

WordPressテーマ「JIN」の製作者であるひつじさんが作ったプラグインです。すごいキレイな目次が簡単に作れるので重宝しています。

各パーツの色合いを変えることも可。

TinyMCE Advanced

TinyMCE AdvancedはWordPressのビジュアルエディタを編集することができるプラグイン。

いらないものを削除したり必要なものを追加したりと自分好みにカスタマイズすることができます。

WPForms Lite

WPForms Liteは簡単にお問い合わせフォームが作れるプラグインの無料版。

有料版にするとより高度なフォームを作ることができますが無料でも十分すぎるほどです。

cocoon標準の高速化について

cocoonに標準搭載されている高速化の項目は上記画像のように設定しています。

ブラウザキャッシュ・Googleフォント・WEBフォントは「LiteSpeed Cache」で、画像の遅延読み込みは「Flying Images」にまかせています。

cocoon高速化まとめ

本記事ではボクが行ったcocoonの高速化(ブログの高速化)を解説してきました。

利用するサーバーやテーマ、プラグインの数や画像の大きさ・数などで表示速度は変化します。紹介している方法をすべてマネしても同じような効果が得られるとは限らないので注意してください。

またかなり複雑な作業をしているので不具合はどこかしらで発生すると思います。そんなときも焦らず今まで設定してきた項目を一旦OFFにしたりして不具合の原因を探すようにしましょう。

設定を変更してもキャッシュが残っていると不具合は残ったままなので作業中はこまめにキャッシュを削除して最新のページ情報を読み込むようにしましょう。

 

記事の冒頭でも紹介しましたが、当ブログが実践した高速化はフジワラさんが執筆した「WordPressを高速化してPageSpeed Insightsで100点取った方法」を参考にしています。

なので記事の構成や内容が似てしまっていますが、より詳しい情報が知りたい方はフジワラさんの記事を参考にすると良いと思います。

ボクにわかることであれば質問にも答えようと思うので気軽にコメントをください。

ひいらぎ
ひいらぎ

長い記事を読んでくれてありがとうございました、今回はホントにお疲れ様でした!

猫又
猫又

高速化に成功したらとりあえずゆっくり休もう!

コメント

タイトルとURLをコピーしました