WordPressサイトは、コンテンツが増えていくたびに、アクセスが増えるたびに、どんどん重くなっていきます。
最初のうちは快適でいいサイトになったと思っているのですが、人気が出てくるとどんどん重くなっていくのです。
また、WordPressのデザインテーマは構造が複雑で、Googleが納得できるような遅延読み込みなどを容易に導入できないものがおおいのです。でも、気に入ったデザインで運用したい。。。
今回はたった3つのプラグインでかなりサイトを最適化＆高速化できるので、ご紹介したいと思います。また、他にも役立ちそうなプラグインもご紹介させていただきます。
もくじ
キャッシュ・遅延読み込み設定-Autoptimize
これ1つでJavascriptやCSS、画像の遅延読み込み設定が可能！ブラウザキャッシュまだ管理できます！
最近のGoogleさんは、表示速度にかなりこだわりがあります。
例えば読み込み時間が3秒のWEBページが2つあったとします。
同じ読み込み時間ですから、この時点では評価は同じなのですが、何を先に読み込んでいるのかで、評価点の付け方が変わってくるのです。
先にテキストが読めるページを高評価とする
Javascriptや画像、CSSなどのデザイン設定より先に、HTML本文、いわゆるテキスト部分を先にロードして読める状態になるサイトを評価点としては高くつけます。
逆に考えれば、Javascript、CSS、画像を後で読み込ませる、いわゆる遅延読み込みをさせることで、Googleは、そうではないページより評価をするということです。
実際どうすればいいのかというと、基本的にブラウザというのはテキスト分を上から下に呼んでいくので、JavascriptやCSSのロードをソースの後方に記載すればいいのです。
画像はそう簡単ではありませんが、HTMLヘッダに画像の遅延読み込みのコードを書けば後回しでロードしてくれるように設定が可能です。
しかしながらデザインテーマを自分で作ったのならまだしも、ほとんどの方はテーマはダウンロードしたか、有償のテーマを買ってきたものを使っていると思います。
そうなると、そう簡単にJavascriptの位置をずらすなどできません。
また、そのような場合、手動でいじったとしてもテーマがアップデートされるとまた元に戻ってしまうでしょう。
なので、現実的には遅延読み込みは不可能に近いのです。
遅延読み込みをプラグイン1つで設定可能!
しかし、WordPressのいいところは様々なプラグインが用意されているところです。
今回はAutoptimizeというプラグインを導入することで、遅延読み込みを現状のテーマでかつ、テーマのソースをいじることなく実現できます。
こちらのプラグインをインストールし有効にしたら設定画面に行きます。
まずは、Javascriptオプション。
ここはコードの最適化にチェックを入れることと、JSファイルを連結するのチェックは外すことがほとんどの場合重要になります。
最適化にチェックを入れないと遅延読み込みをしてくれませんので、必須です。
その下のJSファイルを連結するというのは、該当ページでJavascriptのコードが記載されている外部ファイルをロードしようとしている場合で、そのロードする予定のJavascript外部ファイルが複数ある場合に、すべてをまとめて一つのJSファイルにしてしまうというオプションです。
JSファイルについてはテーマのみならずプラグインなどでもJSファイルをロードさせるようになっていたりするのでWordpressの基本的なテーマやプラグインの場合かなりの量のJSファイルになります。
その記述量も膨大になり、纏めた一つのJSファイルのファイル容量が異常に大きくなります。
その大きくなったファイルを遅延させるとはいえダウンロードさせるのは相当時間がかかります。
なので、基本的にはチェックを外すことで高速化が測れる場合が多いです。
次はCSSオプションです。
こちらも同様に最適かチェックと、連結チェックを外すことでCSSの読み込みファイルを遅延読み込み設定としてくれます。
その次はHTMLおぷしょんです。
HTMLコードの最適化にチェックを入れておきましょう。
これで、必要な順番に並べ替えながら最適なHTMLの書き出しに整形してくれるはずです。
そしてこのページの最後がその他オプションです。
こちらは最後のログイン状態の・・・という項目のチェックを外しておくことです。
これは、当WordPressにログインしている場合はこのAutoptimizeの設定から外して表示となります。
ようは、自分がログインしているときのデータはキャッシュも残さなくていいし、ページの編集などの際にも遅延読み込みをしないので編集時に不都合が起きなくなります。
そして次は画像タブです。
こちらは、画像の遅延読み込み (Lazy-load) を利用だけにチェックです。
最適化のほうは次に説明するWebPExpressで行います。
遅延読み込みにチェックを入れることで画像のロードはHTMLテキストをすべて読み込んでから表示となります。
実際こちらにチェックを入れると、データ量の多いページなどでは、テキスト分が先に読み込まれ少ししてから画像が表示されるような動きになります。
画像を無償でWebp化！WebPExpress
最近WEBサイトの最適化の集大成として画像のWebP化が主流となってきています。
その画像のWebPかを無償で手助けしてくれてなおかつページでのWebp化も助けてくれる便利なプラグインです。
現在WEBでは、画像はWebPといわれる形式にすることで最適化が図れるといわれる時代になりました。
非対応のブラウザなどもありますので、一方的にwebp形式のみの画像配信というわけにもいきません。
対応ブラウザならWebp、非対応ブラウザなら従来通りのjpgやpng形式のまま配信というのが望ましいとされています。
Webp形式にすると、画像自身のファイルサイズが半分程度まで小さくなると言われていまして、形式を変更するだけでそれだけパケット通信量を削減できるので、表示速度の向上と、パケット通信料の低減を目指せるわけです。
プラグインをインストールして有効化したら設定画面に行きます
まずこの、Conversion methodという項目ですが、どれか一つでいいので、緑色のチェックが無いと使えません。
一個も無い場合はサーバー管理者さんにお願いして導入してもらうしかありません。
WEBサーバーがnginxの場合
WEBサーバーがNginxの方の場合、丈夫にnginxの方はこのディレクティブを追加してねというのがありますので、その記述をまずnginxのディレクティブ設定に記載します。
（このあたりがわからない方はわかる方に対応してもらってください。）
ディレクティブを記載したら上記画像のBulkConvertというボタンをクリックします。
そうするとポップアップで○件のコンバートファイルがあるというのが出てくるのでボタンを押すと、webp画像の書き出しが始まります。
WEBサーバーがApacheの場合
apacheがWEBサーバーの場合は特にコンバート周りの設定やディレクティブの設定を行わなくても大丈夫です。
自動的に.htaccessに書きだししてくれているので大丈夫です。
そして、最後にAlterHTML?のチェックを入れます。
これにて、画像のWebp化が完了します。
あとは、このプラグインが自動的にwebp画像への差し替えと、非対応ブラウザの場合従来のjpg・png画像の表示を設定してくれる状態になります。
AMP化で、最速表示！Accelerated Mobile Pages
モバイルページをAMP化！Googleで最高評価を受けることができるかも？Accelerated Mobile Pages
スマホでサイトを閲覧した場合、どのような表示になっているのかというのも重要なのです。
ついこの前まではレスポンシブデザイン化されていれば、Googleはモバイルファーストインデックスということで多少優遇されていました。
今は、その一歩先を行くようになり、通信量の削減を意識してAMP（Accelerated Mobile Pages）化してあるサイトをさらに優遇するようになりました。
AMPは、Googleが提唱する規格に沿って作られているページであれば認識されます。
また、WordPressには、Googleが公式に提供しているAMP化用のプラグインがありますのでそちらでもOKですが、広告掲載やURLファイルパスなどの絡みから、私は公式のプラグインより、
Accelerated Mobile Pagesという名前のプラグインの方を好んで使っています。
設定については人によって違うので細かい設定は今回説明いたしませんがプラグインをインストールして有効化するだけで基本的にはAMP化されます。
AMPページのアドレスは、各URLの末尾に/ampを付け足してあげるとAMPページが表示されます。
こちらのプラグインでは、AMP化するページ（投稿記事だけ・固定ページ・アーカイブページなど、どのパーツをAMP化するか）の設定から、モバイルでアクセスがあったときに自動的にAMPページへリダイレクトするかどうかの設定、広告の配信箇所の設定などが設定可能です。
また、個別のページで、AMP化する・しないの設定やリダイレクトする・しないの設定、また、こちらは究極ですが、AMPページのページ内容と非AMPページのページ内容を変えて編集することも可能です。
難しいことを考えずONにするだけでAMP化されますし、自分で詳細を設定することで臨んだような動きを作ることができます。
私の場合、ごく普通の記事は字と画像の集合体なのでAMP化することは何ら問題はないのですが、その記事の中でグラフを描く際にはJavascriptを使ってグラフを描画しています。
AMPページというのは基本的にJavascriptのようなものは使用できない作りになっているので、そのままAMP化するとグラフが無い何のことかわからないページになりますので、そういう記事は記事単位で非AMPページとして、レスポンシブデザインまでととどめるようにして使っています。
少しでもAMP化されたページが増え、難しいページは非AMPのままで使うことで、より閲覧者に優しいものとして言ったつもりです。
その他入れると便利で快適に使えるプラグイン
上記3つのプラグインを自分のサイトに合わせて最適化を施すことで相当表示スピードは上がるはずです。
そして、まだまだやれることはたくさんありますのでいくつか便利で快適になるプラグインをご紹介いたします。
プラグインの前に・・・wp-cronの無効化
プラグインをご紹介する前に最適化の中で最大の設定があります。
それはwp-cronの無効化です。
WordPressは疑似cronといわれるものが実装されています。
それは、例えば予約投稿のようなものがあった場合にその時間になったら表示されるようになるわけですがどうやって実現しているのかというと、誰かがサイトにアクセスをするたびに、wp-cronというシステムで時間をチェックして、時間になったら実行するプログラムが働いているのです。
逆に言えば1年に1人しかアクセスしないサイトでは予約投稿は1年後まで発動しません。
ある程度アクセスがあることが前提になりますね。
つぎに、大変人気があるサイトの場合、例えば、1日10万PVを超えるようなアクセスがあるサイトの場合です。
1日というのは24時間、秒に換算すると86400秒です。10万PVということは、必ずどこかで被ってアクセスがあることがあるアクセス数となります。
wp-cronはアクセスがあるたびにチェックが張るわけですから、アクセスがかぶったタイミングでは2重3重でチェックが入るということになります。
10万PVとは言わずとも、アクセスが集中するタイミングではかなりサイトのパフォーマンスが落ち、いよいよアクセス不能レベルにまで陥るときがあります。その場合ほとんどの原因がwp-cronだったりします。
要注意！最新のWordPress（5.5.1）から、プラグインの自動更新というのが設定可能になりました！
プラグインの最新バージョンが出たら自動的に更新処理してくれる（更新しない）という設定が可能になりました。
どうせアップデートするんだから、こりゃ便利だと、何も考えずにONにすると、はい。先ほど示したように、wp-cronが原因でアクセス不能に至ります。
プラグインが多ければ多いほど、ちょっとしたことでアクセス不能です。
こちらの自動更新を利用したい方ほどよりwp-cronは、いったん無効化されることをお奨めします。
無効化すると、アクセスのたびにチェックが入らなくなりますので、Linuxサーバーの本当のCron で、wp-cronを実行するように設定をしないといけません。
こちらについてはサーバー管理者様にご相談されて設定することをお奨めします。
実際高速化チューニング、最適化チューニングの中で50%近くのパフォーマンスアップが見込めるのはwp-cronだと思いますので必ず対応するようにしてください。
最低限一旦無効化されるところまでは必ずやられたほうがいいと思います。
画像サイズの一括変換プラグインImsanity
WebpExpressを入れようと思うのであれば、事前にこちらのプラグインを導入して同入画像は一度一括でリサイズしてからコンバートされたほうがいいでしょう。
こちらのプラグインはこちらが設定したサイズを上限としてアップロード済みの画像で設定サイズを超える画像は設定サイズへとリサイズしてくれるプラグインです。
また導入しておけば、次からアップロードする画像も自動リサイズしてくれますので先にリサイズをする必要がなくなります。
2000px以上の画像をWEBサイトで使うことというのはほとんどないはずなので2000px程度を上限にしてリサイズされるといいでしょう。
まずこのリサイズだけでもファイルサイズを随分軽減できますよね。
GoogleAnalyticsに頼らないアクセス解析ソフトWP-Statics
WP Statistics – The Most Popular Privacy-Friendly Analytics Plugin
ここ最近、GoogleAnalyticsのアクセス解析データをダッシュボードなどに表示してくれるようなプラグインが軒並み有償化され、見たいデータはアナリティクスへアクセスしないと見れなくなってきました。
Analyticsで十分なのですが手軽に見ることができなくなったのなら、別のものを考えるほうがいいだろうという結論に至るのが普通です。
そこでご紹介したいのはWPStaticsです。
こちらは無償で利用が可能ですがかなり詳細なアクセスデータを見ることができます。
また、ブログサイトであればこの程度で十分なアクセス分析ができる程度のデータはあります。
また、投稿一覧などで、どのくらいのアクセスがあったのか各記事に数字で表してくれる機能があるので、どのような記事がアクセスが多くて人気なのか一目でわかりますので、マーケティング戦略にもいかせます。