集め検索CLOSEProfileARIEL数々のプロモーションを企画し5億を売上てきましたが修業期間を終え、現在WEBコンサルなどをやっています。このブログではありとあらゆるWEBマーケティングの情報をお届けし個人が自由な人生を創造できるようになれるコンテンツをお届けします。Pressをインストールして使っていると、ユーザー視点から見た場合サイトの表示速度が遅くなってしまってしまう可能性があります。SEOに関連するコンテンツを発信しているサイトなどでは表示速度の高速化=SEOの評価とも言われてもいます。実はそうではないのですが・・・ただ、少なからずスマホユーザーも増えた現在、表示速度は遅いよりも早いほうがいいです。実際、下記のデータはワードプレスを導入したままの「デフォルトの状態VSこれから紹介する施策した状態」の表示速度を計測したものですが、モバイルで35ポイント・PCで48ポイント高速化できたのがわかります。Insights「え?100点じゃないじゃん!」と思われるかもしれませんが、テストの点数で考えれば100点やA判定が理想のように思えますが、ウェブマーケティングの観点から見れば逆にデメリットがあるのです。ここでは、その理由を含め初心者でもできるWordPressの高速化の仕方に関してステップバイステップで解説をしていこうと思います。高速化より大切な事1.理想的なサイト表示速度はどれくらいなのか?Googleではユーザービリティーを考えた上でサイトの表示速度は速いほうがいいという主張をしていますが、だからと言って表示速度が早ければ上位表示の評価とするとまでは言っていません。Lewis氏は「デスクトップで90点以上、モバイルで85点以上が好ましい」と発言してはいますから、「高速化が大事だ!」と思われるのはわからないでもありません。高速化を図ればいいのか?と言われたらそれは違うと思います。実際高速化をするためにめには、先ほども言ったようにキャッシュ・画像の読み込み・ソースの軽量化の3つが必要です。これを極限までやろうとすれば、シンプルで画像もなくSNSなどの外部と連携している機能をできるだけ断つ。それに、よくWordPressの高速化の方法を解説している100万PVを達成しているブロガーさんとかもいますが、彼らのブログの速度自体が40点以下だったりすることを考えるとSEOに影響を及ぼすわけではないのです。Consoleのページのダウンロード時間(ミリ秒)の数値です。いって高速化が必要ない!というわけではなく、ユーザビリティーを考えればある程度は必要です。表示されないとイライラしちゃいますし戻るとか×ボタンを押されてしまいかねませんからね。ユーザビリティーを考えた上である程度のデザインを保持した上で表示速度を遅くしすぎないように高速化を図る。・基本60点以上を確保をする。ベストだと考えていますし、実際に個別コンサルで相談された時にもこのようにアドバイスをしています。これからあなたにお話ししていく高速化の手法は全てをやらなくてもいいということは覚えておいてください。Insightsで「最も画像など力をいれた投稿記事」で計測するのが望ましいです。トップページなどを上位表示させたい場合にはトップページでいいのですが、大体の場合、記事そのものにアクセスを呼び込むはずなので最も力を入れた記事で計測をしておけば、それ以下のポイントになることはテンプレートそのものを変えない限りはなくなるからです。2.高速化するためにすべき3項目まず、高速化をするにしても何がWEBページの表示速度に影響を与えているのかを知らなければ何もできません。何が表示速度に影響を与えているのか?は主に以下の3つです。・キャッシュ・ソースの内容と順序もちろん、これらを表示をする為に必要なサーバーも重要なのかもしれませんが、こればっかりは自分自身でどうにかできる事ではないので抜きにすると、この3つの項目を修正を加えれば高速化ができます。1つずつ説明していきましょう。※サーバーによって速度は変わるのか?僕の場合はサーバーは、エックスサーバーを活用していますが、レンタルサーバー会社によって速度が変わるか?というと最新技術を取り入れればちょっとした差が出ますが、レンタルサーバー会社も競争が激しいのでどこを選んでも最終的には変わらないと思います。(アマゾンなどの大手のサーバーなどは膨大な容量を表示させるだけのスペックがありますが・・・)個人的にはエックスサーバーは常に最新技術の提供を低価格or無料でやってきているので採用しているだけであってサーバーを変える必要までなくこれから解説する施策をやってもらえば十二分です。キャッシュを使用し静的ページに近づけ高速化と言ってもちょっと意味がわからないかもしれません。そこでまずキャッシュを理解してもらうために静的ページというものを理解してもらう必要があります。ウェブページは主に2種類しかありません。静的ページ・・・ドリームウィーバーやビルダーでサーバーにアップされたページ動的ページ・・・WordPressやSNSなどシステムを介して表示されるページです。正確な定義は違うのですが、物凄くわかりやすく言うとこの2種類しかないのです。静的ページは、HTML・CSSや画像などのファイルを作りサーバーに直接アップをするので管理側が再度アップしない限りは、そのまま表示されますが、動的ページというのは管理側とユーザー側の間にシステムが動かしています。覚えるとわかりやすいかなと思います。銅像は全く動かないので消費エネルギーはゼロですが、人間は全く動かなないようにしようとしても呼吸とかしちゃうので全く動かないようにしても消費エネルギーはゼロではないのと同じようにWordPressはシステムを稼働している以上消費エネルギーがあるわけです。・・どうしても静的ページよりも動的ページのほうが明らかに重くなってしまうのです。このイラストは動的ページと静的ページが表示されるまでの違いをわかりやすく図解にしていますが、ワードプレス(動的)のほうが1工程多いのがわかりますよね。この1つの工程が重くさせる原因です。そこで利用されるのがキャッシュです。キャッシュというのは、一言で言ってしまえば過去閲覧したページをブラウザ側で保存する事でWEBページのデータを取り出すという工程を省いてくれるものです。違いますがわかりやすく言うと・・・ちょっと違いますが・・こんな感じです。Press)・オブジェクトキャッシュ(データベースとWordPressの間)・DBキャッシュ(データベース)があるのですが・・・。このキャッシュを一週間に設定しておくと、一週間の間は一度閲覧したユーザーに関しては、WordPressなどのシステムからデータを出力しなくても一週間前のデータを引き継いで表示をしてくれるのです。データ出力を毎回するのではなくユーザー側が閲覧した際に一時的に保存する。他のユーザーが閲覧をする際もブラウザ側で既に一時的保存されているので表示されるのが早くなるのです。キャッシュができていないと一時的に保存されてない状態になるので、毎回ユーザーが閲覧しようとする度にデータを出力しなきゃいけないので、キャッシュを設定するのかしないのかで物凄い表示速度が変わってくるのです。このキャッシュ機能を使った高速化の方法は主に2つあると言われています。・キャッシュの設定をする。・CDNサービスの利用です。3-1.キャッシュの設定をする。これには2つの方法があって、プラグインでキャッシュを導入する方法とサーバー側でキャッシュの設定をする方法です。プラグインを導入するのは簡単ではるのですが、プラグインをいれることによって管理画面が重くなってしまいますし、プラグインの互換性を考えれば全力でオススメはできません。Cacheなどですが、ここでは上記のリスクを排除するサーバー側でキャッシュを設定する方法を紹介していきます。FTPソフトでワードプレスがインストールされているフォルダ内の.htaccessをダウンロードします。Pressをインストールしているので、public_html/wpの中にあります。これをデスクトップなどにダウンロードします。ダウンロードが完了したら、.htaccessファイルをテキストエディタなどを開きます。開いたら上のようなテキストが開きます。ここに(上の画像で言うと10列目)以下のタグを追加していきましょう。month”</ifModule>これで、キャッシュを一時的に保存してくれるのでこれを再度ftpで元のフォルダにアップロードしていきましょう。これにて、キャッシュの設定をサーバー内でやってくれるようになります。3-2.CDNを導入するCDNというのは、キャッシュを自分だけのサーバーだけでなく複数のサーバーで所有してくれるコンテンツ・デリバリーネットワークサービスです。ユーザーがあなたのページにアクセスした際に、そのユーザーにとって最も距離が近いサーバーが応答してくれるシステムです。これを使うことによってアクセスによるサーバー負荷を分散してくれます。キャッシュを外部のサーバーが保存して応答してくれるので。他のサーバーを活用することによって自分のサーバーの負担は減るので自ずと高速化ができるようになるのです。・Cloundflare・JetPackこの2つはかなり有名です。Jetpackは日本語なので非常に扱いやすいですし、その他にも色んなサービスを無料でうけられるので個人向けにはJetPackはオススメかなと思います。画像の読み込み速度WordPressに限らずWEBサイトは、この記事を見るだけでもわかるように表示をされるのは主に画像とテキストです。画像とテキストのどちらが表示速度に影響を与えるのか?といえば当然ですが画像です。例をあげると上の画像1枚はデータのサイズで言えばテキストにすると、約4万6千万文字と同等のサイズになるほど画像は重いのです。画像が増えれば増えるほど表示速度に影響を与えるのです。やって考えると動画は更に重いのがわかりますね。テキストだけの記事ならば表示速度も早いのですが、画像を一切使わずテキストだけで記事を作ればいいのですが、テキストだけだとユーザーは読んではくれにくいのです。=結果的にユーザービリティーが低下してしまいます。伝わりやすくするために画像を使わない選択肢はないので、いかに画像を軽量化するのかが重要になってきます。そのためにできる施策は主に2つあります。画像を読み込むのを後回しにする。それぞれ解説をしていきましょう。3-4.画像サイズを圧縮して表示速度を高速化する画像のファイルサイズを軽くするために、最も簡単な方法は画像そのもののサイズ(大きさ)を小さくすることと、画質が最も悪いGIF形式の画像を使うというのが最も簡単な方法ですが、これをやってしまうと、細々とした画像しか使えなくなり、ビジュアル的に見栄えの悪いサイトになってしまいます。(基本的にGIF画像は、シンプルな色使いのロゴやイラストなどに使うのが吉)だから、いかに画像のサイズではなく画質を低下させることなく保持をしながら、いかに画像のファイルサイズだけをを小さくするのか?がユーザビリティーと高速化を両立するためには非常に重要なポイントになってくるのです。Optimizer」のプラグインです。このプラグインはこれまでアップロードした画像も一括で圧縮してくれるので非常に便利です。個人的に、徹底的に軽量化を考えるのならば、TinyPNGで画像をアップロードする前に圧縮をしたほうが圧縮率が高いので状況によって両方活用することをオススメします。3-5.画像を読み込むのを後回しにする検索結果などからWEBページを開いた時に基本的には上から順番に表示をされるようになっています。あなたも表示速度の遅いページを見たときに上はすぐに見れてもスクロールをすると真っ白!だという経験はないでしょうか?これは、Webページは上から順番に表示をするようになっているからです。→テキストのように上から順番に表示をされるのですが、なぜ真っ白になるのかというと途中に挟まれている画像を読み込むのに時間がかかってしまって画像下のテキストが表示されないという現象がおこっているからです。(特にユーザーの回線速度が遅いとおこりやすくい)では、これをテキスト全部を読み込んでから画像を上から順番に読み込む。いうように設定をすれば、、、どれだけ早いスピードでスクロールをされたとしても、テキストだけは閲覧をできるようにできるのです。先ほども言ったように画像はテキストの何百倍ものデータ容量が必要になるのでテキストを先に読み込ませてから画像を読み込ませれば、それだけでストレスなく閲覧できるようになるという理屈です。load」というプラグインです。このプラグインは、先ほど説明した画像の読み込みを後回しにしてくれるプラグインです。Load」というプラグインでこれは一気に画像を表示をするのではなくスクロールして開いたときに画像が表示されるプラグインです。これを使えば高速化できる!と言いたいところですが、これは最初は高速化の効果はあるみたいでポイントもあがりましたが、後々速度が下がるというデータもあります。キャッシュを設定しているからだと思いますが、最初に入れてアクセスが集まってきたら外したほうがいいかもしれません4.ソースの内容と順序このウェブサイトに関わらず、右クリックをして「ページのソースの表示」をすると上の画像のようにHTMLやCSSを理解していない人にとっては意味不明な暗号が並んでいるように見えるもののことをソースと言います。WEBページを開く際にはこのソースを読み込まれて表示をされているのですが、このソースによって画像を読み込ませたりテキストやデザインレイアウトを表示しれくれているわけです。画像は先ほど説明したので無視をしたとして表示速度に影響を与えるのはこのソースの中に主に2つあるのです。・CSS(スタイルシート)・JavaScript(ジャバスクリプト)です。CSSは主にWEBサイトのデザインのレイアウトやデザインを指定する際に使われるもので、JavaScriptというのはアニメーションを取り入れたりする時に使われるプログラムなんですが、これが非常に読み込み時間を遅らせてしまうのです。現状のままでいくのならば、以下の2点を改善することで表示速度を早くすることができます。・ソースの記述方法を最適化するそれでは1つずつ解説し方法を紹介していきましょう。4-1.CSSとJavaScriptの圧縮あなた自身がCSSやJavaScriptをカスタマイズできるのならば、その記述方法は無駄がなくスマートなものなのでしょうか?と言われたときに必ずしもYESとは言えないでしょう実際のところプロだからソースを美しく無駄なく表記しているのか?と言われたらそれは違います。デザインの美しさとソースの美しさは別で、ソースの美しさはというのは無駄な表記をしないことで読み込みスピードを早くすることなのでこれはプロでも難しいです。見た目の美しさとソースの美しさは別です。わかりにくい例かもしれませんが、下記の2つのHTMLのソースコードを見てみてください。world!</div></body></html>これは、同じ意味なのですが、明らかにソースコードは後者のほうが少ないのがわかるはずです。当然ですが後者のほうが表示速度のが早くなるということですね。このCSSやJavaScriptのソースコードの無駄を自動で圧縮し軽量化してくれるのがjavaScript/CSS/HTMLコンプレッサーです。Compressorのサイトに貼り付けてるだけです。あと、JavaScriptや管理画面で圧縮できないサーバーの中にあるCSSはPageSpeedInsighsの改善項目(上の画像のように)の自分のドメインの項目をサーバー内からダウンロードし圧縮をすれば改善できるので同じ要領でやってもらえればいいかなと思います。※PageSpeedInsighs内で実際に最適化したCSSとjavaScriptをダウンロードすることもできるので、ダウンロードしたファイルをそのままアップロードしてもいいでしょう。4-2.ソースの記述方法を最適化する先ほど、ソース内からCSSやJavaScriptを読み込んでいるというお話をしましたが、読み込む順序を変えることによっても速度を早くすることも可能です。CSSはデザインやレイアウトを司るので先に読み込ませる必要があるのですが、JavaScriptは違います。ソースの記述の順番を変えることによって早くすることができるのです。わかりにくいので下記を見てみてください。見せても難しいかもしれませんが(汗)わかりやすく言えば左側は、先にJavaScriptを読み込ませてからテキストを読み込ませている。右側は、テキストで表示する都度、必要なところでJavaScriptを読み込ませている。表示してすぐにいきなり表示速度に影響を与えるJavaScriptを読み込ませるのではなくテキストををまずは表示し、JavaScriptを必要な場面で読み込ませるというプロセスを踏ませることで表示速度を早くしているのです。ダメだ・・・わからない。問題はないので、ようはこんな感じのことをして表示速度を早くすることができるということはなんとなく覚えておいてくれればいいです。Cleaner」というプラグインです。あと、自分でやる場合には先程の.htcaccrssに以下のタグを追加してもいいでしょう。[L]</IfModule>これは、テキストファイルを圧縮して転送をする際に使えるタグでコンテンツのキャッシュの設定も両方行ったプラグインにも勝るとも劣らない設定なのでやっておくといいでしょう。※ただ、当然ですがCSSやJavaScriptの記述が最初から最適化されているテンプレートを使っているのならば導入しても意味はないので使ってみても速度のポイントにまったく影響がないのであるのならば削除してください。高速化より大切な事さて、いかがでしたでしょうか?主に3つの高速化の施策について解説をしてきましたが、冒頭でも言っていますが高速化はSEOに影響をあたえるのではなく、あくまでユーザビリティーに影響を与えるものです。ネット環境がまだ整い切れていない地域や環境の人からすれば100点をとることは重要かもしれません・・・しかし、ネット環境がこれほど整っている現在、、そこまで考えなくてもいいのではないか?とも思うわけです。高速化ばかりに目がいって本質を見失ってはいけません。重要なのはあくまでユーザーにとって価値あるコンテンツを発信すること。そのためには高速化を捨てなければいけないこともあるはずです。ここで紹介したのはあくまで僕自身がやったことであり、他にもアドセンスを表示しないとかSNSのボタンを自作するなど色々できることはありますから、あなたの目的に応じて速度を調整してもらえればいいと思います。SEOに全く影響を与えないとは言い切れませんが、少なからず40点程度でも100万pvを達成しているので、あまり重く考えすぎないようにしたほうがいいでしょう。ウェブ-.ホームシェアメニュープロフTOPへ。