こんにちは、りゅうのすけ(@k_r001)です。
この記事では、ブログの最適化プラグイン「Autoptimize」の設定方法と使い方についてまとめています。
こういった方に向けて、書いています。
モバイルでの表示速度が97点に達しているので、参考になると思います。
Autoptimizeとは？
「Autoptimize」はソースコードを最適化できるプラグインです。
WordPressは以下の3つのコードで構成されています。
この3つのコードを最適化できるプラグインが「Autoptimize」です。
Autoptimizeをインストール
まずは、プラグイン「Autoptimize」を取得しましょう。
取得したら必ず有効化しておきましょう。
パソコンにダウンロードしたい人は、下記URLより取得できます。
Autoptimizeの設定
では、「Autoptimize」の設定をしていきましょう。
- JavaScriptの最適化
- CSSの最適化
- HTMLの最適化
- 画像の最適化
- 追加の自動最適化
設定方法を見ていきましょう。
AutoptimizeでJavaScriptの最適化
まずは、JavaScriptの最適化をしましょう。
- JavaScriptコードの最適化にチェック
- JS ファイルを連結するのチェックを外す。
- 連結しないで遅延にチェックを入れる。
自分のサイトがHTTP/2通信に対応しているか調べるには、⬇︎下記サイトでURLを入力すれば確認できます。
HTTP/2通信に対応していない場合は、「JS ファイルを連結する」にチェックを入れておきましょう。
AutoptimizeでCSSの最適化
次に、CSSの最適化設定を行います。
- CSS コードを最適化にチェックを入れる。
- CSS ファイルを連結するのチェックを外す。
- CSS のインライン化と遅延にチェックを入れる。
HTTP/2通信に対応していない場合は、
遅延のチェックを外して連結するにチェックを入れておきましょう。
AutoptimizeでHTMLの最適化
最後に、HTMLの最適化設定を行います。
HTMLの最適化をおこなうには、「HTMLコードを最適化」にチェックを入れましょう。
各コードの最適化設定は、これだけで十分です。
設定ができたら変更の保存を忘れずに押しましょう。
Autoptimizeで画像の最適化
「Autoptimize」では、画像の最適化と遅延読み込みができます。
画像の遅延読み込みは、「Lazy-load」の機能ですが、「Autoptimize」でも利用できます。
詳しくは、⬇︎下記記事を参考にしてみてください。
【EWWW Image Optimizer】の設定方法と使い方
似たような機能があるとお互いに干渉しあって、エラーの原因になるのでどちらか一つに絞りましょう。
追加の自動最適化
「Autoptimize」の設定では、追加を押すことでフォントなどの最適化設定を行うことができます。
- Google フォント ➡︎ Googleフォントの削除
- 絵文字の削除 ➡︎ WordPressコアの絵文字用のインラインCSS、インラインJavaScript、およびその他の自動化されていないJavaScriptファイルを削除します。
第三者コードの影響を抑える
「第三者コードの影響を抑えてください」という表記は、ページ速度に問題ないですが、「Autoptimize」で改善できます。
「第三者コードの影響を抑えてください」という表記を開くと、影響が出ているサイトのリンクが表示されます。
リンクを開いてURLをコピーしましょう。
全てのURLを入力すると、第三者コードの影響を抑えられます。
レンダリングを妨げるリソースの除外
「Autoptimize」を使うことで、レンダリングを妨げるリソースのCSSを除外できます。
この方法を使うと、「CLS」が悪くなる可能性があります。
CSSのインライン化と遅延に関するコードを、⬇︎下記サイトで取得します。
- URLにサイトURLを入力
- FULL CSSに親テーマのstyle.cssのコードを貼り付け
- Create Critical Path CSSをクリック
- CRITICAL PATH CSSに出てきたコードをコピー
テーマエディターを開く前に必ず親テーマに切り替えてください。
取得したコードを「Autoptimize」に貼り付けします。
CSSのインライン化と遅延の中にある記入欄にコピーしたコードを貼り付けて保存すれば、完了です。
キーリクエストのプリロード改善
CSSのインライン化と遅延の設定をしただけでは、キーリクエストのプリロードという問題が発生します。
「PageSpeed Insights」で表示速度を診断すると出てきます。
キーリクエストのプリロードを開くと出てくるリンクアドレスをコピーしてください。
<!-- 高速化キーリクエストのプリロード -->
<link rel="preload" as="font" type="font/woff" href="○○" crossorigin>
コピーしたリンクをhrefの○○部分に貼り付けて、上記リンクを<head>〜</head>内に貼り付ければ設定完了です。
これでキーリクエストのプリロードは、表示されなくなります。
Autoptimizeのキャッシュ削除方法
「Autoptimize」は定期的に溜まるキャッシュを削除しましょう。
- 設定画面上部分にある「Autoptimize」を押す。
- キャッシュを削除を押すと設定画面に切り替わります。
- 画面下の変更の保存とキャッシュを削除を押せば完了です。
キャッシュを削除すれば、最適化は完了です。
Autoptimizeで不具合が起きた場合
「Autoptimize」は、ソースコードを変更するのでエラーが起こりやすいです。
- デザインが崩れる。
- 他のプラグインと干渉して不具合が起こる。
こういった不具合が起こった場合の対処法を把握しておきましょう。
ページの更新がされない
ページの更新がされない場合は、キャッシュを削除しましょう。
キャッシュが溜まった状態だと、変更前のデータが残っている場合があります。
この場合はキャッシュを削除することで、古いデータが消えて更新されたページが表示されます。
デザインが崩れる
デザインが崩れた場合は、「JavaScript」か「CSS」の最適化設定が影響しています。
- 「JavaScript」の最適化をOFF
- キャッシュの削除
- 不具合の起こったページを確認する。
- 「CSS」の最適化をOFF
- キャッシュの削除
- 不具合の起こったページを確認する。
- ・・・
こんな感じで、設定一つ一つOFFにして、どの設定が悪影響を及ぼしているかの確認を行います。
こうすることで、不具合を解消することができます。
まとめ
「Autoptimize」を使えば、ソースコードの最適化を行うことができます。
最適化をすることでページの表示速度を上げることができ、より使いやすいブログにすることができます。
他にもサイトの最適化をする方法はまだあります。
うまく活用してみてください。
最後まで見ていただき、ありがとうございました。
