当サイトは広告により収益を得ています。
どうも、ゼロから始めるマンです。
ワードプレスでブログを運営しています。
読み込み速度が高速化するために日々工夫しています。
なかなか高速化できなかったのですが、「Autoptimize」を使ったらモバイルの読み込みがとても早くなりました。
今回は、そのプラグイン「Autoptimize」の設定方法について紹介します。
Autoptimizeとは
Autoptimizeを使用すると、サイトの最適化が非常に簡単になります。 スクリプトとスタイルを集約、縮小、キャッシュでき、デフォルトでページヘッドにCSSを挿入しますが、重要なCSSをインライン化し、集約された完全なCSSを延期し、スクリプトをフッターに移動して延期し、HTMLを縮小します。 画像を最適化（さらにWebPに変換）および遅延読み込み、Googleフォントの最適化、非集約JavaScriptの非同期化、WordPressコア絵文字の削除などを行うことができます。 そのため、すでにHTTP / 2を使用している場合でも、サイトのパフォーマンスを改善できます。 Autoptimizeを各サイトの特定のニーズに合わせて調整できるようにするための広範なAPIが利用可能です。
つまり、画像やスクリプト（HTML、CSS）などを最適化するプラグインです。
このプラグインを利用するとページの読み込みが早くなります。
私は他のプラグインと組み合わせて読み込み速度が20ほど上がりました。
次は設定方法について紹介します。
Autoptimizeの設定方法
「Autoptimize」の設定する主な流れは以下の通りです。
「Autoptimize」の設定方法は簡単でプラグインをインストールして必要なチェックボックスにチェックを入れれば完了です。
詳細は以下で説明します。
プラグインをインストール
1.ワードプレスの設定画面で「プラグイン」をクリックします。
2.新規追加というボタンが左上にあるので、それをクリックします。
3.右上の検索ボックスで「Autoptimize」と検索します。
4.インストールしたプラグインを有効化します。
プラグインの設定を行う
「Autoptimize」の主な設定は以下の3つがあります。
- JavaScript
- CSS
- HTML
設定できる箇所も多いですが、基本的には私が行っている設定で問題ないと思います。
詳しい人は必要に応じて設定を変えてみて下さい。
それぞれ、私が行っている設定は以下で紹介します。
JavaScript オプション
CSS オプション
HTML オプション
キャッシュをクリアする
設定が終わったら設定を保存してキャッシュをクリアしたら完了です。
キャッシュをクリアする方法は管理画面にログインすると上のバーに「Autoptimize」という場所があるため、それをクリックします。
設定を保存時に「変更を保存してキャッシュを削除」を押した場合は、このステップは必要ありません。
簡単に高速化できる
上記で設定方法を紹介しましたが、これだけで簡単に高速化できます。
スクリプト圧縮系はたくさんありますが、このプラグインを使っておけば間違いないと思います。
私は、この高速化プラグインのスクリプト圧縮が効果絶大でモバイルの読み込み速度がとても上がりました。
グーグルの提供している「Page Speed Insight」でのモバイル読み込み速度が20上がったのはほぼこのプラグインのおかげです。
皆さんもぜひ使ってみて下さい！
まとめ
今回は、読み込み速度を高速化する「Autoptimize」の設定方法について紹介しました。
「Autoptimize」の主な設定は以下の3つがあります。
- JavaScript
- CSS
- HTML
このプラグインは他にも設定がありますが、この3つの設定を行えば高速化できます。
プラグインのため、簡単に設定できて効果は絶大です。
ページの読み込み速度が遅くて悩んでいる人は是非使ってみて下さい！
