SEO対策

【Autoptimize】プラグインを使ってソースコードの最適化

autoptimize プラグイン

こんにちは、りゅうのすけ(@k_r001)です。

この記事では、ブログの最適化プラグイン「Autoptimize」の設定方法と使い方についてまとめています。

 

  • サイトの表示速度を早くしたい
  • HTML・CSS・JavaScriptなどコードを最適化ってどうしたらいいんだろう?
  • Autoptimizeの設定って何をしたらいいの?

 

こういった方に向けて、書いています。

 

\このサイトの表示速度/
autoptimize プラグイン

モバイルでの表示速度が97点に達しているので、参考になると思います。

Autoptimizeとは?

autoptimize プラグイン

Autoptimize」はソースコードを最適化できるプラグインです。

WordPressは以下の3つのコードで構成されています。

 

  • HTML
  • CSS
  • JavaScript

 

この3つのコードを最適化できるプラグインが「Autoptimize」です。

Autoptimizeをインストール

まずは、プラグイン「Autoptimize」を取得しましょう。

 

場所は、プラグイン ➡︎ 新規追加でプラグインの検索ができます。

 

Autoptimize プラグイン

取得したら必ず有効化しておきましょう。

パソコンにダウンロードしたい人は、下記URLより取得できます。

 

\Autoptimizeをダウンロード/

 

Autoptimizeの設定

autoptimize プラグイン

では、「Autoptimize」の設定をしていきましょう。

 

\Autoptimizeで最適化できる項目/
  • JavaScriptの最適化
  • CSSの最適化
  • HTMLの最適化
  • 画像の最適化
  • 追加の自動最適化

 

設定方法を見ていきましょう。

AutoptimizeでJavaScriptの最適化

autoptimize プラグイン

まずは、JavaScriptの最適化をしましょう。

 

\JavaScriptコードの最適化手順/
  • JavaScriptコードの最適化にチェック
  • JS ファイルを連結するのチェックを外す。
  • 連結しないで遅延にチェックを入れる。

 

HTTP/2通信の場合はファイルを分割読み込みした方が速いため、JSの連結は不要です。

 

自分のサイトがHTTP/2通信に対応しているか調べるには、⬇︎下記サイトでURLを入力すれば確認できます。

 

\HTTP/2通信に対応しているか調べる/

 

HTTP/2通信に対応していない場合は、「JS ファイルを連結する」にチェックを入れておきましょう。

AutoptimizeでCSSの最適化

autoptimize プラグイン

次に、CSSの最適化設定を行います。

 

\CSSの最適化手順/
  • CSS コードを最適化にチェックを入れる。
  • CSS ファイルを連結するのチェックを外す。
  • CSS のインライン化と遅延にチェックを入れる。

 

HTTP/2通信の場合はファイルを分割読み込みした方が速いため、CSSの連結は不要です。

 

HTTP/2通信に対応していない場合は、
 

  • JS ファイルを連結する
  • インラインの CSS も連結

 

遅延のチェックを外して連結するにチェックを入れておきましょう。

AutoptimizeでHTMLの最適化

autoptimize プラグイン

最後に、HTMLの最適化設定を行います。

HTMLの最適化をおこなうには、「HTMLコードを最適化」にチェックを入れましょう。

各コードの最適化設定は、これだけで十分です。

設定ができたら変更の保存を忘れずに押しましょう。

Autoptimizeで画像の最適化

autoptimize プラグイン

Autoptimize」では、画像の最適化と遅延読み込みができます。

画像の遅延読み込みは、「Lazy-load」の機能ですが、「Autoptimize」でも利用できます。

 

画像の最適化や遅延読み込みは、「EWWW Image Optimizer」でも設定可能なのでぼくはOFFにしています。

 

詳しくは、⬇︎下記記事を参考にしてみてください。

 

\EWWW Image Optimizerの設定方法/

 

似たような機能があるとお互いに干渉しあって、エラーの原因になるのでどちらか一つに絞りましょう。

追加の自動最適化

autoptimize プラグイン

Autoptimize」の設定では、追加を押すことでフォントなどの最適化設定を行うことができます。

 

追加の自動最適化設定
  • Google フォント ➡︎ Googleフォントの削除
  • 絵文字の削除 ➡︎ WordPressコアの絵文字用のインラインCSS、インラインJavaScript、およびその他の自動化されていないJavaScriptファイルを削除します。

 

Googleフォントを使ってないのであれば、Googleフォントの削除を行うと高速化できます。

 

第三者コードの影響を抑える

autoptimize プラグイン

「第三者コードの影響を抑えてください」という表記は、ページ速度に問題ないですが、「Autoptimize」で改善できます。

「第三者コードの影響を抑えてください」という表記を開くと、影響が出ているサイトのリンクが表示されます。

リンクを開いてURLをコピーしましょう。

autoptimize プラグイン

 

「設定」➡︎「Autoptimize」➡︎「追加」➡︎「サードパーティのドメインに事前接続」に入力

 

autoptimize プラグイン

全てのURLを入力すると、第三者コードの影響を抑えられます。

レンダリングを妨げるリソースの除外

autoptimize プラグイン

Autoptimize」を使うことで、レンダリングを妨げるリソースのCSSを除外できます。

この方法を使うと、「CLS」が悪くなる可能性があります。

 

「CLS」はレイアウトのずれの値なので、逆にサイトの評価が下がる可能性があります。

 

CSSのインライン化と遅延に関するコードを、⬇︎下記サイトで取得します。

 

\CSSのインライン化と遅延に関するコードを取得/

 

autoptimize プラグイン

 

\コードの取得方法/
  1. URLにサイトURLを入力
  2. FULL CSSに親テーマのstyle.cssのコードを貼り付け
  3. Create Critical Path CSSをクリック
  4. CRITICAL PATH CSSに出てきたコードをコピー

 

親テーマのstyle.cssは、「外観」➡︎「テーマエディター」➡︎「style.css」の中にあるコード全てです。

 

テーマエディターを開く前に必ず親テーマに切り替えてください。

取得したコードを「Autoptimize」に貼り付けします。

autoptimize プラグイン

CSSのインライン化と遅延の中にある記入欄にコピーしたコードを貼り付けて保存すれば、完了です。

 

りゅうのすけ
りゅうのすけ
これだけでは、キーリクエストのプリロードという問題が出てくるので、そちらの改善も行います。

 

キーリクエストのプリロード改善

autoptimize プラグイン

CSSのインライン化と遅延の設定をしただけでは、キーリクエストのプリロードという問題が発生します。

PageSpeed Insights」で表示速度を診断すると出てきます。

autoptimize プラグイン

キーリクエストのプリロードを開くと出てくるリンクアドレスをコピーしてください。

<!-- 高速化キーリクエストのプリロード -->
<link rel="preload" as="font" type="font/woff" href="○○" crossorigin>

 
コピーしたリンクをhrefの○○部分に貼り付けて、上記リンクを<head>〜</head>内に貼り付ければ設定完了です。

これでキーリクエストのプリロードは、表示されなくなります。

Autoptimizeのキャッシュ削除方法

autoptimize プラグイン

Autoptimize」は定期的に溜まるキャッシュを削除しましょう。

 

\Autoptimizeの使い方手順/
  1. 設定画面上部分にある「Autoptimize」を押す。
  2. キャッシュを削除を押すと設定画面に切り替わります。
  3. 画面下の変更の保存とキャッシュを削除を押せば完了です。

 

キャッシュを削除すれば、最適化は完了です。

 

キャッシュの削除をやりすぎるとサーバーに負荷がかかるので使いすぎ注意!

目安は、1日1回です。

 

Autoptimizeで不具合が起きた場合

autoptimize プラグイン

Autoptimize」は、ソースコードを変更するのでエラーが起こりやすいです。

 

  • デザインが崩れる。
  • 他のプラグインと干渉して不具合が起こる。

 

こういった不具合が起こった場合の対処法を把握しておきましょう。

ページの更新がされない

autoptimize プラグイン

ページの更新がされない場合は、キャッシュを削除しましょう。

キャッシュが溜まった状態だと、変更前のデータが残っている場合があります。

この場合はキャッシュを削除することで、古いデータが消えて更新されたページが表示されます。

デザインが崩れる

autoptimize プラグイン

デザインが崩れた場合は、「JavaScript」か「CSS」の最適化設定が影響しています。

 

\こういった不具合が起こった場合/
  1. 「JavaScript」の最適化をOFF
  2. キャッシュの削除
  3. 不具合の起こったページを確認する。
  4. 「CSS」の最適化をOFF
  5. キャッシュの削除
  6. 不具合の起こったページを確認する。
  7. ・・・

 

こんな感じで、設定一つ一つOFFにして、どの設定が悪影響を及ぼしているかの確認を行います。

こうすることで、不具合を解消することができます。

まとめ

Autoptimize」を使えば、ソースコードの最適化を行うことができます。

最適化をすることでページの表示速度を上げることができ、より使いやすいブログにすることができます。

他にもサイトの最適化をする方法はまだあります。

 

\WordPressの高速化/

 

うまく活用してみてください。

最後まで見ていただき、ありがとうございました。
 

ABOUT ME
りゅうのすけ
高校卒業後、地元香川で就職、一度転職を経て現在はブロガーとして活動してます。 投資をしたり、MLMに騙されそうになった経験をもとに、ブログを書いています。
PS.

記事が有益だなと思った方は、サポートしていただけるとやる気出ます。
 

\1円からのドネーション/

仕事依頼

 

\WordPress開設依頼/

公式LINE

 

\公式LINEもやってます/
公式LINE無料プレゼント

 

  • ワンクリックで登録可能
  • 個人情報はこちらからわからないようになっているのでご安心を

 

こんな人におすすめ
  • ブログを進めていく上でわからないことがある
  • 設定など誰か相談できる人が欲しい
  • 記事ネタに困った時に情報収集したい
  • ブロガー仲間が欲しい

 
困っていることなど直接相談できる場所になってますので、登録しておくといいですよ!
 

登録者特典

 

公式LINE@無料プレゼント
  1. 限定公開記事の共通パスワード配布
    • ブログ内の限定公開記事のパスワードを配布してます。
  2. サイト作成依頼クーポンコード
    • サイト作成依頼時に使えるクーポンコードを配布します。
  3. ブログスターターキット
    • ブログに必要な便利ツール、イラストなど随時更新
  4. 完全個別無料相談
    • ブログについて、1日1人限定で無料相談を受けてます。
      (営業を仕掛けるのはやめてください。)

 

\友達追加しますと、下記のメニューが表示されます。/
公式LINEリッチメニュー

 
各ボタンをポチポチ押すことで欲しい情報だけで情報を取得できるので便利ですよ!