ブログの表示スピードはとても重要。
どれくらい重要かというと牛丼屋で牛丼が出てくるスピードくらい重要。それか駅ナカのそば屋。
世間はインスタントに情報を欲していて、手軽に読めるブログを探している。そんな人どれだけいるのかというと、
表示速度が1秒から3秒に落ちると、直帰率は32%上昇する
表示速度が1秒から5秒に落ちると、直帰率は90%上昇する
表示速度が1秒から6秒に落ちると、直帰率は106%上昇する
Think with Google
つまり、表示に5秒以上かかるブログはまず読まれない。
たしかに表示が遅いブログを待たされる間はイライラするし、読み込んでいるグルグルが表示されただけでもなんだかムカついてくる。
そんなぼくもこのブログの表示スピードを測ってみると驚異の「24」！
それはいかんと一念発起してブログの表示スピードを高速化するためにやったコトを紹介する。
この記事はロリポップ！のサーバーとSWELLを使っている人にオススメです
SWELLを使う
なにかと話題のWPテーマSWELL。
例に漏れずこのブログもSWELLで作っているのだけれど、とにかく多機能なのに表示スピードも早いスゴいやつ。
他のテーマももちろん優秀だけれど、これからブログを始める人やテーマの乗り換えを考えている人はSWELLにしておけば間違いない。
ぼくも色々使ってみて結局SWELLに落ち着いているので、迷っている人がいたらぜひ。
最初から多機能
プロフィール表示とかランキング表示とかがデフォでできるのがSWELLの強みだと思う。
これらの機能って確かにプラグインを入れればできるのだけれど、プラグインは増えれば増えるほど重くなる。
それに自分のブログとプラグインのデザインが合っているとも限らない。入れてみたはいいけれど、なんとなくプルフィールが浮いてるなあと感じるのはデザインが違うからかも。
そういった不安も無くなったのはSWELLのおかげ。欲しい機能が一通り入っているのに表示スピードもそんなに遅くならないのがほんと不思議。
Hanテーマで悩んでいる人がいたらSWELLほんとオススメ。
高速化機能が優秀
その他にもSWELLには高速化機能が最初から付いてくる。
キャッシュ機能や遅延読み込みなど高速化プラグインに引けを取らない機能がSWELLには最初から入っている。これによって余計なプラグインを入れる必要がなく、設定も簡単なのですぐにその効果を実感することができる。
高速化機能のオススメの設定はこちら
とりあえず全部チェックでOK。
- 動的なCSSをキャッシュする
- ヘッダーをキャッシュする
- サイドバーをキャッシュする
- 下部固定メニューをキャッシュする
- スマホ開閉メニューをキャッシュする
- トップページコンテンツをキャッシュする
- 内部リンクのブログカードをキャッシュする
- 外部リンクのブログカードをキャッシュする
これもこんなかんじでチェック。
- 記事下コンテンツを遅延読み込みさせる
- フッターを遅延読み込みさせる
- スクリプトを使って遅延読み込みさせる
これはこんなかんじでチェックを入れる。
- SWELLのCSSをインラインで読み込む
- コンテンツに合わせて必要なCSSだけを読み込む【β機能】
- Prefetch
ただ、Prefetchに関しては表示が崩れることもあるらしいので調子が悪くなるようならチェックは外しておく。
最後に「変更を保存」を押すのを忘れずに！
Google Tag Manager を使う
GoogleのTag Managerを使うとなんでもタグが非同期になって表示スピードが上がるらしい。
詳しいことはよくわからないけれど、とにかくやってみる価値はある。ぼくもこの設定をやってみて表示スピードが上がったので、大変だけれどやってみてほしい。
あとなんで非同期だと早くなるのかよくわからないので詳しい人教えてください！
Hanお願いします！
Google Analyticsの設定の仕方
ブログを運営していく上でアナリティクスを使っている人は多いと思う。
今回はこのアナリティクスをタグマネージャ経由で測定することでブログの表示スピードの向上を狙っていく！
まずはアカウント作成から！
わかりやすい名前を考えておこう。
- アカウント名
ぼくはここにサイト名を入れてる - 国
「日本」を選択 - コンテナ名
わかりやすい名前で！「計測」とかでもいいかも - ターゲットプラットフォーム
「ウェブ」を選択
日本語は今のところないよ！
タグマネージャーのコードが出てくるので、これを自分のサイトに貼り付ける。
ぼくはSWELLを使っているからここからはSWELLの画面で説明。
SWELLのカスタマイザーを開いて、「高度な設定」を開く。
Googleのタグマネージャーで表示されたコードをそれぞれSWELLの</head>直前と<body>直後にコードを貼り付ける。
公開してカスタマイザーを閉じる
追加したコンテナに新しいタグを追加する。
タグの設定をクリック
タグタイプは「ユニバーサルアナリティクス」を選択
Googleアナリティクス設定で「新しい変数」を選択。
Googleのアナリティクスにログインして、今使っているトラッキングコードを取得する。
場所は「設定」⇨プロパティの「トラッキング情報」⇨「トラッキングコード」から取得することができる。
コピーしてきたトラッキングコードを「トラッキングID」に貼り付け。画像のようになればOK。
変数の名前をつけて、保存を押して画面を閉じる。
次はトリガーの設定をする。
トリガーは「All Pages」を選択。
最後にタグの名前をつけて、保存を押して画面を閉じる。
ぼくはこの名前はわかりやすいように「アナリティクス」にした。
公開を押すことを忘れずに。
これでタグマネージャー経由でアナリティクスすることができるようになった。
一応ちゃんとPVとかを取得できているかアナリティクスの画面で確認しよう！
Hanお疲れ様でした
Google Consoleの設定の仕方
Google Consoleの「設定」⇨「所有権の確認」⇨「Google タグマネージャー」とあるので、ここをクリックするだけ。
あとは自動で認識してくれるので確認ができたら画像のように緑のチェックが入る。
Google Adsenseの設定の仕方
やり方としてはアナリティクスと大差ないけれど、気をつけなければいけないのがアドセンスを入れた途端にブログの表示スピードはめちゃくちゃ落ちるということ。
なので個人的にはブログにアドセンスを貼る人はタグマネージャーの設定は必須だと思う。これを設定するだけで劇的に表示スピードが変わるので頑張って設定していこう。
Google Adsenseをはじめて使う人は一旦直張り（Google Adsenseのコードを直接<head>の直後に貼る）の方がいいっぽい！ 審査に通りにくくなるらしいので、合格したらタグマネージャに追加しよう
早速新しいタグを作成しよう。
カスタムHTMLは下の方にあるのでこれをクリック。するとHTMLを貼り付けるページが出てくる。
Adsenseのコードは「サマリー」⇨「コードの取得」で確認することができる。これをコピーしてさっきのタグの設定のところに貼り付ける。
トリガーの設定は「All pages」。
選択してタグの設定画面がこのようになっていればOK！
設定が終わったタグは早速「公開」してみよう。
公開するときにバージョンの情報を聞かれるので、ここは自分が分かりやすく何を変更したのか書いておく。ぼくはタイトルを「Adsenseを追加」にして内容に「Adsenseを追加しました」と書き込んだ。
複数人で運用していくときはこのバージョン管理の情報が大切になってくるので、後から見直しても分かるように書いておこう！
Hanちゃんと広告が表示されているかチェックしよう！
プラグインを最小限にする
ぼくの使っているプラグイン
現状ぼくのブログで使っているプラグインはこんなかんじ。ここは変更があったら随時更新していこうと思う。
Hanこれの他にもおすすめのプラグインがあったら教えてください！
- BackWup
バックアッププラグイン - EWWW Image Optimizer
画像圧縮プラグイン。使うときだけ有効化 - Imsanity
画像リサイズプラグイン。使うときだけ有効化 - Pochipp
アフィリエイトリンクが綺麗に整うプラグイン - SEO SIMPLE PACK
必要最低限のSEO対策。これで十分 - Useful Blocks
見やすいブロックを追加できるプラグイン。あんまり使ってない - WordFence Security
とりあえず入れとけばOK - WP Multibyte Patch
日本語パッチ。 - WP Revisions Control
無限に増えるリビジョンを制限できるプラグイン。めっちゃ大事
使ってたけど消したプラグイン
上で紹介したプラグインはかなり厳選したつもりだったけれど、それでもやっぱり運用していくと不要になるものもいくつかある。そんなプラグインも紹介。
- Site Kit by Google
アナリティクスとかウェブ版の方をよく見るので不要になった。それとhead付近にタグが追加されるので、見た目が悪いので削除 - All in One Seo Pack
単純に重い - Autoptimize
最初入れてたけれど、SWELLの高速化設定の方が早くなったので削除 - Flying Scripts by WP Speed Matters
JavaScriptを遅延読み込みしてくれるプラグイン。SWELL設定の方が早い - Async JavaScript
これもFlyingと似たようなかんじ
画像を編集する
ブログの表示スピードを下げるほとんどの原因は画像にあると言っても過言じゃない。
高画質の写真を載せたくなる気持ちもわかるけれども、そもそもほとんどの人がスマホで見る時代。
なので大半の人にとっては高画質の写真を見ることができない。
なので表示スピードを上げていくためにも画像の編集は必須だ。
画像の圧縮
たとえどんなに画質の良い写真を使っても見てもらえないと意味がない。
最近だとiPhoneでも4Kで撮れるようになったりと画質の成長は目覚ましい。
しかしブログで使う写真なんかはほとんど”分かれば良い”レベルのものでしかなく、写真家のようなブログでない限りその画質にこだわっても読み込むデータ量が増えるだけなのでなるべく圧縮してブログに載せた方が表示スピードは上がる。
ぼくが使っている圧縮サイトはこちら。
あとはこれの他にも
・EWWW Image Optimizer
という画像圧縮プラグインも有名。こっちはすでにアップロードした画像もすべてまとめて圧縮してくれるので「圧縮するの忘れちゃった！」みたいな方にもオススメ。
画像のリサイズ
画像の圧縮もした。しかし画像サイズが大きいままなんてこともよくある話。
実は圧縮と同じくらいに画像のリサイズは大切な作業。今回はそれを効率的に行えるプラグインも紹介する。
・Imsanity
画像のサイズを指定して一括でリサイズすることができる気の利くプラグイン。
こちらもすでにアップロードされている画像もすべてまとめてリサイズしてくれる。
使っていない画像を消去する
めちゃくちゃ危険です！
SWELLでこの方法を使って画像を消去するとヘッダー画像やプロフィール画像も消去されてしまうので、バックアップを取ってから行ってください！！
ブログの表示スピードを上げるためには使っていない画像を消すのも効果的。
WordPressでは簡単に消す方法があるのでご紹介。
メディアライブラリに移動したら「すべてのメディア」を「未添付」にする。
ブログで使われていない画像の一覧が出るので、「一括選択」をクリックして削除したい画像をクリックする。
あとは「完全に削除する」ボタンを押せばOK！
サーバーの設定を見直す
PHPのバージョンを確認する
意外と効果があったのがPHPのバージョンを見直すこと。
これは契約しているサーバーによって操作方法が変わるのでそれぞれで調べてほしい。
ぼくが使っているのはロリポップ！なのでPHPのバージョンアップ方法を紹介する。参考までに。
ログインできたら「サーバーの管理・設定」⇨「PHP設定」の順で進む。
PHPの設定画面でバージョンを変更する。
下のピンクで囲った中に、それぞれのPHPのバージョンにどのような特徴があるのかの表が載せてくれている。ぼくはこれを参考に「モジュール版」にした。
Han正直、どうしてモジュール版だと早いのか理由はわからないよ！
【最終奥義】プランをアップグレードする
Hanこれはマジで最終奥義。
もう究極なす術なし状態になったらアップグレードしかない。
ぼくの場合はアドセンスを入れてから極端に重くなったのだけれど、むしろアドセンス入れてるなら最上位のプランにしろよ、という声も聞こえてくるような気さえする。
そんな声にお応えして早速ロリポップ！のハイスピードプランにアップグレードしてみた。
大して変わっていない…!!??
でもハイスピードプランにしてから明らかにWordPressの管理画面の遷移スピードが上がった。テストで自分のサイトを開いてみても早い気がする。それでもこのスコアなのは正直……。
Hanあまり気にしない方がいいんじゃね！？
SWELLの高速化設定を見直した
色々やってきたけれど、結局はこの高速化設定がしっかりできていないからダメなんじゃね！？
ってことで、ぼーっと眺めているとこんな欄があった。
HanこれなんかAutoptimizeで見たなあ
高速化設定の遅延読み込みにコードを追加
というわけでこの遅延読み込みのところにタグマネージャーの遅延読み込み用のコードを追加してみた。
追加するのはこのコード
googletagmanager.com/gtm.js,
pochipp/dist/js/update.js,
追加してぼくのはこんなかんじ
twitter.com/widgets.js,
instagram.com/embed.js,
connect.facebook.net,
assets.pinterest.com,
googletagmanager.com/gtm.js,
pochipp/dist/js/update.js,今回ぼくが追加したコードはタグマネージャーのものだったけれど、自分のブログの状況によって書き換えることもできる。アドセンスやアナリティクスを入れている人は多いと思うのでここにコードを紹介！
| 遅延読み込み | トラッキングコードのタイプ | 貼り付けるコード |
|---|---|---|
| Googleアドセンス | – | adsbygoogle.js, |
| Googleアナリティクス | gtag.js | googletagmanager.com/gtag/js, gtag(, |
| Googleアナリティクス | analytics.js | google-analytics.com/analytics.js, |
まとめ
ブログの表示スピードとは永遠の課題だ。
デザインにこだわれば遅くなるし、スピードにこだわれば個性がなくなっていく……。
とはいえブログとは情報商材になるわけだから、コテコテのデザインで永遠に開かないサイトよりも欲しい情報が分かりやすく必要十分に揃っているブログの方がGoogleさん的には価値があるとしている。
なのでブログの表示スピードを無視する理由などないのだ。
そんな中でぼくがした今回の施策で大抵のブログは早くなると思う。
最後にこの記事の概要をおさらい。
- SWELLを使う
- Google タグマネージャーを使う
- プラグインは最小限に
- 画像を見直す
- サーバーの設定を見直す
- SWELLの高速化設定をする
今回紹介したことをやってもらえればすぐにあなたのブログの表示スピードも上がると思う。
それでも上がらない時はもちろんある。そんな時はトップページのコンテンツやウィジェットあたりを見直してみるといいかもしれない。
HanすべてのSWELLERに幸あれ！
コメント