「Autoptimize」設定のしかた備忘録。
Autoptimize 最適化の設定を必要としたのは、「Google Search Console」により「改善が必要な URL: 〇〇 件」と表示。サイト表示スピードが遅いと指摘されている。どのくらい遅い？どこまで早くなる？
このGoogle指標のサイト表示速度アップを図るために、プラグイン「Autoptimize」を設定することとした。
Autoptimize プラグインのできること
「google Search console」のウェブに関する主な指標対処によって「サイトのスピード遅い」
「Autoptimize」プラグインを導入することによってwebサイト最適化を図る。
Google 指標のスピードアップとは、標準値とか目標とすべき数値はいくつだろうか？は再調査する。
Autoptimize 設定のしかた
Autoptimizeを設定する手順
管理画面の左サイドメニュー：ダッシュボード → 設定（下の方にある）をクリック
「Autoptimize」をクリックすると以下「Autoptimize設定」の項目各タブ。
- JS、CSS & HTML
- 画像
- クリティカルCSS
- 追加
- さらに最適化 !
（画像クリックで拡大）
1. JS, CSS & HTMLの設定
この項目「JS, CSS & HTML」の場合、使用しているWPテーマが「Cocoon」のときには、どちらか一方に設定するのが賢明。
1-2. JavaScript オプション
設定画面のデフォルトでは「JavaScript コードの最適化」にチェックを入れるとすべての項目が表示される。
設定は
1.「JavaScript コードの最適化」にチェック✅
2.「JS ファイルを連結する」にチェック✅
すべてのリンク型の JS ファイルを連結し、レンダリングブロックが起こらないよう読み込みます。このオプションが無効ならそれぞれの JS ファイルはそのままで、最小化だけが行われます。
以下「インラインの JS も連結」、「<head> 内へ JavaScript を強制」などにはチェックを入れない。
1-3. CSS オプション
CSS オプションの設定のデフォルトでは真っ白の状態。
「CSS コードを最適化」チェックを入れると各項目が表示される。
設定は3項目
1.「CSS コードを最適化」に✅チェック
2.「CSS ファイルを連結する」に✅チェック
3.「インラインの CSS も連結」にチェック✅
このオプションにチェックすると、HTML 中の CSS も連結します。
上記3項目にチェックでOK。
4.「データ生成: 画像を URI 化」以下の項目はチェックを入れない（デフォルトのまま）。
1-4. HTML オプション
HTML オプションの設定のデフォルトでは真っ白の状態。
「HTML コードを最適化」✅チェックでOK。
「CDN オプション」と「キャッシュ情報」はデフォルトのままでOK
（この項目は理解できていないからデフォルトの状態）
1-5. その他オプション
1.「連結されたスクリプト / CSS を静的ファイルとして保存」に✅
2.「除外された CSS ファイルと JS ファイルを最小化」✅
でOK。
変更の保存」変更した場合には「保存ボタンのクリック」「キャッシュを削除」を忘れないように‼
2. 画像の設定
画像最適化の簡易な方法には、「画像圧縮」と「画像遅延読み込み」がある。
WPテーマ「Cocoon」には「画像圧縮」機能は無い。
この「Autoptimize」プラグインを利用する。
2-1. 画像の最適化
「画像を最適化」✅チェック
（機能簡略説明・訳）その場で画像を最適化し、それを提供する
最適化できるのは、JPEG、PNG、または（アニメーション）GIF形式の画像のみです。ファイルの最大数は10MBです。
2-2. 「画像の遅延読み込み (Lazy-load) を利用」☐しない
（機能説明）画像の遅延読み込みは、ファーストビュー (Above the fold) 用のすべてのリソースを最適化して読み込ませることで、見えていない部分の画像の読み込みをブラウザに対し遅延させます。
設定要注意↓
<主な方法>
プラグイン「Autoptimize」
プラグイン「Lazy-load」
プラグイン「EWWW Image Optimizer」
WPテーマ「Cocoon 高速化」
のどれかを選択する。
Autoptimize より、数日後メッセージが届く
クレジットの追加すると
視覚的に同一の画像ですが、最大90％小さくなります。
サイトの画像を圧縮する準備はできましたか？
ShortPixelを搭載したAutoptimizeの画像最適化機能の使用を開始し、グローバルCDNからオンザフライで最適化された画像を配信します。
ワンクリックで「次世代」の画像（WebPなど）を配信することで、SEOを向上させます。
Q:すべての無料クレジットを使用しましたが、どうなりますか？
「変更の保存」変更した場合はボタンを忘れないように‼
3. ⚡ クリティカルCSS
（機能説明）レンダリングをブロックするCSSを削除して、最初のペイント時間を改善します.
【今回の対応】「有料サービス」である。30日の返金制度があるようだけれど、今回は使用しない。
4. 追加
追加の自動最適化
次の設定を行うと、サイトのパフォーマンスがさらに向上します。
googleフォント
【選択項目】ラジオボタンで選ぶ
- そのままにする
- Google フォントの削除
- 結合とヘッダーでのリンク (フォント読み込みは速いがレンダリングブロックが発生),
display:swapを含む。 - 結合とヘッダーで遅延リンク (フォント読み込みは遅いが、レンダリングブロックなし),
display:swapを含む。 - webfont.js で非同期にフォントを結合して読み込む。 (廃止予定)
✅「Google フォントの削除」を選ぶ
絵文字の削除 ✅
（機能説明）WordPress コアの絵文字用のインライン CSS、インライン JavaScript、およびその他の自動化されていない JavaScript ファイルを削除します。
その他の機能
「YouTube 動画の最適化」とか「上級者向け」の機能など備えている。今回は不使用
その他項目はデフォルトのままにする。
5. さらに最適化！
（機能説明）これら「Autoptimize パワーアップ」や関連サービスは、サイトのパフォーマンスをさらに向上させます。
さらに最適化するためのツールは「有料プラグイン」「有料サービス」でプロ向きのようだ。デフォルトのままで使用しない。
以上で「Autoptimize設定」は終了。
終わりに
デバイスの進化によって、Googleの対応が目まぐるしく変化する。
「google Search console」のウェブに関する主な指標対処
「Autoptimize」webサイト最適化によって最適化の数値を検証する必要がある。
Google 指標のスピードアップとは、標準値はいくつだろうか？
サイトスピードの推奨される「スピードの目安」はいくつであろうか？などを含め
自サイトのスピードをチェックする方法、「PageSpeed Insights」で点検、
webサイトの改善点な含め「GTmetrix」での検証を定期的に行うこととする。
大変参考になったサイトはこちら「Tekito style」
コメント