Webサイト最適化チューニング

---

重いのが当たり前スタート

---

Webサイト最適化チューニング

軽いこと自身がSEO対策！
WordPressを極限まで最適化しサクサクWebサイトを作りましょう。

重い…
下手をすれば表示するのに10秒以上かかるWordPressサイトも見かけます。
Googleは、1秒以内に表示するWebサイトを優良なWebサイトとみなしますので、少しでも早く、サクサクに動くWebサイトを作る必要があります。

よくあるのが、Webサイト自身は表示は早いよ？
ってサイトが、検索エンジンでは大した評価をされないというパターン。。。
最近のWebサイトは、Jsファイルを読み込んで動きのあるWebページを作ることが多いですし、使っていなくてもjQueryをとりあえず読み込んでいたり。
Jsファイルを読み込むこと自身は問題ではないのですが、その読み込む順番であったり使っているコードだけを読み込んでいるかどうかであったり。
検索エンジンはそんなところまで見ているのです。

JsやCSSのロード順などを見ているわけですからもちろん画像も見ています。
1つにはどんな形式の画像ファイルを読み込んでいるかチェックしています。
jpgファイルは検索エンジン的には【古い】形式の画像ファイル。
webpもしくはpngにすることをお勧めします。
また読み込み順についても、先にテキスト文を読み込んでから画像を読み込むように、いわゆる遅延読み込みをしたほうがいいです。
そんなのどうやってやんだよ？
って話ですが、後述します。

Js・CSSについての制御、画像の制御。
大きく分けるとこの2つの制御・最適化を施すことが現代のSEO対策の一つです。
簡単に言うと1秒以内に、テキスト文がロードされ、修飾部分のJSやCSS、画像は遅延読み込み。まずはテキストが読める状態になることを優先してチェックします。

まず最初に、画像。
最初に最適なサイズの画像を作ることです。
デザインテーマによって、例えばメニュー内に表示する画像は300×300とか、ブログアーカイブのサムネは150×150など、テーマによって必要な画像サイズが決まっているケースが多いです。
WordPressの画像は、アップロードした時点でいくつかのサイズの画像をリサイズして作っています。
まずそのサイズを合わせる必要があります。
【設定】→【メディア】にて、基本的な画像サイズを指定できます。

こちらでは大サイズ、中サイズ、サムネイルのサイズしか調整できませんが、実はWordPressはほかにも数種類のサイズを作り出しています。
それらを調整したい場合は、【EWWW Image Optimizer】プラグインを入れることでサイズ調整、また不要なサイズの画像を書き出さないように設定できます。

そして、大事なのはこの画像たちをWeb用の画像形式【webp】形式にすることです。
EWWWimageでwebpを作ることも可能ですが、お使いのサーバーにGD、もしくはImageMagicが入っている場合、完全無料でwebpを作ることができます。
それが、webp-expressというプラグインです。
このプラグインは、自前のWebサーバーにGDもしくはImageMagic（その他いくつかの画像書き出しライブラリ）どれかが導入されていれば、自前サーバーでwebp画像を書き出すことができます。
また、webp-expressを入れていれば、自動的に画像をwebpに差し替えてくれるコードを入れてくれます。
解除、もしくはwebpに対応していないブラウザで閲覧した場合には、従来通りJPG画像などを表示してくれます。
お金をかけずに作れるというのが大きいですね。

もう一つ。JSファイルやCSSファイルといった修飾用のファイルについては遅延読み込みを行いたいところ。
単純にHTMLの後方に持っていけば、ロードの順番的に後方で読み込むことになりますが、wordPressのテーマを自分で作っているのであれば好きなことができますし、プラグインを入れないのであれば新しいJSやCSSのロードもないでしょうが、そういうわけにもいきませんよね。
そこで、おすすめするのが【LiteSpeedCash】というプラグインです。
LiteSpeedというのは、apacheに代わる超速Webサーバーなのですが、まだまだ高額で、個人的なWordPressや始めたばかりのWebサイトで大量にお金をかけることができない方はまだまだ使いにくいWebサーバーです。
もちろんLiteSpeedWebサーバーにこのプラグインは最強の組み合わせなのですが、LiteSpeedが入っていなくても7割くらいは使えるプラグインです。
その中にはJSに関する最適化処理や、CSSの最適化処理があり、これはLiteSpeedWebサーバーではなくとも使えます。
JSファイルについては遅延読み込み、ファイル統合は最低限やりたいところです。
ただし、テーマによってはファイルを統合するとデザインが動かなくなることもありますので、そのあたりは適用して問題なければそのまま、デザインが崩れたり動かなくなったらJSの遅延読み込みやファイル統合を採用したり外してみたりして動くぎりぎりのラインを攻めてください。

CSSも遅延読み込みとファイル統合があります。

こちらはおかしくなることはほとんどありませんので適用しましょう。

たったこれだけでもずいぶんパフォーマンスはよくなります。
そのほかにもLiteSpeedじゃなくても使える機能がたくさんありますのでサイトが動く限り最適化していきましょう。

ここまでやればそれなりに早く、検索エンジンが高パフォーマンスと認めてくれます。

ぜひやってみてください。