スポンサーリンク
どうも！イクミヤです！
Autoptimize（オートオプティマイズ）はHTML,CSS,JavaScriptを最適化してウェブサイトの高速化の手助けをしてくれるプラグインです。
サイトスピードは１秒遅くなるだけで、ページビューが11%下がる、カスタマー満足度が16%下がる、コンバージョン率が7%下がるという結果が出ています。サイト運営に必須のサイトスピード改善プラグインを解説していきます。
ウェブサイトスピードを確認
GTmetrix
GTmetrixはGoogleのPage Speed InsightsとYahoo のYSlowのスコアを同時に計測することができるツールです。
タブを開くと遅くしている原因を表示してくれます。
Page Speed Insights
Page Speed Insightsはグーグルが開発したスピードサイトで当サイトが１番使用していたサイトです。
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はサイトスピードが向上する素晴らしいプラグインですが、少なからず不具合がおきる可能性があります。サイトの表示が崩れてしまったりユーザービリティが損なわれるので自サイトに合った設定が必須です。
サイトの表示が崩れてしまった時に以下の項目にチェックが入っているか確認しましょう。
スポンサーリンク
この項目にチェックを入れると不具合が起きる可能性があるので、一つ一つチェックを入れて不具合の原因を調べることを勧めます。
- インラインの CSS を連結
- CSS のインライン化と遅延
- すべての CSS をインライン化
- インラインの JS を連結
- <head> 内へ JavaScript を強制
スポンサーリンク
コメントを残す