Autoptimizeの設定と使い方-wordPressプラグイン

ABOUTこの記事をかいた人

イクミヤ

1987年2月生まれ。大阪在住。
このブログは2017年5月から運営、主にワードプレスやSEOについて書いています。フォローして頂ければ幸いです。

スポンサーリンク

どうも!イクミヤです!

Autoptimize(オートオプティマイズ)はHTML,CSS,JavaScriptを最適化してウェブサイトの高速化の手助けをしてくれるプラグインです。

サイトスピードは1秒遅くなるだけで、ページビューが11%下がる、カスタマー満足度が16%下がる、コンバージョン率が7%下がるという結果が出ています。サイト運営に必須のサイトスピード改善プラグインを解説していきます。

ウェブサイトスピードを確認

GTmetrix

GTmetrixはGoogleのPage Speed InsightsとYahoo のYSlowのスコアを同時に計測することができるツールです。

タブを開くと遅くしている原因を表示してくれます。

Page Speed Insights

Page Speed Insightsはグーグルが開発したスピードサイトで当サイトが1番使用していたサイトです。

Page Speed Insightsはアルファベット順のシンプルな評価表示になりますが下にスクロールすると改善が必要な個所を表示されると共に改善方法を教えてくれます。

Pingdom

Pingdomは参考程度に使用していたサイトですが読み込み速度、リクエストにかかる時間をグラフにて表示してくれます。

Pingdomは元々ウェブモニタリングを行う企業だけあって、各解析は非常に信頼出来るものです。

Autoptimizeの設定

Autoptimizeをインストールすると設定に「Autoptimize」が追加されるのでクリックしましょう。

上記画像の通りHTMLオプション,JavaScriptオプション,CSSオプションを設定していきますが、自サイトに合った設定をするために右上の「高度な設定を表示」クリックしましょう。

スポンサーリンク

HTMLオプション

HTMLの最適化:HTMLを最適化します。推薦

HTMLの余分な空白や改行を削除して、サイトスピードが向上します。

HTML コメントを残す:ここは <!– ◯◯ –>のようなHTML内のコメントを消すかどうかの設定ですのでチェックは必要ありません。

JavaScript オプション

JavaScript コードの最適化:JavaScriptを最適化します。 推薦

<head> 内へ JavaScript を強制 :JavaScriptエラーがある場合のみチェックします。非推薦

インラインの JS を連結:HTML内のJavaScriptも最適化対象にするかどうかです。サイトによりけり

ここにチェックを入れるとサイト表示が崩れる可能性があります。チェックを入れて問題がないか確認しましょう。

Autoptimize からスクリプトを除外:最適化しないJavaScriptを指定します。非推薦

try-catch の折り返しを追加 :JavaScriptエラーがある場合にチェック。

CSS オプション

CSS コードを最適化:CSSを最適化する推薦

データを生成 : 画像を URI 化:CSS内の画像URLはデータスキーマURIにする。推薦

Google フォントの削除:ウェブフォントを使用していなければチェック推薦

インラインの CSS を連結:HTML内のCSSも最適化するサイトによりけり

CSS のインライン化と遅延:AutoptimizeのCSSを遅延読み込みさせる。非推薦

ここにチェックを入れるとサイト表示が崩れる可能性があります。チェックを入れて問題がないか確認しましょう。

すべての CSS をインライン化:CSSをインラインするサイトによりけり

ここにチェックを入れるとサイト表示が崩れる可能性があります。チェックを入れて問題がないか確認しましょう。

Autoptimize から CSS を除外:基本的に無視。

CDN オプション

CDNを利用している方はURLを入力すると、他のサーバに負荷を分散させ読み込み速度が向上します。

Autoptimize 不具合

Autoptimizeはサイトスピードが向上する素晴らしいプラグインですが、少なからず不具合がおきる可能性があります。サイトの表示が崩れてしまったりユーザービリティが損なわれるので自サイトに合った設定が必須です。

サイトの表示が崩れてしまった時に以下の項目にチェックが入っているか確認しましょう。

スポンサーリンク

この項目にチェックを入れると不具合が起きる可能性があるので、一つ一つチェックを入れて不具合の原因を調べることを勧めます。

  1. インラインの CSS を連結
  2. CSS のインライン化と遅延
  3. すべての CSS をインライン化
  4. インラインの JS を連結
  5. <head> 内へ JavaScript を強制

サイトスピードの高速化でアクセスアップ

2017.08.11

スポンサーリンク

コメントを残す

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