アフィリエイターへ転職!?【第37話】『WordPress高速化』【チューニング方法の全て】新聞社のように速く!

アフィリエイターへ転職!?【第37話】『WordPress高速化』【チューニング方法の全て】新聞社のように速く!

WordPressの高速化はコツが要ります。

分かってしまえば簡単ですが、初心者がやるとだいぶ痛い目にあいます。

私も一度キャッシュプラグインで長期間、レイアウト崩れして本文が全く読めない状態を読者に提供していたことがあります。

その後、それがトラウマとなり数か月間、キャッシュなどのこざかしい真似は一切使いませんでした。

すると、

DBのテーブルのレコードがおそらく10万件弱くらいに増えたころでしょうか。。

1ページを表示するのに20秒かかるじゃないですか!?

これではさすがに駄目だろうと自覚しました。

しかし、検索してもX-Serverに乗り換えろとしか答えは見つかりません。

引っ越しはどうしてもやりたくないのです。どうしてもっていうなら考えましたが、本当にダメなら引っ越そうと思いました。

まずはやれるだけやりましょう。

個人的にパフォーマンスチューニングって大好きなジャンルですから!

どうしよう。。。

ライバルも速くなっちゃう!!!

これからは100%レスポンスが検索順位上位に表示されるために必要です。せっかくライバルを落とせるのに。。

自分の首を絞めていないか??

ということもあるのですが、まあいいです。みんなが速くなってもこの記事が有名になれば私も公開したかいがあるというものです。

普通の人は記事数が数百で記事テーブルは1000レコード程度!

『DBのテーブルのレコードがおそらく10万件弱』と書いていますが、これは普通じゃありません。このサイトではありません。このサイトは数千件レコード程度です。

10万レコードはかなりおかしいです。どんなに多い人でも1万程度です。これがポイントです。

とくにブログ始めたばかりの人、1年目のブログなどは数百記事で収まるのでほとんど高速化チューニングなんて必要ありません。

WPのキャッシュプラグインも必要ないかもしれません。

まず、自分のサイトを測定してみましょう!

Google提供の『モバイルサイトの速度をテストしましょう。』というサイトがありますのでそこに入れてみてください。TOPページでもいいですし、遅いページ、速いページ、のちのち測定するといいです。

秒単位なので四捨五入、切り上げかもしれませんが、鬼教官のようなアドバイスなのと、とにかく現実を知るとビビります。

例えば、このサイトの以下のページです。『https://ranking.kogetspace.com/%E3%82%A2%E3%83%95%E3%82%A3%E3%83%AA%E3%82%A8%E3%82%A4%E3%82%BF%E3%83%BC%E3%81%B8%E8%BB%A2%E8%81%B7%EF%BC%81%EF%BC%9F%E3%80%90%E7%AC%AC%EF%BC%93%EF%BC%96%E8%A9%B1%E3%80%912018%E5%B9%B48%E6%9C%881/

『えっ?5秒もかかるの?ウソだよ!!!』

と呟きます。

PCにおいて、ブラウザキャッシュがある場合は実測値で2.8秒です。

ブラウザキャッシュなしでの計測時間を表示しているようです。

実測でブラウザキャッシュをなくすと5秒~6秒でした。これがまぎれもない現実です。

でも、このサイト完全AMP化しています。スタンドアロンAMPサイトという状態です。

この恩恵はないのか?と言いますと、

GoogleテスターはスマホのMoto G4 端末を使って 3G ネットワーク環境で測定をシュミレーションしているようですが、AMPのメリットは反映されていないようです。

Moto G4のスペック

オペレーティングシステム
Android™ 6.0.1、Marshmallowプロセッサー
Qualcomm® Snapdragon 617 (MSM8952) 1.5 GHz オクタコア CPU Adreno 405、550 MHz GPUメモリ (RAM)
3 GB

実機(ファーウェイ Honor 8)でのブラウザキャッシュをクリアしたあとの実測値は3.2秒でした。

ブラウザキャッシュがあると、0.?秒ですが速すぎて計測できません。おそらく、0.2秒くらいだと思います。

PCのChromeブラウザ スマホのChromeブラウザ
5秒強 3.2秒

AMPコードで記述されたページの場合、PCよりもスマホのブラウザの方が速く表示されるようです。

これは非常に重要なことです!

もちろん、検索結果に表示されているGoogleサーバーにキャッシュされているページではありません。自分のレンタルサーバーにあるページを読んでいるときの結果です。

Google神はもっと速くしろ!と言っています。

これを見ると、『私のページは5秒で、同じジャンルの上位サイトも5秒くらいだ』と言っています。

他のジャンルは4.1秒というのがありました。ニュースジャンルでした。納得です。新聞社など全力で力を入れているところです。

そして、、

『もっと行けるよ!君なら3秒以内まで行けるよ!』

とおっしゃられています。

もう、無茶言うなよっていう感じです。

しかし、

表示に5秒かかると離脱率が19%もある!

というデータがあるんですから、ほんとに勿体ないわけです。

逆に言うと、

そんな勿体ないサイトに検索上位なんかやらんぞ!

と言われているようにも思えます。

これが3秒以内だと0%だというんですから無理を言ってくるのです。

私だって2割のユーザーがページが遅いって離脱してたらたまったもんじゃありません。

でもスマホで見る人がほとんどで、スマホで見ると3秒程度になっているのでこのサイトは『合格』としたいと思います。

ただ、逆に言うと、WordPressを使っている限りはこれが限界だと思います。

DBに入っている記事数を200記事くらいに減らすことで高速化できます。ちなみに10記事程度だと実機スマホで1~2秒で表示が完了します。鬼教官のGoogleテスターのPCでも4秒(離脱率10%)という結果でした。

ちなみにAMP化も速く対応し最も効率化が進んで最も速いと思われる新聞社のサイトの代表格の朝日新聞社様の結果は、

『7秒!?』

ライバルを追いかけ続けているうちに、、

日本はこういう現状です。

さて、おまちかねの

WordPress高速化手順!何をやったか?

  1. WordPressのキャッシュプラグイン
  2. SSL化(WordPressのプラグイン)
  3. AMP化(WordPressのプラグイン)
  4. CDN(レンタルサーバーのサービス)

たったこれだけです。

これで20秒かかっていたページがスマホで3秒となりました。

この中でポイントは1の『WordPressのキャッシュプラグイン』です。

CDNはアクセスが集中しないとあまり意味ありません。

2と3はどれでも似たようなものです。

結局は『WordPressのキャッシュプラグイン』です。

使ったのは『WP Fastest Cache』です。ほかのプラグインでは遅いのです!これが一番速いのです!

昔、挫折したのもこの『WP Fastest Cache』のおかげでした。

恨みを晴らすために、、

『WP Fastest Cache』の高速化の設定方法

前提:WPのテーマはレスポンシブのもので、スマホでも同じテーマが表示されること!!

最高速を目指す場合は以上のように設定します。

  • 『モバイルユーザーに対してキャッシュを表示しない』というのは、レスポンシブ対応テーマの場合は1つのテーマをPCとスマホで見ていますのでチェックを外さないといけません!
  • 注意するのは『Preload』で『Restart After Completed』をチェックしないことです。
  • キャッシュの有効期限は3日やもっと長くていいです。
  • 『新しい投稿』というところも全部のキャッシュを消さないようにしたほうが速い状態が続きます。
  • プラグインの追加やメニューなどを変更した場合は手動ボタンで全部のキャッシュを削除します。

また、サーバー上のトップディレクトリ(フォルダ)の.htaccessファイルに以下を追記してブラウザのキャッシュの設定をします。

<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 20 minutes"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType text/css "access plus 20 minutes"
ExpiresByType text/javascript "access plus 20 minutes"
ExpiresByType image/gif "access plus 20 minutes"
ExpiresByType image/jpeg "access plus 20 minutes"
ExpiresByType image/png "access plus 20 minutes"
ExpiresByType image/x-icon "access plus 20 minutes"
ExpiresByType application/pdf "access plus 20 minutes"
ExpiresByType application/javascript "access plus 20 minutes"
ExpiresByType application/x-javascript "access plus 20 minutes"
ExpiresByType application/x-shockwave-flash "access plus 20 minutes"
ExpiresByType video/ogg "access plus 20 minutes"
ExpiresByType video/mp4 "access plus 20 minutes"
ExpiresByType video/webm "access plus 20 minutes"
</ifModule>

20 minutesは3 daysやもっと長くても構いませんが、長いと閲覧者のブラウザにいつまでも古いままのページが残ってしまい反映されないので私はあまり長くしていません。

レイアウト崩れが出たら

  • CSSを結合
  • Javascriptを結合
  • CSSを圧縮
  • HTMLを圧縮

の順にチェックを外していって治るか様子を見てください!

目指せ!3秒!

ちなみに、レンタルサーバーはX-Serverが楽で確実ですが、絶対ではないです。慣れている方は他のレンタルサーバーでもそれなりに高速化できます。私はX-Serverではありません。

This post was last modified on September 8, 2018, 11:17 pm

osusume

Share
Published by
osusume

『秘密のランキングサイト』

運営者情報お問い合わせ

All Rights Reserved.