プラグイン

Autoptimizeの使い方と設定方法|コード最適化で表示速度改善するプラグイン

alt=表示速度改善 高速化 プラグイン Autoptimize

ウェブサイトや記事(コンテンツ)の表示速度が遅いのは致命的な問題です。

そこで今回はコードを圧縮して表示速度改善に期待できるプラグイン「Autoptimize」をご紹介していきます。

こんにちは。WordPressテーマ研究家SHINです。

 

表示速度が遅くなると、基本的に以下3つのデメリットが生じる恐れがあります。

表示速度低下によるデメリット

訪問ユーザーの回遊率低下・滞在時間低下・離脱率上昇

ユーザビリティ低下によるSEO評価低下

検索結果順位の下降(ウェブサイト・コンテンツ)

 

そこで表示速度が遅くなる主な要因は以下4つ。

表示速度が遅い原因

記事(コンテンツ)で画像・GIF・アニメーション・スライドショーが多い。

インストールしているプラグイン数が多い。

ウェブサイトに対してサーバパフォーマンスが衰えている。

コード(HTML・CSS・Javascript)の量が多い。

 

今回ご紹介する「Autoptimize」は、コード(HTML・CSS・Javascript)を圧縮して最適化してくれるWordPressプラグイン。表示速度が遅くなる原因の一つを改善してくれる非常に頼りになるツールです。

ただコード圧縮するだけではなく、他にも表示速度を最適化する機能があります。

ウェブサイトや記事(コンテンツ)の状態によって劇的に改善する期待があるので、ぜひ使っていきましょう。

 

では詳しく使い方と設定方法を解説していきます。

 

 

Autoptimize表示速度改善機能

WordPressプラグイン「Autoptimize」では、ザックリ以下4つの最適化機能があります。

Autoptimize最適化機能

HTMLコードを圧縮最適化

CSSコードを圧縮最適化

Javascriptを圧縮最適化

画像を「遅延読み込み」する

各機能全てチェックを入れるだけの設定で稼働するので、非常に簡単で効率的に表示速度を改善できます。

 

 

Autoptimizeインストール方法

 

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

alt=Autoptimize インストール

 

 

Autoptimize使用上の注意点

Autoptimizeをインストールして設定に入る前に、以下2点は注意しておきましょう。

 

まずはバックアップ!

Autoptimizeは、コード(JavaScript・CSS・HTML)を圧縮最適化するプラグインですので、画像・レイアウト・デザイン・ショートコードタグなど型崩れやエラーを生じる可能性がゼロではないということです。

ですので、まずは「バックアップを取る」ことをおすすめします。

参考記事WordPressでバックアップを取る4つの方法(初心者向け)

 

一部プルダウンリンクが開かなくなる?

ヘッダー周辺に「グローバルメニュー」という下層ページを表示するプルダウン式メニューを設置している場合、またはサイドバーにもカテゴリ一覧を表示して、その下層ページを表示しているケースもあります。

その「下層ページが開かない!」場合があるというトラブル・・・。

もし発生した場合の解決策は、「JavaScript設定」にあります。

 

Autoptimize5

JavaScriptオプションの<head> 内へ JavaScript を強制という項目のチェックを外す

デフォルトでは外れているので、チェックを入れていなければ問題ありません。

 

 

Autoptimize設定方法

ではさっそくAutoptimizeの設定画面を開きましょう。

 

JavaScriptオプション

alt=Autoptimize js,CSS&HTML設定
SHIN
一つ目のチェックは、JavaScriptコードを記述しているファイルの余白や改行などを削除して圧縮最適化します。

二つ目のチェックは、リンクされたすべてのJSファイルを集約して圧縮最適化するので、チェックを入れておきます。

残りのチェックはデフォルトのままで大丈夫です。

 

CSSオプション

alt=Autoptimize CSSオプション設定
SHIN
一つ目のチェックは、CSSコードを記述しているファイルの余白や改行などを削除して圧縮最適化。

二つ目のチェックは、リンクされたすべてのCSSファイルを集約して圧縮最適化。

三つ目のチェックは、HTMLコード内にあるCSSコードを連結させる機能。これら全てチェックしておき、以外の設定はデフォルトの通りで大丈夫です。

 

HTMLオプション

SHIN
HTMLオプションは、ファイル内HTMLコードの最適化のみチェックして設定します。

 

Images

alt=Autoptimize images設定
SHIN
Imagesの設定では、画像遅延読み込み機能のみチェックを入れます。その他はデフォルト設定で大丈夫です。

 

追加

alt=Autoptimize 追加設定
SHIN
Google Fontsは、使用している場合に非同期で読み込む設定をおすすめします。未使用の場合はGoogleフォントの削除にチェックして、より最適化した方が良いですね。

また絵文字を削除もチェックを入れます。絵文字は使いません・・よね?

 

以上でAutoptimizeの機能設定は完了です。

「さらに最適化」「critical css」は、プラグインAutoptimizeをパワーアップさせる有料オプションを紹介されていますが、僕は正直そこまで費用対効果は見込めないと判断しているので、全てスルーしています。

 

 

まとめ

今回はコード圧縮による最適化で表示速度を改善するプラグイン「Autoptimize」をご紹介しました。

ps

プラグインに頼る前に、記事(コンテンツ)は必要最低限のコード記述に心がけたり、「カスタムCSS」への追加記述を注意することも必要です。

特にカスタマイズ系のコードは、大量のコード記述になることが多いので要注意ですね。

最後に。WordPressで作業が終了したら「キャッシュ削除」をしておくのを忘れずに行っておきましょう。

\ 記事はお役に立ちましたか? /

  • この記事を書いた人
  • 最新記事
SHIN

SHIN

WordPressテーマ研究家のSHINです。WPテーマとコーヒーをこよなく愛し、日々マウスをカチカチ!キーボードをパチパチ!しながら研究をしている人。

-プラグイン
-,

© 2020 WordPress theme NAVI