サイト表示速度改善に超便利なプラグイン【Autoptimize】

どうも、リュウセイです!

 

今回はサイトの表示速度改善に超便利なプラグインというテーマで記事を書いていきます。

 

過去記事「サイトの表示速度を改善させるために必要なこと」にてサイトの表示速度改善について解説しましたが、この記事ではAutoptimizeというプラグインを使って表示速度を改善させる方法についてご紹介していきます。

 

サイトの表示速度が遅いとどうなるのか?については、

 

  • 表示速度が1秒遅くなるごとに5~20%ほどアクセス数が減少する(と言われている)
  • ユーザビリティ低下によるSEO評価の低下
  • 検索順位を落とされる

 

など様々なデメリットがあります。

 

表示速度が遅くなってしまう主な原因は、

 

  • 記事(コンテンツ)内に画像・GIF・アニメーション・スライドショーが多用されている
  • インストールしているプラグインが多い
  • サーバパフォーマンスが悪い
  • コード(HTML・CSS・Javascript)に無駄な記述が多い

 

これらの原因が考えられます。

 

サイトの表示速度の測定には「Google PageSpeed Insights」というツールが便利で、Google安定の無料かつ登録不要で使えるツールです。

 

僕が実際「Autoptimize」を導入してみたところ、サイト表示速度スコアが20ほど数値アップしましたので、確かな効果が出るプラグインです。

 

今回はそのAutoptimizeの設定方法について解説していきますね。

 

 

Autoptimizeとは

 

Autoptimizeとは、「HTML・CSS・Javascript」のコードの無駄な記述を省くことによりコードを圧縮させて最適化してくれるWordPressプラグインです。

 

コードを圧縮してカロリー0にしてくれるので、表示速度改善において非常に頼りになる有能プラグインです。

 

コードの最適化の他にも、表示速度を改善させるための機能がいくつか備わっています。

 

 

Autoptimizeの機能

 

Autoptimizeの主な機能は以下の通りです。

 

  • HTMLコードの圧縮&最適化
  • CSSコードの圧縮&最適化
  • Javascriptの圧縮&最適化
  • 画像を「遅延読み込み」する

 

これらは設定にてチェックを入れるだけで簡単に動作します。

 

 

Autoptimizeのインストール

 

WordPressダッシュボードから「プラグイン」→「新規追加」で「Autoptimize」と検索してインストール&有効化しましょう。

 

こんなアイコンのプラグインです↓

 

 

Autoptimizeの使用前に必ずやること

 

Autoptimizeの設定を行う前に以下の点だけ注意しておきましょう。

 

バックアップを行っておく

 

Autoptimizeはコードを圧縮&最適化するプラグインなのですが、それ故に画像・レイアウト・デザイン・ショートコードタグなどが型崩れやエラーを起こしてしまう可能性もあります。

 

念のため設定前にWordPressのバックアップを取っておいた方が良いでしょう。

 

万が一エラーが発生してしまった場合でも、バックアップを復元することで元に戻すことが出来ます。

 

 

Autoptimizeの設定方法

 

それでは、Autoptimizeの設定に進みましょうか。

 

画像の通りにチェックを入れていくだけでOKです。

 

各項目の設定が終わった後は必ず下部にある「変更の保存(変更の保存とキャッシュの削除)」ボタンをクリックしましょう。

 

Javascriptの設定

 

 

<チェックを入れる項目>

「Javascriptコードの最適化」

「JS ファイルを連結する」

 

「<head> 内へ JavaScript を強制」にチェックを入れた場合は、一部プルダウンリンクが開かなくなるというエラーが発生する事があるようです。

 

プルダウンリンクとは、「▼」などのアイコンをクリックすることで隠れていたメニューが下に表示されるリンク(タブ)のことです。

 

ヘッダー周辺に「グローバルメニュー」という下層ページを表示するプルダウン式メニューを設置してある場合、そのメニューが開かなくなるエラーが発生することがあるようです。

 

もし発生してしまった場合は、「<head> 内へ JavaScript を強制」のチェックを外すことで解決します。

 

初期状態ではチェックは入っていないので、いじってなければ大丈夫です。

 

CSSの設定

 

 

<チェックを入れる項目>

「CSS コードを最適化」

「CSS ファイルを連結する」

「インラインの CSS も連結」

 

HTMLの設定

 

 

<チェックを入れる項目>

「HTML コードを最適化」

 

Imagesの設定

 

 

<チェックを入れる項目>

「画像の遅延読み込み (Lazy-load) を利用」

 

追加の設定

 

 

<チェックを入れる項目>

「Google フォント」の「webfont.js で非同期にフォントを結合して読み込む」

「絵文字の削除」

 

絵文字の削除は行いたい方だけで大丈夫です。

 

 

まとめ

 

以上でAutoptimizeの設定は終了です。

 

操作としてはチェックを入れていくだけなので簡単だったと思います。

 

今回はプラグインを使ってのサイト表示速度改善についてご紹介しましたが、プラグインもまたサイト表示速度に影響が出る一つの要素です。

 

理想としては、インストールするプラグインの数は少なくしておくことです。

 

プログラミングが得意な方は、プラグインを導入せずとも自分でコードを書ければ問題ないので、それが一番理想と言えます。

 

プラグインを使う他、「サイトの表示速度を改善させるために必要なこと」の記事で解説した方法も参考にしてみてください。

 

それでは、今回はこの辺で。

 

ありがとうございました。

 

チャオ(・∀・)!

 

コメントを残す

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