WordPress

【最適化プラグイン】AutoptimizeでHTML・CSS・JavaScriptを圧縮しよう!

今回の記事ではページの表示速度を速めるプラグインである「Autoptimize」について紹介していこうと思います!

 

ページの表示速度が遅いとそれだけでページの離脱に繋がりますからね。

そんなもったいないことはされないようにこちらで最善の努力が必要です。そしてそのために「Autoptimize」というプラグインを使って表示速度を速めよう!というのが今回の記事で行なっていくことですね。

 

読者の離脱はアクセスがなくなるだけでなく、検索順位の低下にもかなり影響しますのでなるべく離脱されないようにいきましょう!

 

というわけで今回の記事では

  • 「Autoptimize」とは
  • Autoptimizeのインストール・設定方法

なんかについてまとめてみました!

 

設定はすごく簡単なので安心してついてきてくださいね:)

Autoptimizeとはなんぞや。

まず「Autoptimize」とはなんぞやというところですね。

冒頭でも書きましたが簡単に言うと「ページの表示速度を速める」といったものです。

 

僕らがインターネット上のページを見る際にはダウンロードが毎回行われています。

ダウンロードというとソフトとかアプリとかのイメージが強いかもしれませんが、実はページを見る度に行われています。

 

なのであなたがこの記事を見る際にもダウンロードが行われていたのです。

 

イメージ図はこんな感じ。

なので画像や動画が多いとページの表示速度が遅くなります。

それだけダウンロードするデータが多いからです。

 

インスタなんかが読み込みが遅いのは画像をダウンロードしているからですね。

 

というわけでページの表示速度を速めるためには

ダウンロードするページのデータを軽くするということが必要になってきます。

 

そこで出てくるのが今回紹介するプラグイン「Autoptimize」です。

ページの表示速度を速めるために。

ページのデータ量を少なくするには

  • コード
  • 画像

の2種類がありますが「Autoptimize」はそのうちの1つであるコードを少なくするためのプラグインということになります。

 

ちなみに画像のデータを小さくするプラグインは以下の記事を参照してみてください。

EWWW Image Optimizerで画像を圧縮!設定方法や使い方について解説:)https://www.youtube.com/watch?v=kJS4txJFw-U ブログやサイトを訪れたときに 「この...

 

さてさてではでは!

「Autoptimize」のインストール・設定方法について解説していきますね!

Autoptimizeのインストール方法。

まずは「Autoptimize」のインストール方法です。

 

①WordPressのプラグインの新規追加から「Autoptimize」を検索してインストール。

インストールが終わったら「有効化」も忘れずに!

 

プラグインのインストールについては以下の記事で詳しく話しているので見てみてくださいね。

 

【初心者向け】WordPressのプラグインのインストール方法について解説!https://youtu.be/mwKBEY7HZxk プラグインってよく名前を聞くけど なんなのかよく分からないしインス...

Autoptimizeの設定方法!

では続いて「Autoptimize」の設定方法です!

色々設定するところがありますが基本的に図の通りにやっていただけたらOKなので間違えないようにゆっくりやっていきましょう!

 

① WordPressのプラグインの欄から「Autoptimizeの設定」をクリック。

 

② このような画面になるので右上の「高度な設定を表示」をクリック。

 

③ すると一気にこのような欄がたくさん出てきます。

 

では1つずつ解説していきますね!

 

HTMLの設定

まずは「HTMLの設定」です。

 

① 「HTMLコードを最適化」にチェックを入れます。

この設定をすることでHTMLファイルを圧縮してくれるようになります。

 

JavaScriptの設定

続いて「JavaScriptの設定」です。

 

① 「JavaScriptコードの最適化」にチェックを入れます。

この設定をすることでJavaScriptファイルを圧縮してくれるようになります。

 

CSSの設定

次に「CSSの設定」です。

 

① 「CSSコードの最適化」にチェックを入れます。

この設定をすることでCSSファイルを圧縮してくれるようになります。

 

CDN・キャッシュ・その他の設定

最後に「CDN・キャッシュ・その他の設定」です。

 

① 「CDN・キャッシュ・その他の設定」ですが基本的にデフォルトのままでOKなのでそのままにして「変更を保存してキャッシュを削除」をクリックしましょう。

 

 

以上で「Autoptimize」の設定は終わりです!

 

また最後に動作確認を行いましょう。

特に「JavaScriptファイル」は不具合が出やすいので注意が必要です。

きちんとトップページを表示してデザインが崩れているところがないかなど確認していきましょう!

表示速度を速めて離脱を防ごう!

というわけで表示速度を速めるプラグイン「Autoptimize」について解説してきました!

 

ブログを運営していくにあたって表示速度を速めるのはかなり大事な部分となるので、なるべく早く設定してユーザーの離脱を防いでいきましょう!

 

最後までお読みいただいてありがとうございました:)

【蒼乃だいの公式メールマガジン(無料)】青春大学自由学部。