サーバーが重くてたまんない！！
って状況にこの間になってしまって、結構焦ったSwapパンパンだったの原因だった。
サーバーに関してもっと、勉強しないとだめだなぁって実感しました！だれか、偉い人教えて！！

さて、サーバーが重くてという話で、まーいろいろと調べてのですが、WPでの高速化というのも一緒に調べました。
「PageSpeed Insights」の点数もサーバーが重かったのが原因で落ちてた；；
実際、Googleのお偉い方はスピードはSEOにはそこまで重要視してないよってことですが、「ユーザビリティ」の問題ですよね。実際、表示が遅いサイトなんて見てくれないっす。離脱されちゃいます！ってことでやっぱり、早いも正義！

ブラウザでは外部CSSファイルのダウンロードと処理が完了するまでコンテンツを画面に描画するのをブロックします。これによって、外部CSSファイルが多いと、コンテンツを画面に表示するのにかかる時間が増えます。

そこでWPでの高速化の一つ「Autoptimize」というプラグインの紹介です。
HTML / CSS / JSの圧縮が出来るプラグインとなります。単純にいうと、改行を取っちゃったり、余分なスペースを取るプラグインです。

設定

インストールをしたら、まずは設定です。

これを見ていただいたら簡単ですよね。
よくわからない人は、上３つをチェックするだけでよいです。

細かく設定をしたい方は、右上にある「高度な設定を表示」を押すと詳しい設定が出来るようになります。

HTML オプション

HTML コメントを残す

書いてある通り、コメントを残すことが出来るようになります。コメントを残したい方は、チェックをしてください。チェックをしないほうがいいと思います。余分なものは排除した方がいいと思うので。。。
元のテーマとかには残っているので制作には影響しないのでね。

JavaScript オプション

内へ JavaScript を強制

head外にあるJavaScriptをhead内に強制的に移動させるもの。インラインでも外部でも関係なく移動です。
移動させないと不具合があ起こる場合などはチェックを・・・こんなん、テンプレートで変えry
直線に読み込んだほうが、パフォーマンスは上がる場合もあるので、これは慎重に選んでください。

インラインの JS を連結

インラインのJSはデフォルトでは連結（最適化）してません。しちゃっても問題無い人はしてください。連結しちゃうと、エラーが出る場合もあるのでこれも確認してね。

Autoptimize からスクリプトを除外

全部したい！でも、こいつはしちゃうとエラーがってやつを指定してください。

try-catch の折り返しを追加

最適化により、外部とインラインのスクリプと実行の順番がおかしくなる場合に、チェックをいれるとエラーが発生しても　try-catch　　ループでスクリプトを囲んでくれます。
エラーが発生してもスクリプトが停止されなくなるようです。
だけども、エラーとトライを繰り返すようで、パフォーマンスが落ちる場合があるようです。これ、本末転倒ですね。
テーマを見直したほうがよいのですね。

JSの最適化は結構リスキーです。
エラーが出た時に回避できる人、試してみてエラーが出なかったって人以外は、じっくりと考えてください。

CSS オプション

データを生成 : 画像を URI 化

画像のURI化しCSSにすることで、データが小さくなり、サーバーへのリクエストが減らせるというメリットがあります。
その代わり、CSSで読み込んでいる画像がURI化した時にデータが小さくなることが必須です。逆に大きくなる場合もあるのでパフォーマンス低下する場合もあります。

Google フォントの削除

Googleフォント使ってないけど読み込ませてる場合に使うとよいよ。
読み込んでて使ってないとかはないと思うけども。。。

インラインの CSS を連結

インラインのCSSを連結です。

CSS のインライン化と遅延

ページが読み込まれた後でのみ、メインの自動最適化された CSS を “折りたたんだ CSS の上に” インラインで読み込みます。このオプションを有効にする前に FAQ をチェック をご覧ください！

ってあるぐらい、なんかややこしいみたいですね。FAQをチェックってことは、バージョンによっていろいろ変わったりするのかな。
FAQをチェックしてみてください。

すべての CSS をインライン化

外部CSSをインライン化させます。いろんなページで共通しているCSSをページごとに読み込ませるようになります。ってことで気をつけないとパフォーマンス下がるかもよ。

Autoptimize から CSS を除外

処理から除外したいCSSをしています。

CDN オプション

このプラグインで最適化したJSやらCSSやらをCDN化出来るようです。

CDNとは

コンテンツデリバリネットワーク(英: content delivery network、CDN)とは、ウェブコンテンツをインターネット経由で配信するために最適化されたネットワークのことである。 コンテンツ配信網とも。

これ結構、設定は面倒です。
今回は省略します。

キャッシュ情報

設定は何も出来ません。情報をみるってことかな。

その他オプション

連結されたスクリプト / CSS を静的ファイルとして保存

毎回、サーバーで処理して連結させて表示させるのか、これを保存してそれを読み込ませるのか。
ちょー早いサーバーならチェックを外してもいいのかもしれないけども、ずっと変わらないなら、静的で保存させてる方がいいよね。

ログイン中のユーザーも最適化しますか ?

ログイン中に、確認調整とかのために最適化してない状態にしておくことができるみたいですね。
結局は、最適化したデータでユーザーは見るので、そっちで確認した方がいいのかもね。どうしてもエラーが解消出来ない時に使うのかな？

まとめ

初心者にも上級者にも対応している便利なプラグインですね。
とりあえずって人は、３つチェックするだけだし、シビアに設定したい人の痒い部分にも手が届いていいですよね。
個人的には最適化はしておくべきだと思います。速度アップは制作側が絶対にしておくこと、当たり前のことですよね。
インターネットが早くなったからと言っても、見る人の環境がどうだとかはわからないですものね。
見る人に優しいサイト制作は心がけるべきですよね。