プラグイン

プラグインAutoptimizeの設定方法と使い方!サイト表示速度を改善しよう!

訪問しようとしてクリックしたサイトがいつまで経っても読み込み中で表示されない…面倒くさいから別のサイトを見よう!

と他のサイトに行ってしまった経験。

誰もが1度や2度はあるのではないでしょうか?

これが自分のブログで起こってしまったら大変…という事で自分のブログのサイト表示速度は改善しておくに越した事はありません。

ここで紹介するWordpressプラグイン、AutoptimizeはブログのHTMLやCSSを最適化して表示速度を手軽にUPさせてくれる優れものなのです。

ブログの表示速度を確認してみよう!

ブログの表示速度(URLがクリックされてからブログが読み込まれて表示される速度)はとても大事です。

これが遅いと訪問者が読み込み中に別のサイトに行ってしまう可能性が上がります。

Googleが示しているデータによると、サイトが完全に表示されるまで3秒以上かかってしまうサイトは53%ものユーザーが直帰してしまうそうです。
(ソース:Find out how you stack up to new industry benchmarks for mobile page speed

また2018年の1月の話ですが、サイトの表示速度をページランクの決定の要素にするという事をGoogleが発表しています。
(ソース:Using page speed in mobile search ranking

 

つまりユーザビリティの観点からも、SEOの観点からもブログの表示速度は速くて損はないのです。

という事で現状把握が第一。

次のサイトでは表示速度を調べたいサイトのURLを入力する事で表示速度が分かるようになっています。

貴方のブログの表示速度もチェックしてみましょう!

PageSpeed Insights

 

ちなみにこのブログは…

【モバイルでの表示速度】

モバイルでの表示速度「下の上」というところでしょうか。

 

【パソコンでの表示速度】

パソコンでの表示速度「中の上」と言っていいのかな?パソコンでの表示速度は中々です。
田村カツオ
田村カツオ
表示速度の対策は結構してて、モバイルも一時は80点くらいだったのですが今はかなり落ちてしまってますね。

特別何かしたという事は無いのですが…

Autoptimizeの設定方法と使い方!

Autoptimizeはコードを自動で圧縮してくれるプラグイン。

Autoptimizeはコードを圧縮してくれる。

ページを読み込む際のスピードに関わっているのが「画像」「コード」です。

これら2つのデータ量が多いと読み込み(表示速度)が遅くなります。

これらのデータが軽ければ読み込み(表示速度)は速くなります。

サイトの品質を維持するのに必要なデータ量というのがあるので、データ量を削りまくればそれでいいという訳ではありませんが、無駄な(必要ではない)データがあるのならそれは削りたいところですよね。

画像についてはサイズを小さくしたり、許容範囲内で画質を落としたりすればデータ量は軽くなりますが、一つ一つやっていると時間がかかりすぎるので僕はEWWW Image Optimizerという画像のデータを最適化するプラグインの使用を推奨しています。

関連記事:EWWW Image Optimizerの設定方法&使い方!表示速度を改善しよう。

 

コードについては「データを軽くする」と言っても、素人では中々厳しいものがあると思いますし、必要な部分を削ってしまったらブログが真っ白になってしまうかも知れません。

そこで登場するのがプラグイン、Autoptimizeです。これは自動で画像のデータを圧縮(最適な形に)してくれる優れものなのです。

簡単な設定でサイトの表示速度が改善されますから、ぜひ導入しておきたいところですね。

田村カツオ
田村カツオ
という事で、次の章からAutoptimizeの設定方法について説明していきますね。

Autoptimizeの設定方法と使い方。

Autoptimize

まず、Autoptimizeをインストールして有効化しておいて下さい。以下、それが済んでいる前提で話を進めます。

Autoptimizeの設定方法なのですが、「ここにはチェックを絶対入れたい」という部分もありますが、使っているテンプレートやサーバー等で最適な設定が違ってきます。

チェックを一個外したり、つけたりするだけでページ表示速度が結構変わったりします。

下記の設定方法を参考にご自身でチェックを入れたり、外したりしてみて最適な答えを見つけてみて下さい。

①ダッシュボード画面左側のメニュー一覧から「設定」→「Autoptimize」と進みます。

(「プラグイン」→「インストール済みプラグイン」→「Autoptimize」→「設定」でも同じ画面に進めます。)


 

②「メイン」「追加」「さらに最適化」とタブが出ますが、まずは「メイン」から設定していきます。

HTMLオプション

HTMLオプションではHTMLという言語のコードについての設定をしていきます。

  • 「HTMLコードを最適化」にチェックを入れます。
  • 「HTMLコメントを残す」はチェックを入れても入れなくてもどちらでもOK。僕はせっかくなので入れています。

 

③少し下に進み「JavaScriptオプション」の設定をしていきます。

JavaScriptオプション

JavaScriptコードの最適化にチェックを入れましょう。ここでチェックを入れるのは基本的にはこの部分だけでOKです。後は好み。

 

③次に「CSSオプション」の設定をしていきます。

CSS
  • 「CSS コードを最適化」にはチェックを入れます。
  • 「データを生成 : 画像を URI 化」にもチェックを入れます。

 

④「CDNオプション」「キャッシュ情報」「その他オプション」についてはデフォルトのままで問題ないと思います。

その他の設定

 

⑤もし、ブログを運営していく中でWebフォントを使用していないのであれば、タブを「追加」に変え「googleフォントの削除」にチェックを入れます。

Googleフォントの設定

 

⑥Autoptimizeの基本的な設定は以上になります。

先ほども述べましたが、サーバーやテンプレートによって変わる部分も大きいので、一個一個試してみたりして、最適な設定を探してみるのも良いと思います。

終わりに。

プラグインAutoptimizeの設定方法と使い方について説明してきました。

(使い方と言ってもチェックを入れたり外したりして、最も表示速度が速くある組み合わせを探すだけ、と言ってしまえばそれだけなのですが…)

僕はブログが突然真っ白になってしまうリスクもあるキャッシュ系のプラグインは使用していないので、手軽にコードを圧縮して表示速度をスピードアップ出来るAutoptimizeはとてもありがたく思っています。

カツオ
カツオ
たった一つのブログで僕の人生は激変しました。

ずっと稼ぎ続けてくれるネット上の資産を構築するスキルを身につけた事がきっかけです。(詳しくはプロフィールで!)

今では複数のサイトを運営しアフィリエイト報酬を得たり、法人顧客のSEOコンサル等も行っており、副業の収入がサラリーマン時代の月収を超えています。

メルマガの中でその秘密について話しています。

現在、メルマガ登録者限定で初心者がブログアフィリエイトで月収10万円以上稼ぎ、インターネット上に資産を築く為のノウハウが詰まったテキストを無料でプレゼント中!

※僕のメルマガは無料で読んで頂く事が出来ますし、必要ないと感じたらいつでもボタン1つで解除が出来ます。



ABOUT ME
カツオ
毎日のシゴトを「魂レベル」で楽しむ僧侶×Webマーケター。インターネットを用いた人気メディア運営のハウツーを伝授するオンラインレッスンを行ったり、法人顧客に対してWebマーケティングのアドバイスを行っている。趣味は筋トレ、ムエタイ、英語の勉強。

COMMENT

メールアドレスが公開されることはありません。