(↑Pinterestでシェアお願いします!)

Autoptimizeプラグインの設定と使い方 – HTMLやCSS、JavaScriptを圧縮しサイトを高速化!

執筆者 | 更新日 2020年02月07日 | WordPressプラグイン | コメント0件

Autoptimizeとは?

Autoptimizeプラグインは、HTMLやCSS、JavaScriptのコードを縮小してくれるプラグインです。これらは、コードをいじれる方であれば手動で設定できるのですが、知識がない人が設定してしまうとサイトの外観が崩れてしまったりするので、その場合はこのプラグインをインストールしましょう。

関連記事表示スピードアップに効果的!EWWW Image Optimizerの設定と使い方」も記事の表示スピードアップに効果的です。

Autoptimizeを使うメリット

Autoptimizeを使うと、サイトを高速化することができます。それはなぜかというと、HTMLやCSS、JavaScriptのコードを圧縮することができるからです。コードを圧縮することで、サイトの表示スピードをアップさせることができます。表示速度が速まると、次のようなメリットがあります。

メリット#01. 検索結果の上位に表示される可能性が増す

Googleは、2018年にモバイルでの表示スピードもランキングシグナルに追加するということを発表しました。それだけ、表示スピードの重要性が高まっているので、ぜひAutoptimizeをインストールしてみてください。

メリット#02. クリック率が高まる

表示スピードが速まることで、クリック率も高まります。クリック率は、クリック回数÷表示回数×100で計算されますが、正確にはクリック回数というのはページにランディングしてくれた回数のことです。なので、クリックしてくれたけど、記事コンテンツのロード中に離脱してしまった人のことはカウントされていません。

記事の表示スピードが上がれば上がるほど、ユーザーの離脱が減るので、クリック率が高まります。

Autoptimizeの効果

GTmetrixというサイトで効果を検証してみました。Autoptimizeをインストールする前は、上の画面のスコアになっていました。

Autoptimizeをインストールして設定をしたら、このような結果になりました。「PageSpeed Score」は2ポイント、「YSlow Score」は8ポイント上昇しました。「Fully Loaded Time」は0.8、「Requests」は17減少させることができました。

Autoptimizeをインストールする

Autoptimizeを検索する

まずは、WordPressダッシュボードの「プラグイン」の「新規追加」から「Autoptimize」と検索をかけてみてください。

Autoptimizeをインストールする

そしたら、シンプルな「Autoptimize」を「今すぐインストール」します。

AutoptimizeのJS, CSS & HTMLを設定する

Autoptimize JS CSS HTMLの設定

それでは、設定をしていきましょう。プラグイン一覧から「設定」に行っても良いですし、WordPressのダッシュボードにある「設定」から「Autoptimize」に行ってもどちらでも構いません。

JavaScriptオプションの設定

AutoptimizeのJavaScript オプション

  • JavaScript コードの最適化
  • Aggregate JS-files?
  • インラインの JS を連結
  • <head> 内へ JavaScript を強制
  • Autoptimize からスクリプトを除外:
  • try-catch の折り返しを追加

このセクションでは、上記の6つの項目が設定できます。最初は「JavaScript コードの最適化」以外は、設定できなくなっていると思いますが、この項目にチェックを入れるとそのほかの項目が設定できるようになります。このセクションでは、「JavaScript コードの最適化」と「Aggregate JS-files?」、「インラインの JS を連結」の3つの項目にチェックを入れておきましょう。もし、「Aggregate JS-files?」と「インラインの JS を連結」にチェックを入れたことでサイトの外観が崩れてしまった場合は、チェックを外しておきましょう。

CSSオプションの設定

AutoptimizeのCSS オプション

  • CSS コードを最適化
  • Aggregate CSS-files?
  • インラインの CSS を連結
  • データを生成 : 画像を URI 化
  • CSS のインライン化と遅延
  • すべての CSS をインライン化
  • Autoptimize から CSS を除外

次は、CSSの設定ですね。ここも、JavaScriptの設定のセクションと同じように、「CSS コードを最適化」にチェックを入れると他の項目が設定できるようになります。このセクションでは、「CSSコードを最適化」と「Aggregate CSS-files?」、「データを生成 : 画像を URI 化」、「すべての CSS をインライン化」にチェックを入れます。

HTMLオプションの設定

AutoptimizeのHTML オプション

  • HTML コードを最適化
  • HTML コメントを残す

次に、HTMLの設定をしていきましょう。ここは、シンプルに「HTML コードを最適化」にチェックを入れるだけでOKです。

CDNオプションの設定

AutoptimizeのCDN オプション

CDNは、コンテンツデリバリーネットワークの略で、簡単にいうとサイトのデータの負荷を減らしてくれるサービスです。最近は、画像や動画などの容量の大きいデータが使われるようになってきているので、サーバーに負荷がかかって、同時にアクセスが大量に集まってしまうとサーバーがダウンしやすくなります。でも、CloudflareなどのCDNを使うことによって、WordPressをインストールしているサーバー(エックスサーバーなど)からはHTMLやPHPなどのデータだけがユーザーに送信され、画像や動画などのデータに関してはCloudflareが用意しているサーバーから送信されるようになります。しかも、CDNのサーバーはたくさんあるので、1ヶ所に集中するということがないため、安定してコンテンツを配信し続けることができるわけですね。

この項目では、Cloudflareを利用しているのであれば、設定は必要がありません。でも、CDNを利用していてそれを有効化したいのであれば、ご自身で調べてそのURLを入力しておきましょう。

キャッシュ情報

Autoptimizeのキャッシュ情報

この項目に関しては、設定は必要ありませんね。

その他のオプションの設定

Autoptimizeのその他のオプション

  • 連携されたスクリプト / CSSを静的ファイルとして保存
  • Minify excluded CSS and JS files?
  • ログイン中のユーザーも最適化しますか?

最後の項目では、上記の3つの項目が設定できるようになっています。デフォルトで全部にチェックが入っていますが、そのままでOKです。

AutoptimizeのImages設定

Autoptimizeの「Images」設定

  • Optimize Images
  • Lazy-load images?

「Images」では、2つの項目が設定できます。でも、チェックを外したままでOKだと思います。2つ目の「Lazy-load images」というのは、画像を遅延して表示してくれるというものです。ここでチェックを入れてもOKですし、画像を遅延してくれるプラグインとしてa3 Lazy Loadというのがあるので、そちらを使用してもOKです。Autoptimizeよりも細かい設定ができるのでお勧めです。

Autoptimizeの追加設定

Autoptimizeの「追加」の設定

  • Google Fonts
  • 絵文字を削除
  • 静的リソースからクエリー文字列を削除
  • サードパーティーのドメインに事前接続する(上級ユーザー向け)
  • 非同期 JavaScript ファイル(上級ユーザー向け)
  • Optimize YouTube videos

最後は、「追加」の設定です。上記の6つの項目が表示されています。この内、「Google Fonts」と「絵文字を削除」、「静的リソースからクエリー文字列を削除」を設定することをお勧めします。「Google Fonts」では「Google フォントの削除」か「Combine and link in head (fonts load fast but are render-blocking)」にチェックを入れましょう。僕は、「Google フォントの削除」で良いと思います。というのも、Googleフォントはファイルが大きいからです。中でも、日本語の場合はよりファイルが大きくなるので、表示スピードが遅くなる原因になります。

「絵文字を削除」は、ロード時間が長くなる原因になるのでこれにもチェックを入れておきます。最後は、「静的リソースからクエリー文字列を削除」ですね。GTmetrixなどのページスコアを算出してくれるサービスを使って、アドバイスとして「Remove query string from static resources.」という文章が表示されたことがあるかもしれません。それが、この項目にチェックを入れることで解決できます。

まとめ

Autoptimizeを使うことで、表示スピードアップが期待できます。今回ご紹介した設定で利用してみてください。ただ、設定項目によってはサイトの外観を崩してしまうことがあるかもしれませんので、その場合はチェックを外して確認してみてください。

KohsukeNemoto.comニュースレターに参加しませんか?

あなたがニュースレターに登録すると、、、

  • 週に1,2回程度のニュースレター
  • 有料販売している5コース(4,900円相当)
  • 新着有料コースの無料提供(不定期)

無料で受け取れます。右(スマホの方は下)のフォームにお名前とEメールアドレスを登録し、無料でニュースレターと特典をお受け取りください。

0コメント

コメントを提出

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Elementorの使い方を"無料"で学びませんか?

プロのようなランディングページが作れるElementorの使い方が無料で受講できます。