プラグイン

Autoptimizeの使い方!HTMLやCSSを圧縮してくれるプラグイン

ういうい、北っちです。今回はブログの表示速度をアップさせることが出来るプラグインAutoptimizeの設定と使い方を解説するよ。

読者さんは時間にシビア。

ブログの表示速度が遅いと「まだこのページ開かない・・・別のとこいこっと。」って読者さんがあなたのブログを閉じちゃうんだよね。だから、少しでも表示速度は早いほうが「読者さんに喜ばれるブログ」になるのだ。

その表示速度をAutoptimizeは改善してくれる便利なプラグインなんだよ。

この記事でわかること
  • Autoptimizeの設定方法
  • 実際にプラグインを入れた場合の表示速度が改善されるのか

Autoptimizeはどんなプラグイン?

Autoptimizeはブログの表示速度をアップしてくれるプラグイン。

Autoptimizeはブログの初心者が手を付けづらい「プログラミングのコード(HTMLとかCSSとかJAVAなど)」を自動で圧縮してくれるというもの。

ブログ内のデータを圧縮してスッキリさせると、ページの表示速度はあがります。

この初心者が難しいと感じるところを「Autoptimize」がやってくれるっていうのがすごくありがたいポイント。

北っち
北っち
プログラミングのコードはいじるの怖いしね。。

お使いのテンプレートによっては不具合が出たり、レイアウトが崩れる可能性があります。

Autoptimizeのインストール方法

WordPress管理画面左メニューから「プラグイン」⇒「新規追加」をクリック。

プラグイン検索で「Autoptimize」と入力。一番左上に表示されるので「今すぐインストール」をクリック。

「有効化」ボタンをクリック。

インストールすると、こんな感じの表示が出るけど気にしないでOK。

Autoptimizeの設定手順

ここからはAutoptimizeの設定をしていきます。実際に北っちがやってみて、「ページの表示速度が改善された」設定を解説するね。

「設定」⇒「Autoptimize」をクリック。

右上にある、「高度な設定を表示」をクリック。

HTMLオプション

HTMLコードを最適化にチェック。これをすることでHTMLファイルが圧縮されます。

2つ目の「HTMLコメントを残す」はチェックを入れないままでOK。基本的にコメントは不要なものなので。

JavaScriptオプション

チェックする項目
  1. JavaScriptコードの最適化⇒チェック
  2. Aggregate JS-files?⇒チェック
「インラインの JS を連結」

HTML内のJavaScriptも最適化の対象にするかどうかの設定。ブログの表示が崩れる可能性があるので、問題がないか確認して試してみてね。

「head内へJavaScript を強制」

基本チェックはしない。JavaScriptエラーがある場合のみチェックを入れる

「Autoptimize からスクリプトを除外」

基本チェックは入れません。最適化しないJavaScriptを指定する項目です。

「try-catch の折り返しを追加」

基本チェックは入れません。JavaScriptエラーがある場合にチェックを入れます。

CSSオプション

チェックする項目
  1. CSSコードの最適化⇒チェック
  2. Aggregate CSS-files?⇒チェック
  3. インラインのCSSを連結⇒チェック
「データを生成:画像をURI化」

画像をURI化するかどうか。気にしなくてOK。

「CSSのインライン化と遅延」

AutoptimizeのCSSを遅延読み込みさせる項目。

「すべてのCSSをインライン化」

チェックしなくてOK。

「AutoptimizeからCSSを除外」

何もしなくてOKです。

CDNオプション、キャッシュ情報、その他オプション

この3項目はそのまま。

全部設定が終わったら「変更を保存してキャッシュを削除」をクリック。これは必ずやってね!

動作確認を忘れずに。

設定が完了したら一度ブログを開いてみて、レイアウトは大丈夫か、気になるところはないかチェック。

もし不具合がある場合は設定画面に戻って「コードの最適化」のチェックを外しましょう。これで設定前の状態に戻ります。

【実測】実際にページの表示速度は改善されたのか?

さて、設定はここで終了なんだけど「これで本当に表示速度変わったの?」っていうのが気になるよね。

そこで、北っちのブログを使って実際に「Pagespeed Insights」で計測してみました。

Autoptimize導入前

パソコン
モバイル
北っち
北っち
ひどいな・・・

Autoptimize設定後

パソコン
モバイル
北っち
北っち
パソコン、モバイルどちらも表示速度は早くなった!

とりあえずはプラグインを導入して設定しただけで、表示速度はちゃんと改善されました。

テンプレートのCSSやJSファイルを修正したら再度設定すること

Autoptimizeはもとのデータとは別にファイルを作成しているので、大元のCSSやJSファイルを修正、変更したらもう一度Autoptimizeの設定をすること。

意外と忘れがちなので注意。

まとめ

ブログの表示速度はPV数や読者さんの滞在率、離脱率に関わるのもの。

もちろん記事の内容をしっかり書いてこそのブログなんだけど、こういっった細かい気配りもブログを良くするための大事なポイントなので是非取り入れてみてね。

ABOUT ME
北っち
趣味や興味のあることをテーマにした「趣味ブログアフィリエイト」を実践して毎日まったり生活中。
ブログアフィリエイトで月10万円稼ぐために必要な準備、作業、ポイントをまとめました。 ⇒詳細はこちらから
趣味ブログのアクセス、テーマ、報酬アップに必要なことをすべて詰め込んだ教科書です。 ⇒詳細はこちらから
【無料】趣味ブログで楽しく稼ぎ続けるための特別マニュアル

「アニメが好き!」「ニコ厨で毎日ニコ動見てる」
「音楽聞いたり、ライブが好き」「ゲーム大好き。新作プレイしたい」

でも・・・好きなだけやる時間とお金がないorz

めんどくさい仕事やらバイトは楽しくない。どうせやるなら楽しいことでお金を稼ぎたい。

ほんとそれ。なのでそんな自分の好きなことで楽しくお金と時間を手に入れる方法をお届けするよ。

⇒ダウンロードはこちら

◆こちらの記事もおすすめ◆