普通に何もせずにWord Pressをインストールして使っていると、ユーザー視点から見た場合サイトの表示速度が遅くなってしまってしまう可能性があります。
よくSEOに関連するコンテンツを発信しているサイトなどでは
表示速度の高速化＝SEOの評価
とも言われてもいます。
実はそうではないのですが・・・ただ、少なからずスマホユーザーも増えた現在、表示速度は遅いよりも早いほうがいいです。
実際、下記のデータはワードプレスを導入したままの「デフォルトの状態VSこれから紹介する施策した状態」の表示速度を計測したものですが、モバイルで３５ポイント・PCで４８ポイント高速化できたのがわかります。
「え？１００点じゃないじゃん！」
と思われるかもしれませんが、テストの点数で考えれば１００点やA判定が理想のように思えますが、ウェブマーケティングの観点から見れば逆にデメリットがあるのです。
ここでは、その理由を含め初心者でもできるWordPressの高速化の仕方に関してステップバイステップで解説をしていこうと思います。
１.理想的なサイト表示速度はどれくらいなのか？
Googleではユーザービリティーを考えた上でサイトの表示速度は速いほうがいいという主張をしていますが、だからと言って表示速度が早ければ上位表示の評価とするとまでは言っていません。
確かに、Googleのコンテンツ開発者であるPaul Lewis氏は「デスクトップで９０点以上、モバイルで８５点以上が好ましい」と発言してはいますから、「高速化が大事だ！」と思われるのはわからないでもありません。
だから、高速化を図ればいいのか？と言われたらそれは違うと思います。
実際高速化をするためにめには、先ほども言ったようにキャッシュ・画像の読み込み・ソースの軽量化の３つが必要です。
これを極限までやろうとすれば、
シンプルで画像もなくSNSなどの外部と連携している機能をできるだけ断つ。
までしないといけません。
それに、よくWordPressの高速化の方法を解説している１００万PVを達成しているブロガーさんとかもいますが、彼らのブログの速度自体が４０点以下だったりすることを考えるとSEOに影響を及ぼすわけではないのです。
それよりも大事なのは、WordPress高速化が実はSEOに全く関係なかった！本当に軽量化すべき1項目の記事でも言っているSeach Consoleのページのダウンロード時間（ミリ秒）の数値です。
ただ、だからといって高速化が必要ない！
というわけではなく、ユーザビリティーを考えればある程度は必要です。全然表示されないとイライラしちゃいますし戻るとか×ボタンを押されてしまいかねませんからね。
ユーザビリティーを考えた上である程度のデザインを保持した上で表示速度を遅くしすぎないように高速化を図る。
がベストです。
個人的には、
・デザインに力をある程度いれて
・最低５０点
・基本６０点以上を確保をする。
が最もベストだと考えていますし、実際に個別コンサルで相談された時にもこのようにアドバイスをしています。だから、これからあなたにお話ししていく高速化の手法は全てをやらなくてもいいということは覚えておいてください。
個人的にはページの速度を計測する際、Page Speed Insightsで「最も画像など力をいれた投稿記事」で計測するのが望ましいです。
トップページなどを上位表示させたい場合にはトップページでいいのですが、大体の場合、記事そのものにアクセスを呼び込むはずなので最も力を入れた記事で計測をしておけば、それ以下のポイントになることはテンプレートそのものを変えない限りはなくなるからです。
２.高速化するためにすべき３項目
まず、高速化をするにしても何がWEBページの表示速度に影響を与えているのかを知らなければ何もできません。では、一体何が表示速度に影響を与えているのか？は主に以下の３つです。
・画像の読み込み速度
・キャッシュ
・ソースの内容と順序
もちろん、これらを表示をする為に必要なサーバーも重要なのかもしれませんが、こればっかりは自分自身でどうにかできる事ではないので抜きにすると、この３つの項目を修正を加えれば高速化ができます。
１つずつ説明していきましょう。
僕の場合はサーバーは、エックスサーバーを活用していますが、レンタルサーバー会社によって速度が変わるか？というと最新技術を取り入れればちょっとした差が出ますが、レンタルサーバー会社も競争が激しいのでどこを選んでも最終的には変わらないと思います。（アマゾンなどの大手のサーバーなどは膨大な容量を表示させるだけのスペックがありますが・・・）
個人的にはエックスサーバーは常に最新技術の提供を低価格or無料でやってきているので採用しているだけであってサーバーを変える必要までなくこれから解説する施策をやってもらえば十二分です。
３. キャッシュを使用し静的ページに近づけ高速化
と言ってもちょっと意味がわからないかもしれません。そこでまずキャッシュを理解してもらうために静的ページというものを理解してもらう必要があります。
ウェブページは主に２種類しかありません。それが・・・
静的ページ・・・ドリームウィーバーやビルダーでサーバーにアップされたページ
動的ページ・・・WordPressやSNSなどシステムを介して表示されるページ
です。正確な定義は違うのですが、物凄くわかりやすく言うとこの２種類しかないのです。
静的ページは、HTML・CSSや画像などのファイルを作りサーバーに直接アップをするので管理側が再度アップしない限りは、そのまま表示されますが、動的ページというのは管理側とユーザー側の間にシステムが動かしています。
と覚えるとわかりやすいかなと思います。
銅像は全く動かないので消費エネルギーはゼロですが、人間は全く動かなないようにしようとしても呼吸とかしちゃうので全く動かないようにしても消費エネルギーはゼロではないのと同じようにWordPressはシステムを稼働している以上消費エネルギーがあるわけです。
つまり・・どうしても静的ページよりも動的ページのほうが明らかに重くなってしまうのです。
このイラストは動的ページと静的ページが表示されるまでの違いをわかりやすく図解にしていますが、ワードプレス（動的）のほうが１工程多いのがわかりますよね。
この１つの工程が重くさせる原因です。
そこで利用されるのがキャッシュです。
キャッシュというのは、一言で言ってしまえば過去閲覧したページをブラウザ側で保存する事でWEBページのデータを取り出すという工程を省いてくれるものです。
ちょっと違いますがわかりやすく言うと・・・
ちょっと違いますが・・こんな感じです。
もっと細かく言えば、
・ブラウザのキャッシュ
・ページキャッシュ（Word Press）
・オブジェクトキャッシュ（データベースとWordPressの間）
・DBキャッシュ（データベース）
があるのですが・・・。
例えば、このキャッシュを一週間に設定しておくと、一週間の間は一度閲覧したユーザーに関しては、WordPressなどのシステムからデータを出力しなくても一週間前のデータを引き継いで表示をしてくれるのです。
データ出力を毎回するのではなくユーザー側が閲覧した際に一時的に保存する。そして他のユーザーが閲覧をする際もブラウザ側で既に一時的保存されているので表示されるのが早くなるのです。
キャッシュができていないと一時的に保存されてない状態になるので、毎回ユーザーが閲覧しようとする度にデータを出力しなきゃいけないので、キャッシュを設定するのかしないのかで物凄い表示速度が変わってくるのです。
このキャッシュ機能を使った高速化の方法は主に２つあると言われています。
・キャッシュの設定をする。
・CDNサービスの利用
です。
3-1.キャッシュの設定をする。
これには２つの方法があって、プラグインでキャッシュを導入する方法とサーバー側でキャッシュの設定をする方法です。プラグインを導入するのは簡単ではるのですが、プラグインをいれることによって管理画面が重くなってしまいますし、プラグインの互換性を考えれば全力でオススメはできません。
プラグインで有名なのはW3 Total Cacheなどですが、ここでは上記のリスクを排除するサーバー側でキャッシュを設定する方法を紹介していきます。
まず、FTPソフトでワードプレスがインストールされているフォルダ内の.htaccessをダウンロードします。下記の例では、「ｗｐ」のフォルダ内にWord Pressをインストールしているので、
public_html/wp
の中にあります。これをデスクトップなどにダウンロードします。
ダウンロードが完了したら、.htaccessファイルをテキストエディタなどを開きます。
開いたら上のようなテキストが開きます。
ここに（上の画像で言うと１０列目）以下のタグを追加していきましょう。
<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css “access plus 15 days”
ExpiresByType image/gif “access plus 10 days”
ExpiresByType image/jpg “access plus 10 days”
ExpiresByType image/jpeg “access plus 10 days”
ExpiresByType image/png “access plus 10 days”
ExpiresByType application/x-javascript “access plus 10 days”
ExpiresByType text/x-javascript “access plus 1 month”
ExpiresByType application/javascript “access plus 1 month”
ExpiresByType application/x-javascript “access plus 1 month”
ExpiresByType text/js “access plus 1 month”
ExpiresByType text/javascript “access plus 1 month”
ExpiresByType application/x-shockwave-flash “access plus 1 month”
</ifModule>
これで、キャッシュを一時的に保存してくれるのでこれを再度ftpで元のフォルダにアップロードしていきましょう。これにて、キャッシュの設定をサーバー内でやってくれるようになります。
3-2.CDNを導入する
CDNというのは、キャッシュを自分だけのサーバーだけでなく複数のサーバーで所有してくれるコンテンツ・デリバリーネットワークサービスです。ユーザーがあなたのページにアクセスした際に、そのユーザーにとって最も距離が近いサーバーが応答してくれるシステムです。
これを使うことによってアクセスによるサーバー負荷を分散してくれます。
キャッシュを外部のサーバーが保存して応答してくれるので。他のサーバーを活用することによって自分のサーバーの負担は減るので自ずと高速化ができるようになるのです。
そして、このサービスを無料で開放してくれてるのが、
この2つはかなり有名です。Jetpackは日本語なので非常に扱いやすいですし、その他にも色んなサービスを無料でうけられるので個人向けにはJetPackはオススメかなと思います。
3-3. 画像の読み込み速度
WordPressに限らずWEBサイトは、この記事を見るだけでもわかるように表示をされるのは主に画像とテキストです。
そして、画像とテキストのどちらが表示速度に影響を与えるのか？といえば当然ですが画像です。例をあげると上の画像1枚はデータのサイズで言えばテキストにすると、約４万６千万文字と同等のサイズになるほど画像は重いのです。
つまり、画像が増えれば増えるほど表示速度に影響を与えるのです。
そうやって考えると動画は更に重いのがわかりますね。
テキストだけの記事ならば表示速度も早いのですが、画像を一切使わずテキストだけで記事を作ればいいのですが、テキストだけだとユーザーは読んではくれにくいのです。
＝結果的にユーザービリティーが低下してしまいます。
だから、伝わりやすくするために画像を使わない選択肢はないので、いかに画像を軽量化するのかが重要になってきます。
そのためにできる施策は主に2つあります。
1． 画像の質を下げずファイルサイズを圧縮する
2． 画像を読み込むのを後回しにする。
それぞれ解説をしていきましょう。
3-4.画像サイズを圧縮して表示速度を高速化する
画像のファイルサイズを軽くするために、最も簡単な方法は画像そのもののサイズ（大きさ）を小さくすることと、画質が最も悪いGIF形式の画像を使うというのが最も簡単な方法ですが、これをやってしまうと、細々とした画像しか使えなくなり、ビジュアル的に見栄えの悪いサイトになってしまいます。（基本的にGIF画像は、シンプルな色使いのロゴやイラストなどに使うのが吉）
だから、いかに画像のサイズではなく画質を低下させることなく保持をしながら、いかに画像のファイルサイズだけをを小さくするのか？がユーザビリティーと高速化を両立するためには非常に重要なポイントになってくるのです。
そこで、画質を落としすぎずファイルサイズを自動的に圧縮してくれるのが、EWWW Image Optimizerの設定方法と正しい２種の使い方とは？でも紹介している「EWWW Image Optimizer」のプラグインです。
このプラグインはこれまでアップロードした画像も一括で圧縮してくれるので非常に便利です。ただ、個人的に、徹底的に軽量化を考えるのならば、TinyPNGで画像をアップロードする前に圧縮をしたほうが圧縮率が高いので状況によって両方活用することをオススメします。
3-5.画像を読み込むのを後回しにする
検索結果などからWEBページを開いた時に基本的には上から順番に表示をされるようになっています。あなたも表示速度の遅いページを見たときに上はすぐに見れてもスクロールをすると真っ白！だという経験はないでしょうか？
これは、Webページは上から順番に表示をするようになっているからです。（正確に言えばソースコードの上からですが）
つまり、
→テキスト
→画像
→テキスト
→テキスト
→画像
→テキスト
のように上から順番に表示をされるのですが、なぜ真っ白になるのかというと途中に挟まれている画像を読み込むのに時間がかかってしまって画像下のテキストが表示されないという現象がおこっているからです。（特にユーザーの回線速度が遅いとおこりやすくい）
では、これを
テキスト全部を読み込んでから画像を上から順番に読み込む。
というように設定をすれば、、、どれだけ早いスピードでスクロールをされたとしても、テキストだけは閲覧をできるようにできるのです。先ほども言ったように画像はテキストの何百倍ものデータ容量が必要になるのでテキストを先に読み込ませてから画像を読み込ませれば、それだけでストレスなく閲覧できるようになるという理屈です。
そこで、使えるのが「LAZY load」というプラグインです。
このプラグインは、先ほど説明した画像の読み込みを後回しにしてくれるプラグインです。あと、有名なのが「BJ Lazy Load」というプラグインでこれは一気に画像を表示をするのではなくスクロールして開いたときに画像が表示されるプラグインです。
これを使えば高速化できる！と言いたいところですが、これは最初は高速化の効果はあるみたいでポイントもあがりましたが、後々速度が下がるというデータもあります。たぶん、キャッシュを設定しているからだと思いますが、最初に入れてアクセスが集まってきたら外したほうがいいかもしれません
４.ソースの内容と順序
このウェブサイトに関わらず、右クリックをして「ページのソースの表示」をすると上の画像のようにHTMLやCSSを理解していない人にとっては意味不明な暗号が並んでいるように見えるもののことをソースと言います。
WEBページを開く際にはこのソースを読み込まれて表示をされているのですが、このソースによって画像を読み込ませたりテキストやデザインレイアウトを表示しれくれているわけです。
で、画像は先ほど説明したので無視をしたとして表示速度に影響を与えるのはこのソースの中に主に2つあるのです。それが・・・
・CSS（スタイルシート）
・JavaＳcript（ジャバスクリプト）
です。CSSは主にWEBサイトのデザインのレイアウトやデザインを指定する際に使われるもので、JavaScriptというのはアニメーションを取り入れたりする時に使われるプログラムなんですが、これが非常に読み込み時間を遅らせてしまうのです。
だから、あまりアニメーション（JavaScript）が多いようなテンプレートは使わないほうがいいし、どれだけオシャレでデザイン的に優れているWordPressテンプレートであったとしても、そのデザインを使わないのならば使わないほうがいいのは確かですが・・・
現状のままでいくのならば、以下の2点を改善することで表示速度を早くすることができます。
・CSSとJavaScriptの圧縮
・ソースの記述方法を最適化する
それでは1つずつ解説し方法を紹介していきましょう。
4-1.CSSとJavaScriptの圧縮
あなた自身がCSSやJavaScriptをカスタマイズできるのならば、その記述方法は無駄がなくスマートなものなのでしょうか？と言われたときに必ずしもYESとは言えないでしょう
実際のところプロだからソースを美しく無駄なく表記しているのか？と言われたらそれは違います。
デザインの美しさとソースの美しさは別で、ソースの美しさはというのは無駄な表記をしないことで読み込みスピードを早くすることなのでこれはプロでも難しいです。
見た目の美しさとソースの美しさは別です。
ちょっとわかりにくい例かもしれませんが、下記の2つのHTMLのソースコードを見てみてください。
<html>
<head>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<div>
Hello, world!
</div>
</body>
</html>
<html><head><link rel=”stylesheet” href=”style.css”></head><body><div>Hello, world!</div></body></html>
これは、同じ意味なのですが、明らかにソースコードは後者のほうが少ないのがわかるはずです。つまり、当然ですが後者のほうが表示速度のが早くなるということですね。
このCSSやJavaScriptのソースコードの無駄を自動で圧縮し軽量化してくれるのがjavaScript/CSS/HTMLコンプレッサーです。
やり方は簡単です。
テンプレート内にあるCSSをコピーをしOnline JavaScript/CSS Compressorのサイトに貼り付けてるだけです。
あと、JavaScriptや管理画面で圧縮できないサーバーの中にあるCSSは
PageSpeedInsighsの改善項目（上の画像のように）の自分のドメインの項目をサーバー内からダウンロードし圧縮をすれば改善できるので同じ要領でやってもらえればいいかなと思います。
※PageSpeedInsighs内で実際に最適化したCSSとjavaScriptをダウンロードすることもできるので、ダウンロードしたファイルをそのままアップロードしてもいいでしょう。
4-2.ソースの記述方法を最適化する
先ほど、ソース内からCSSやJavaScriptを読み込んでいるというお話をしましたが、読み込む順序を変えることによっても速度を早くすることも可能です。
CSSはデザインやレイアウトを司るので先に読み込ませる必要があるのですが、JavaScriptは違います。
つまり、ソースの記述の順番を変えることによって早くすることができるのです。
ちょっとわかりにくいので下記を見てみてください。
と、見せても難しいかもしれませんが（汗）わかりやすく言えば
左側は、先にJavaScriptを読み込ませてからテキストを読み込ませている。
右側は、テキストで表示する都度、必要なところでJavaScriptを読み込ませている。
のです。つまり、表示してすぐにいきなり表示速度に影響を与えるJavaScriptを読み込ませるのではなくテキストををまずは表示し、JavaScriptを必要な場面で読み込ませるというプロセスを踏ませることで表示速度を早くしているのです。
ダメだ・・・わからない。
でも特に問題はないので、ようはこんな感じのことをして表示速度を早くすることができるということはなんとなく覚えておいてくれればいいです。これを自動でやってくれるのが「Head Cleaner」というプラグインです。
あと、自分でやる場合には先程の.htcaccrssに以下のタグを追加してもいいでしょう。
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _\.utxt$ no-gzip
#DeflateCompressionLevel 4
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
</IfModule><ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault “access plus 1 seconds”
ExpiresByType text/html “access plus 1 seconds”
ExpiresByType image/gif “access plus 2592000 seconds”
ExpiresByType image/jpeg “access plus 2592000 seconds”
ExpiresByType image/png “access plus 2592000 seconds”
ExpiresByType image/x-icon “access plus 2592000 seconds”
ExpiresByType text/css “access plus 604800 seconds”
ExpiresByType text/javascript “access plus 216000 seconds”
ExpiresByType application/x-javascript “access plus 216000 seconds”
ExpiresByType application/x-shockwave-flash “access plus 216000 seconds”
</ifModule>FileETag none
<FilesMatch “^(wp-config\.php|wp-mail\.php|install\.php|\.ht)”>
order allow,deny
deny from all
</FilesMatch># BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !\.(html?|xml|xsl|js|css|jpe?g|png|gif|ico)$
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
これは、テキストファイルを圧縮して転送をする際に使えるタグでコンテンツのキャッシュの設定も両方行ったプラグインにも勝るとも劣らない設定なのでやっておくといいでしょう。
※ただ、当然ですがCSSやJavaScriptの記述が最初から最適化されているテンプレートを使っているのならば導入しても意味はないので使ってみても速度のポイントにまったく影響がないのであるのならば削除してください。
高速化より大切な事
さて、いかがでしたでしょうか？主に3つの高速化の施策について解説をしてきましたが、冒頭でも言っていますが高速化はSEOに影響をあたえるのではなく、あくまでユーザビリティーに影響を与えるものです。
例えば、ネット環境がまだ整い切れていない地域や環境の人からすれば100点をとることは重要かもしれません・・・しかし、ネット環境がこれほど整っている現在、、そこまで考えなくてもいいのではないか？とも思うわけです。
高速化ばかりに目がいって本質を見失ってはいけません。
重要なのはあくまでユーザーにとって価値あるコンテンツを発信すること。
そのためには高速化を捨てなければいけないこともあるはずです。
ここで紹介したのはあくまで僕自身がやったことであり、他にもアドセンスを表示しないとかSNSのボタンを自作するなど色々できることはありますから、あなたの目的に応じて速度を調整してもらえればいいと思います。
SEOに全く影響を与えないとは言い切れませんが、少なからず40点程度でも100万pvを達成しているので、あまり重く考えすぎないようにしたほうがいいでしょう。
