こんにちは。不可思議絵の具です。
WordPressってブログを運営する上でとても便利ですよね！
でも、気を抜くとすぐ表示が重くなりませんか？
インストール直後は速かったのかもしれないけれど、内容を充実させるためにテーマを変えたり、プラグインを入れたり、画像を貼り付けたりと工夫しているうちに、知らず知らずのうちにWordPressが遅くなってしまうみたいです。
私なんて特に、そういう「使い勝手」みたいな部分については無頓着なので
(´・ω・｀)。o○「ま、見れないわけじゃないから別に良いじゃん(鼻ﾎｼﾞ」
(´・ω・｀)。o○（少しずつ遅くなるから言われるまで気付かないし、気付いてもどうすれば良いか分かんないから面倒くさい）
なんて思っていました。
しかし、天下のGoogleはページの表示速度を検索順位の判定基準に含めているとのこと。
そういうことなら放っとけないね…(´・ω・｀)
ってことで、重い腰を上げてWordPressが遅い原因について調べ、改善するために必要な3つの知識・・・
- WordPressが速くなると現れる効果
（高速化すると何が良いの？頑張る理由は？） - WordPressが遅くなる原因
（どうして遅くなるの？） - WordPressを速くする方法
（どうすれば速くなるの？）
として徹底的にまとめました。
この記事を読むと
- そもそもWordPressを高速化すると何が得なのか
- 具体的にどういう設定をすればWordPressが高速化するのか
が分かるようになります。
まずは「WordPressが速くなると現れる効果」を説明します。
WordPressが速くなると現れる効果
WordPressの表示速度が速くなると、次の3つの効果が生まれます。
- お客さんの離脱が減る
- クローラーが巡回しやすくなる
- サーバーのコスト削減
それぞれ順に説明してゆきます。
お客さんの離脱が減る
あなたが検索する立場だったとして考えてみて下さい。
検索結果をクリックして、一呼吸置いても表示されなかったら諦めて別のページを開きますよね？
・・・お客さんの目に触れることさえできませんでした。
完全な機会損失です。
- 営業チラシなら「チラシに電話番号を書き忘れる」
- 飛び込み営業なら「ドアを開けてもらったのに話ができない」
こういうレベルのもったいなさです。
ページの表示は速いに越したことはないです。
Webの世界では表示速度の目標を「3秒ルール」と言ったりします。
ページが3秒以内に表示されないとお客さんは中身を見ずに帰ってしまうということです。
しかし、私の感覚では1秒。
待って2秒が限界だと感じています。
「3秒ルール」はPC全盛の2000年代中盤に言われていた基準です。
スマホが普及してネットの敷居が低くなった現在、お客さんのリテラシーは低くなり、かつ、スマホアプリの操作レスポンスに慣れているので、さらに「せっかち」になっているはずなのです。
参考 サイト表示が2秒遅いだけで直帰率は50％増加！ DeNA事例から学ぶWebの自動最適化手法／日本ラドウェア（Web担当者フォーラム）
そんな現状に合わせてGoogleは「ページの良し悪し」だけでなく、「使い勝手」も検索順位の算定に使うようになったと言われています。
具体的には滞在時間や直帰率を見ていると言われています。
つまり、遅くて即閉じされるページは「使い勝手が良くない」と判断されて検索結果の順位が落ちる可能性が大きいです。
なぜ、表示が遅いくらいで検索順位を落とされるのか。
Googleの立場に立って考えれば明白です。
- せっかく上位に押してあげたページがいつ見てもダウンしている。
- クリックしても遅くて開かない。
こんな理由でお客さんが「検索結果＝質問の答え」にたどり着けないとしたら？
Googleとしては紹介し甲斐がないですよね？
Google利用者の「Googleの検索結果は役に立たない」という評価にもなります。
だから別のページの順位を上げます（自分のページの順位が落ちます）。
Googleは「やる気のない」ページをずっと上位に置いておく理由が無いのです。
世界に一つしかない貴重なコンテンツなら話は別でしょうが、大抵のページはそんなことはありません。
つまり激戦ジャンルになるほど、こういった細かい差別化が効くはずなのです。
ひいては、検索結果の上位表示につながります。
機会損失を低く抑えることはWebマーケティングの第一歩です。
クローラーが巡回しやすくなる
Googleは日々、「クローラー」というロボットを各Webサイトに行かせて内容を収集していますが、なにしろWebサイトは沢山ありますので、クローラーが自分のサイトを巡回してくれる時間には限りがあります。
制限時間に達すると、巡回の途中であっても見切りをつけて去ってしまうのです。
したがって、
表示速度が遅い ＝ クローラーが1回に巡回するページ数が減る
いうことになります。
巡回するページ数が減るということは、
- 新しいページが検索結果に載るのに時間がかかる
- ページの修正が検索結果に反映されるのに時間がかかる
ということにつながります。
すなわち、SEO対策になります。
サーバーのコスト削減
表示速度が速くなることによって、
今まで2台使っていたサーバーを1台にまとめられたら？
今まで10台使っていたサーバーが5台にまとめられたら？
サーバーのレンタル代金が安くなりますよね。
この章のまとめ
WordPressの表示速度が速くなると、これらの効果が現れることがわかりました。
- お客さんの離脱（機会損失）を減らす
- SXO（使い勝手）対策
- SEO対策
- サーバーのコスト削減
次に、「WordPressの表示速度を遅くする原因」を説明します。
WordPressが遅くなる原因
では、WordPressの表示速度を遅くする原因には何があるでしょうか？
結局のところ、原因は以下の3つに行き着きます。
- 画像が重い
- HTMLソースコードが最適化されていない
- サーバースペックが足りない
影響度合いの大きな順に紹介します。
画像が重い
Webページは文字と画像の集まりです。
その中で「文字」は1万文字としても20KB程度の容量で済みますが、「画像」は
- 100×100程度の小さなアイコン1枚でも20KB程度
- アイキャッチや文中の写真だと通常1枚100KB～200KB程度
に達し、1ページの中に占める容量の割合は画像が圧倒的です。
アクセスの多いページでは何千回、何万回と表示されますので、その差が大きく積み上がってしまうのです。
したがって、以下の対策が必要になります。
- 不要な画像は表示させないようにする
- 画像の容量を削減する
HTMLソースコードが最適化されていない
WordPressエディタで入力した記事は最終的にHTMLソースコードに変換されてWebページとして表示されます。
HTMLソースコードを構成する要素は大きく3つです。
- テキストデータ
本文やHTMLタグの文字データです。
前述したようにテキストデータの容量は全体からすると非常に小さいので、そう神経質になる必要はありません。 - CSS
スタイルシートとも呼びます。
デザインやレイアウトを指定する言語です。 - JavaScript
画像にカーソルを載せると拡大したり、スライドショー効果を出したりなど、画面に動きを付ける時にWebブラウザーの動きを制御する言語です。
この中でCSS／JavaScriptはテキストデータに比べて内容が複雑なので、はるかに多くの読み込み時間が必要になります。
そして、これらを読み込まないことにはWebページのデザインが完成しませんので、読み込みが完了するまではWebページの表示に関する処理が一時停止してしまいます。
特にWordPressは作者の違うプラグインを多数組合せて動作しますから、同じCSS／JavaScriptが何度も読み込まれたり、不要なCSS／JavaScriptが読み込まれてしまったりと無駄な読み込みが起こりがちです。
サーバーの性能が足りない
画像を軽くしても、HTMLを軽くしても遅いのであれば、サーバーの性能不足が原因です。
- サーバーのCPUが遅い
- サーバーのディスクが遅い
- サーバーの回線が遅い
- 同居者が多くて混み合っている
などが原因なので、私達利用者の立場ではコントロールできません。
特にレンタルサーバーの場合、どうしようもありません。
しかし、これはかなり大変ですので最後の手段になります。
この章のまとめ
WordPressの表示が遅い原因は以下の3つに行き着くことがわかりました。
- 画像が重い
- HTMLソースコードが最適化されていない
- サーバースペックが足りない
最後に、「WordPressの表示速度を速くする方法」を具体的に説明します。
WordPressを速くする方法
前章でWordPressの表示が遅い原因は
- 画像が重い
- HTMLソースコードが最適化されていない
- サーバースペックが足りない
の3つ行き着く、と説明しました。
では、これら3つの原因を解決するにはどのような対策を取れば良いのでしょうか？
・・・と、その前に！
対策の前と後で表示速度を図らないと効果を測定できませんので、測定ツールを紹介します。
対策を施す前と後でこれらの計測ツールを実行して、改善の度合いを確認しましょう。
では、具体的な対策を紹介します！
画像の最適化
画像は文字情報の何倍も大きく、個数が多いので対策の効果が最も大きいです。
対策は下記３つです。
- 縦幅・横幅を可能な限り小さくする
- 圧縮する
- 読み込みを後回しにする
１．縦幅・横幅を可能な限り小さくする
画像のサイズが「フルサイズ」になっていませんか？
デザイン上許せるなら、可能な限り「中」や「サムネイル」にしましょう。
元画像が何千ピクセルもあったりしませんか？
大体の場合、横幅640ピクセルもあれば実用十分ではないでしょうか。
縮小やトリミングしてピクセル数を小さくするだけで、画像容量はグッと小さくなります。
２．圧縮する
写真のように色数や階調が多い画像はJPEG形式が向いています。
品質を落とすとさらに容量が小さくなります。
ほとんどのソフトの初期値は80%程度のようですが、60～70%程度にすると明らかに容量が小さくなります。
ただし、品質を落としすぎると輪郭がボケたり赤みが汚くなったりしますので、目視確認しながら妥協できる線を探します。
アニメ絵・イラストのように色数や階調が少ない画像（のっぺりした画）はPNG形式が向いています。
特にアニメ絵のセル画調の場合、色数を減らすのも効果があります。
これは実際に保存してみないと分からないので、それぞれの形式で保存してみて容量が小さくて済んだ方を採用しましょう。
「んな面倒くせえことやってられっかよ！」という方には【EWWW Image Optimizer】プラグインをオススメします。
画像をアップロードするだけで、自動で最適なパターンを選んで圧縮してくれます。
プラグインページ EWWW Image Optimizer
解説記事へのリンクは…。
紹介できるマトモな記事がありませんでした。
近いうちに自分でちゃんとした記事を書きたいと思います。
３．読み込みを後回しする
通常、画像はページの表示と同時に読み込まれます。
しかし実際には訪問者は途中で離脱したり、読み飛ばしたりしますから、目に入らない部分の画像を読み込むとムダです。
そこで、画面スクロールして実際に目に入る段階になって初めて画像を読み込むようにする「LazyLoad（遅延読み込み）」というテクニックが生まれました。
LazyLoadはJavaScriptを使うテクニックですが、WordPressの場合、LazyLoadプラグインをインストールするだけで実現できます。
解説 [WordPress] 画像をあとから読み込んで表示速度アップ！「Lazy Load」プラグイン（vdeep）
私の場合はLazyLoadが標準装備された「Simplicity」と「AFFINGER」テーマを使っています。
画面上から動作設定ができるので分かりやすいです。
公式サイト Simplicity
公式サイト AFFINGER
HTMLソースコードの改善
色々なプラグインを使っていると、CSSやJavaScriptが重複して無駄が発生します。
また、JavaScriptは
- 画面表示にすぐに必要ではないものはHTMLソースの後半に持ってゆく
- JavaScriptやCSSファイルを1つにまとめる
- コメント・改行文字・タブ文字など、表示上必要のないものは削除する
などの細かいテクニックがあります。
これらを行うことで
- HTMLソースコードをスリムにする
- Webサーバーへのアクセス回数を減らる
などの高速化効果が現れます。
しかし、こういったソースコードの改善をプログラムを知らずにやることはとても難しく、ミスも起こりがちです。
そこで、こういったソースコードの改善を自動的にやってくれるAutoptimizeというプラグインを使います。
プラグインページ Autoptimize
解説 【WordPress高速化】プラグイン導入とテーマ改善で爆速化した方法（SAKULIFE）
Autoptimizeの良いところは設定方法が実にシンプルな点です。
基本的に「HTML コードを最適化」「JavaScript コードの最適化」「CSS コードを最適化」にチェックを入れるだけでイイ感じにコードを圧縮してくれます。
当ブログもAutoptimizeで圧縮しています。
ソースコードを表示してみてください。ギッチギチに中身が詰まってますから。
なお、このジャンルはHead Cleanerの方がメジャーかもしれません。
（こっちの方が記事をよく見かける）
設定と機能がAutoptimizeよりもう少し凝っています。
プラグインページ Head Cleaner
解説 Head Cleaner の最も理想的な設定方法（バズ部）
不要プラグインの削除
昔入れたけど、今では使っていないプラグインはありませんか？
現在のWordPressの仕様では、プラグインを使っていようがいまいが、有効になっているものは全てのページで読み込まれてしまいます。
使っていないプラグインは完全な無駄で、下記の悪影響を及ぼします。
- 無駄な読み込みが発生してHTML作成処理が遅くなります
- 不要なHTMLソースコード（CSS／JavaScript）が出力されます
百害あって一利なしです。
不要なプラグインは削除しましょう。
せめて、停止しましょう。
（セキュリティの観点から言うと、削除すべきです）
読み込みプラグインを選択する
現在のWordPressの仕様では、プラグインを使っていようがいまいが、有効になっているものは全てのページで読み込まれてしまいます。
例えばフォームプラグインの「Contact Form7」を使っていたとします。
使うのは「問い合わせページ」だけかもしれませんが、実は全てのページで（通常の記事であっても）読み込まれています。
また、エディタープラグインの「TinyMCE Advanced」を使っていたとします。
管理画面で記事を作成するときにしか関係ないはずですが、これも実は全てのページで読み込まれています。
通常の記事でも読み込まれるのは完全なムダですよね…。
このようにプラグインは入れているだけで速度低下の原因になりますので、不要なものは削除すべきですが、外せないプラグインもありますよね。
そこで、「Plugin Load Filter」プラグインを使います。
プラグインページ Plugin Load Filter
解説 WordPress プラグインロードフィルター（セルティスラボ）
詳しい解説はセルティスラボ様のページを読んでいただきたいのですが、Plugin Load Filterを使うことで
- Contact Form7を問合せページでのみ読み込むようにする
- TinyMCE Advancedを管理画面でのみ読み込むようにする
- PS Auto Sitemapをサイトマップページでのみ読み込むようにする
といったことができるようになり、ムダなプラグインの実行を省けます。
○ ムダなプラグインの実行を止めてサーバーの処理が軽くなります。
○ CSS／JavaScriptのムダな出力が省かれることでHTMLソースコードが改善されます。
キャッシュを使う
「キャッシュ」を使うとWordPressの表示速度が速くなります。
キャッシュが速さに効く理由を理解していただくために、仕組みを簡単に説明します。
結果だけ知りたい方は読み飛ばしてください。
キャッシュ機能を実現するプラグイン
キャッシュ機能を実現するプラグインで一番お薦めはWP Super Cacheです。
WordPressを知り尽くしたAutomatic社（wordpress.comやJetpackプラグインなどを作っている）によるプラグインなので安心感があります。
プラグインページ WP Super Cache
解説 WP Super Cache – キャッシュでページ表示を高速化できるWordPressプラグイン（ネタワン）
良いことばかりではない
キャッシュは良いことばかりではなく、欠点もあります。
（仕組みを理解すると弱点が見えてきます）
ページの中に
- アクセスカウンター
- コメント
- 今日のアクセスランキング
のように頻繁に変化する項目があると、すぐにキャッシュが使えなくなります。
つまり、キャッシュの再作成が必要になります。
キャッシュの再作成が頻繁だと、再作成の判定が必要な分、未使用時に比べて速度がかえって遅くなります。
したがってキャッシュの効果を最大限発揮するためには、プラグインをポンと入れて終了、ではなく、
- アクセスカウンターを非表示にする
- コメント欄にすぐに書き込まれない旨を注意書きする
- アクセスランキングを非表示にする、
集計タイミングをリアルタイムから1日1回に減らす
などの工夫が必要です。
また、
- 「CSSを書き換えたのにデザインが変わらない」
- 「記事を更新したのに反映されない」
- 「コメントが書き込まれたのに表示されていない」
などの問題が起こりがちです。
何かトラブルがあった場合は、まずはキャッシュを疑ってみる、キャッシュを削除するなどの運用上の工夫が必要になります。
解説 ほんとうは怖いWPSuperCacheの話（高橋文樹.com）
ちょっと難しめですが、キャッシュを使うことによるリスクと原因が技術的に正しく説明されています。
△ ただし運用上の考慮が必要です。
サーバーの引っ越し
さて、ここまで色々な施策を打っても効果が現れないとしたら？
最後の手段はサーバーの引っ越しです。
どこのサーバーが良いのかという話ですが、私が最もお勧めできるのは「エックスサーバー」です。
- サーバー停止トラブルはほとんど無し
少なくとも自分の場合、サイト開設１年の中で全くトラブル無し。 - 時間帯による速度のムラもあまり無し
21時台のゴールデンタイムでも十分な速さ。
（全く遅くならないとは言えません） - 月100万PVは確実に耐えられる
私の知る限りではX10プランでリアルタイム400セッション、月120万PVに耐えた事例があります。
一言で言うと「安定」のサーバーです。
当サイト以外にも、色々なサイトでここの名前が上がっていると思いますが、実際に自分で使ってみると、それなりに理由があるのだということが分かりました。
まだ使っていない方は是非試してみてください。
関連記事 私がエックスサーバーを選んだ理由
関連記事 エックスサーバーでのWordPressブログの始め方
関連記事 独自SSLが無料のレンタルサーバーの一覧
既にエックスサーバーを使っている方の場合は…。
エックスサーバーで物足りないくらいですから、かなりの大手サイトですね！
私に繁盛するサイト運営の極意を教えてください^^;
そのレベルなら将来的なことも含めると、もはやVPSに行ったほうが良いです。
更にいうとVPSで使える「WordPress専用OSのKUSANAGI」を是非、検討してください。
KUSANAGIはWordPress専用に高速化チューニングされたOSで、専用のWordPressプラグインで密接に制御されていて、インストールした時点でとても速いのが特徴です。
今まで知らなかった方は、この機会に存在を知っておくだけでも損はないですよ。
関連記事 【神速】WordPressを高速化できるKUSANAGIとは？
関連記事 ConoHaとKUSANAGIで月々630円の格安WordPressサーバを作る
この章のまとめ
WordPressの表示速度を速くするための方法が具体的にわかりました。
紹介した対策のコストパフォーマンス早見表です。
| 対策 | 難易度 | 面倒さ | 効果 | コスパ |
|---|---|---|---|---|
| 画像改善 | 低 | 高 | 大 | 最高 |
| ソースコード改善 | 低 | 低 | 小 | 低 |
| プラグイン削除 | 中 | 中 | 中 | 中 |
| プラグイン選択 | 高 | 中 | 中 | 中 |
| キャッシュ | 高 | 低 | 大 | 高 |
| サーバー引っ越し | 最高 | 最高 | 最大 | 中 |
まずは簡単で失敗しても致命的ではない、「画像の改善」から取り掛かることをオススメします。
サーバーの引っ越しは最後の手段です。
さいごに
本記事ではWordPressを高速化するために必要な3つの知識・・・
- WordPressが速くなると現れる効果
（高速化すると何が良いの？頑張る理由は？） - WordPressが遅くなる原因
（どうして遅くなるの？） - WordPressを速くする方法
（どうすれば速くなるの？）
として徹底的にまとめました。
この記事を読んでいただいたことで
- そもそもWordPressを高速化すると何が得なのか
- 具体的にどういう設定をすればWordPressが高速化するのか
が分かって頂けたと思います。
結構長くなってしまいましたが、必ずやお役に立てると思います！
では！(^O^)／