設定してHTML、CSS、JavaScriptを縮小するAutoptimizeはWordPressでサイトの表示を高速化できるプラグインです。サイトを表示したときの表示速度がAutoptimizeを使う事によって向上しますが、ではAutoptimizeで出来ることは何かというと、HTMLやCSS、JavaScriptを縮小することができます。なんとなく「HTML、CSS、JavaScriptを縮小する」という事のイメージが分かりずらいかもしれません。上記の画像は「HTML、CSS、JavaScript」を縮小する前のページソースを表示した画像です。こっちの画像は、「HTML、CSS、JavaScript」をAutoptimizeで縮小後に同じページのソース表示をした画像です。縮小がどんな感じか分かってもらえたかと思います。単純にソースコード内にある余分なスペースとか改行を無くしてしまうことで、転送サイズを減らすことができ、表示速度が改善されるという事です。このHTML、CSS、JavaScriptの縮小をしてくれるプラグインがAutoptimizeの設定でできます。上記の進み方でAutoptimizeを有効化にして、Autoptimizeの設定から設定画面に進みます。Autoptimizeをzipファイルでダウンロードする場合は下記からダウンロードできます。ダウンロードAutptimizeを設定する前の注意点ですが、設定後にサイトデザインが崩れたりする可能性があるようです。Autptimizをインストールする前や設定前にバックアップを取るようにしてください。Autoptimizeの設定前にWordPressのバックアップをするならUpdraftPlusというプラグインが簡単に設定できるので良ければ参考にしてみてください。HTMLオプションの設定Autoptimize設定の「メイン」で「1高度な設定を表示」をクリックします。画像は高度な設定が非表示になってますが、高度な設定を表示にした後の画像なのでクリックすると同じ画面になります。2HTMLコードを最適化にチェックここにチェックを入れてHTMLを最適化します。(縮小・圧縮)記事の冒頭でも説明しましたが、HTMLコードの改行やスペースがなくなりサイトの表示速度が改善されるようになります。HTMLコメントを残すこの部分は、HTMLコードを最適化してもHTMLコードに書いたコメントは残すかどうかの設定です。コメントを残しておく場合はチェックを入れます。JavaScriptオプションの設定JavaScriptコードの最適化にチェックするとJavaScriptが縮小することができます。HTMLの最適化と同じで改行やスペースをなくした分が縮小されます。チェックを入れたことでJavaScriptオプションの詳細を設定できるようになります。JS-filesJSファイルを集計しますか?という意味なのですが、この部分はJavaScriptファイルを集約します。JS-fileの設定をしない場合は集約されませんが縮小はされます。insigtsで確認してみたところ、チェックありが私のサイトだと最適化スコアが上がってたのでチェックを入れるときもあります。それぞれのサイトにより変化の違いが出ると思います。設定「あり」と「なし」を比較してみることをおすすめします。インラインのjsを連結HTMLに直接に書いて出力してるJavaScriptコードを抜き出してJavaScriptファイルと連結できます。インラインで書いてるJavaScriptをファイルに連結させるのでAutoptimizeのキャッシュサイズが増加する場合もあります。個人的にはキャッシュサイズを増やしたくないので設定にチェックは入れてません。<head>内へJavaScriptを強制チェックを入れるとJavaScriptを早めに読み込むことができる設定です。head内でJavaScriptを読み込むとレンダリングブロックする可能性が高いのでチェックは入れてません。Autoptimizeからスクリプトを除外スクリプト除外設定では、先述したJavaScriptオプションの設定で最適化やjsの連結をしたファイルを個別に指定することで、Autoptimizeの最適化から除外してエラーを防ぐ設定です。Autoptimizeからスクリプトを除外の設定横の入力ボックスに除外するスクリプトを入力して自動最適化から除外できます。設定がややこしく思える場合は、ここの設定はそっとしておく方がいいです。try-catchの折り返しを追加この設定はAutoptimizeの設定の説明のままです。スクリプトがjsエラーになってしまった場合にはtry-catchの折り返しを追加にチェックしてjsエラーが改善されるか試すときにチェックを入れます。AdvertisementCSSオプションの設定AutoptimizeのCSSオプションの設定では、まずCSSコードを最適化にチェックを入れます。チェックを入れるとCSSコードの最適化ができます。CSSコード最適化の下にCSSオプションの項目が表示されるので設定を詳細にすることができます。CSS-filesはCSSファイルを1つに集約して連結します。CSSの縮小、そして連結ができるので多少の表示速度の改善ができます。チェックを入れない場合はCSSファイルは1つに集約されませんが、CSS自体は縮小されます。この設定も、それぞれCSSを1つにまとめた場合と、CSSをまとめないで縮小しただけの設定をサイト速度の計測で比較して見ることをおすすめします。CSS-filesの設定と一緒に設定することで設定できます。CSS-filesを設定した場合には一緒にインラインCSSも連結されるので設定しておくとCSSがコンパクトになります。通常は画像を個別にダウンロードしますが、画像をURL化することでリクエスト回数を減らすことができる設定です。Autoptimizeのデータ生成:画像をURL化にチェックを入れると、画像がBase64という形式で画像が変換されてCSSに小さな背景画像を含めることができます。小さい画像なら効果はあるかもしれませんが、大きな画像になるとサイズ容量が増えたというときもあるので逆効果になる場合もある設定です。個人的にはチェックしてない設定です。CSSを使って読み込みさせるようですし、AutoptimizeのCSSのインライン化と遅延の設定の説明を読むと有料のプラグインとの併用で効果が発揮されるようなので、設定は不要と思えます。設定の名前のそのままのような気もしますが、実際に設定してページのソースを確認したら、CSSがすべてインラインになって物凄く長いCSSになります。サイトによっては、すべてのCSSをインライン化するとパフォーマンスが上がることもあります。個人的には、CSSのインライン化がすべてのCSSだと、ごちゃごちゃしすぎなので設定してないです。AutoptimizeからCSSを除外AutoptimizeのCSSオプションの項目で最適化したCSSの中で設定を除外したいCSSを個別に設定できます。Autoptimizeの最適化の設定から除外したいCSSを入力ボックスに含めると、そのCSSは最適化から除外されます。複数ある場合にはコンマ区切りで指定します。キャッシュ情報Autoptimizeの設定のキャッシュ情報が書いてあります。書き込み権限キャッシュしてるファイル数キャッシュしてる合計KBそれなので、Autoptimizeの最適化の設定に直接は関係がない項目です。Advertisementその他のオプション連結されたスクリプト/CSSを静的ファイルとして保存デフォルトでチェックが入ってると思います。AutoptimizeでCSSとJSファイルは1つにまとまると思いますが、そのファイルを保存します。サーバーとの不具合など出るようならチェックを外してください。ログイン中のユーザーも最適化しますか?Autoptimizeのここの設定はチェックを入れた状態と入れない状態でソース表示して試してみました。結果はチェックを外すと、ログインしている自分自身はAutoptimizeで縮小したCSSやHTMLは縮小されなく、最適化はされていませんでした。デフォルト設定ではチェックが入ってると思うのでチェックを入れておいて、サイトのページのソースを見やすい状態で確認するときに設定のチェックを外して使ってみると確認するソースが見やすくなります。最後に、「設定を保存してキャッシュを削除」をクリックして保存します。Insightsで最適化の点数を見てみてください。Insigtsでサイト表示速度の改善をしたときの記事もあるので、何かの参考になればと思います。InsightsまとめAutoptimizeの設定後には必ずサイトを表示してデザイン崩れや不具合が出ていないかを確認することは私は必須だと思っているので確認をするようにしてください。デザインが崩れたりする場合はAutoptimizeを停止してみることも必要です。Autoptimizeの設定のチェック項目は細かいかもしれません。上記の3つにチェックしておくだけでも効果は期待できます。投稿一覧WordPressとWeb関係のことを趣味的に学んでます。独学なので記事で間違ってることがあればご指摘ください。記事が少しでも誰かの参考になればと思います。Optimizer」が以下のエラーを出してくれました。Optimizarを使うと記事で使用している画像の圧縮が簡単にできました。WordPress.。