Autoptimize
Autoptimizeとは、WordPressのソースコード（HTMLやCSSなど）を圧縮することで高速化を行うプラグインです。
本来、テーマ内のファイルやphpファイルなどを直接編集を行う必要があり専門の知識が
なければ高速化することできませんがこのプラグインを利用し簡単な設定のみで
Webサイトの表示速度を改善することができます。
- HTMLの最適化（記述の改行やスペース及びコメント削除）
- CSSの最適化（記述の改行やスペース削除、ファイル結合など）
- 画像の最適化（CDN(Content Delivery Network)、画像の遅延読み込み）
- JavaScriptの最適化（記述の改行やスペース削除、ファイル結合など）
本記事では、mixhostで簡単な設定のみWebサイトの最適化ができる「Autoptimize」の設定方法について紹介します。
Autoptimizeは、Webページに閲覧ユーザーがアクセスをするたびに、Webページ内の画像を
画像を最適化し置き換えを行います。
最適化を行った画像は、ShortPixelCDNから提供されCDN(Content Delivery Network)を利用しているため
他のプラグインやCDN(Content Delivery Network)サービスを利用している場合は、うまく動作しないことがあるため注意しましょう。
導入方法
プラグイン導入
WordPress管理画面より「①プラグイン欄：新規追加」→「②キーワードに【Autoptimize】と入力」→「③【今すぐインストール】」→「④【有効化】」の順に選択しプラグインの有効化しましょう。
設定方法
Autoptimize管理画面へは、WordPress管理画面の【設定欄：Autoptimize】を
クリックし管理画面へ移動しましょう。
JS、CSS&HTML
JS、CSS&HTMLタブでは、最適化を行う対象の選択することでWebサイトのページごとの
記述を改行やスペース及びコメント削除することでページ表示速度を向上させることができるます。
ここでは、Autoptimizeを使用しての設定例を紹介します。
ご利用しているサーバー環境やプラグイン、他の連携サービスによってページ表示に問題が発生する場合があり
設定の有効化後に必ずページ表示を確認するようにしましょう。
もし、最適化がうまく行かない場合は各オプション項目のいずれかを最適化を無効化することで改善することがあります。
JavaScriptオプション
| 設定項目 | 内容 | 設定例 |
| JavaScript コードの最適化 | ファイル内の改行などを取り除いてJavaScriptファイルを圧縮を行います。 |  |
| JS ファイルを連結 | レンダリングブロックなしで読み込むために、
リンクされたすべての JS ファイルを連結します。 |
 |
| インラインの JS も連結 | Autoptimize に HTML からも JS を抽出します。 | |
| <head> 内へ JavaScript を強制 | JavaScript を強制的に読み込みます。 | |
| try-catch で囲む | 連結したスクリプトが JS エラーを出し壊れている場合これを試すことができますが、一般的な使用は推奨できません。 | |
| 連結しないで遅延 | それぞれの JS ファイルは最小化され遅延されるので、レンダリングブロックされません。 | |
| インライン JS も遅延 | インライン JS も遅延します。これによりすべての JS が遅延されるため、標準の除外スクリプトを削除してテストし、なお必要であれば特定の項目のみを除外します。 | |
| Autoptimize からスクリプトを除外: | 最適化したくないスクリプトをコンマ区切りで一覧にします。例「whatever.js, my_var」 (括弧を除く) 。 | ・デフォルト設定 |
CSSオプション
| 設定項目 | 内容 | 設定例 |
| CSS コードを最適化 | CSSファイル内のコードを圧縮 | |
| CSS ファイルを連結 | リンクされているCSSファイルをひとつに圧縮
読み込むファイル数を減らす |
|
| インラインの CSS も連結 | この Autoptimize オプションをチェックすると、
HTML の CSS を連結します。 |
|
| データ生成: 画像を URI 化 | この機能を有効にすると、個別に画像をダウンロードせず、
CSS 自体に小さな背景画像を含めることができます。 |
|
| レンダリングブロックしている
CSS を除去 |
「ファーストビュー (Above the fold) のCSS」をインライン化しつつ、
ページの読み込み直後にはメインの自動最適化された CSS のみを読み込みます。 |
|
| すべての CSS をインライン化 | すべての CSS のインライン化を行うことでCSS のレンダリングブロックを
回避することが出来ます。 HTML のサイズが大幅に増加するため、一般に推奨されません。 |
|
| Autoptimize から CSS を除外: | 最適化から除外する CSS をコンマ区切りで一覧にします。 | ・空欄 |
HTMLオプション
| 設定項目 | 内容 | 設定例 |
| HTML コードを最適化 | HTMLコードを最適化するかどうかの設定です。 | |
| HTML コメントを維持 | 有効にすると、HTML コメントをページ内に残します。 | |
CDNオプション
| 設定項目 | 内容 | 設定例 |
| CDN のベース URL | ルートとなる CDN の URL を入力し、
最適化されたファイルの CDN を有効にします。 |
・空欄 |
その他オプション
| 設定項目 | 内容 | 設定例 |
| 連結されたスクリプト / CSS を静的ファイルとして保存 | デフォルトで保存されるファイルは静的な CSS / JS になります。 | |
| 404 フォールバックの使用 | キャッシュしたHTML から、削除済みの Autoptimized JS/CSS が参照された結果、
サイトの表示が壊れることがありファイルの「フォールバック版」(予備) へのリダイレクトを試行します。 |
|
| ログイン状態の編集者、管理者にも最適化を行う | Autoptimize はログイン状態の編集者 / 管理者がページへアクセスした際にも
最適化行います。 |
|
| 投稿/ページごとに設定 | 投稿/ページの編集画面に最適化メタボックスを追加し、
投稿/ページごとに最適化設定のオン/オフを切り替えることが出来ます。 |
|
画像
最適化と遅延読み込みのチェックボックスをオンにするだけで、
WebP や AVIF 対応を含む最適化と遅延読み込みにより、そのサイトの画像を大幅に高速化します。
画像の最適化には、CDNと遅延読み込み（Lazy-load）機能が用意されており
画像の遅延読み込みは、閲覧ユーザーがアクセスした際にページ内の画像をすべて読み込まず、
ブラウザに表示される範囲の画像のみ読み込んで、表示することでページの表示速度を高速化します。
Autoptimize で画像の最適化を行う場合、お使いのドメインのimageタグとCSSファイルから読み込んだ png, gif, jpeg (.jpg) ファイルを探し、
それらのファイルの src (参照先) を ShortPixel CDN に変更します。
この最適化は、公開されている画像に対してのみ機能し、画像最適化用のプロキシは画像を取得できません。
ファイアウォールやプロキシ、パスワード保護（ベーシック認証など）、直リンク防止などが画像最適化が行えない原因となる場合があります。
| 設定項目 | 内容 | 設定例 |
| 画像を最適化 | 画像の遅延ロードの設定 | |
| 画像の遅延読み込み (Lazy-load) を利用 | 見えていない画像の読み込みを遅らせパフォーマンスを改善 | |
画像の遅延読み込みを行うためのJavaScriptライブラリです。遅延読み込みは画像の読み込みに遅延して表示させ、画面表示の高速化を図るしくみです。
ブラウザはWebサイトを表示する際に指定のページに含まれるすべての画像を一気に読み込ませようとします。
ページ内の画像ファイルの容量が多ければその分読み込みには時間がかかるため、ネットワークやサーバーに負担がかかり表示速度を低下します。
そのため、Lazy Loadを活用することで、ユーザーがブラウザ上で表示している画面外にある画像の読込を行わないことで表示速度を向上し、
ユーザーがスクロールして非表示の画像が画面に近づいた時点で本来の画像の読み込みを開始し表示することで、
ページへアクセスした際のページ表示速度の高速化を優先して行います。
追加
サイトのパフォーマンスに関する設定が行えます。
| 設定項目 | 内容 | 設定例 |
| Google フォント | ・そのままにする
・Google フォントの削除 ・結合とヘッダーでのリンク (フォント読み込みは速いがレンダリングブロックが発生), ・結合とヘッダーで遅延リンク (フォント読み込みは遅いが、レンダリングブロックなし), ・webfont.js で非同期にフォントを結合して読み込む (廃止予定) |
・結合とヘッダーで遅延リンク (フォント読み込みは遅いが、レンダリングブロックなし), display:swap を含む。 |
| 絵文字の削除 | WordPress コアの絵文字用のインライン CSS、インライン JavaScript、およびその他の自動化されていない JavaScript ファイルを削除します。 | |
| 静的リソースからクエリー文字列を削除 | 静的リソースからクエリー文字列(具体的には ver 変数) を削除します。 |
|
| WordPress のブロック CSS を除去 | WordPressのブロックCSS を除去します。 | |
| サードパーティのドメインに事前接続 (上級者向け) | ブラウザーに事前接続させたいサードパーティドメインをカンマ区切りで追加してください。 | ・空欄 |
| リクエストの事前読み込み (上級者向け) | 事前読み込み (preload) したいリソースの完全な URL をコンマ区切りの一覧にします。控えめに使います。 | ・空欄 |
| 非同期 JavaScript ファイル (上級者向け) | async (非同期) フラグで読み込むべきローカルまたはサードパーティの JS ファイルをカンマ区切りで一覧にします。 |
・空欄 |
| YouTube 動画の最適化 | レスポンシブな LIte YouTube Embed を挿入する事で、
動画を「遅延読み込み」させられます。 |
・設定不要 |
