どうしたらいいのNAVI

どうしたらいいの?にお答えするサイト

【WordPress】ブログを高速化するプラグイン特集! 高速化の果てへ

      2015/11/07


WordPressでブログを高速化する上で、プラグインの導入は今や必須となっています。
ブログを高速化したいんだけど、色々と種類があり過ぎてブログを高速化するにはどうしたらいいのか・・・と悩んでしまう人も居るかもしれません。

 
ブログを高速化するプラグインと言っても、それぞれの特徴があったり、逆に機能が被ったりしてしまう事もあるため、プラグインを導入する上で、自分に適したプラグインは何か?どんな組み合わせが良いのか?と思う物です。

 
ブログを高速化するプラグインを簡単でわかりやすく、詳しく特集しましたので是非ご活用ください!

 

 
【Wordpress】ブログを高速化するプラグイン特集! 高速化の果てへ
 

 

ブログを高速化するプラグイン

ブログを高速化するプラグイン
ブログを高速化するプラグインとてしては、現在出ているプラグインではキャッシュ系のプラグインが主流となっています。

キャッシュ系のプラグインは、データベースやファイル、オブジェクトなどなど本来であれば一からサーバ上で処理して作らなければならないものを、何かしらの契機であらかじめ作っておく事で、サーバの処理時間などを短縮してブログのパフォーマンスを上げる物です。

また、HTMLやJavaScript、CSSなどをを縮小する事で、サーバと訪問ユーザーのパソコンやモバイルとの通信容量を削減する事で、通信時間を短くする効果もあります。

ページのヘッダー内で読み込んでいるJavaScriptやCSS等を遅延読み込みしたり、フッターで読み込むようにする事で、ページのレンダリングを妨げないようにし、ブログの閲覧ユーザーに対して早くコンテンツを表示できるようにするプラグインもあります。

このように、ブログを高速化するプラグインを利用する、あるいは組み合わせる事によって、Wordpressで運営されるブログをプラグインによって高速化する事が出来るのです。

ブログを高速化する上でオススメのプラグインが次のプラグインです。

  • W3 Total Cache
  • Head Cleaner
  • Autoptimize

 

それぞれ、どんなプラグインなのか、見ていきましょう。
 

 

 

 

キャッシュを使ってブログを高速化しよう! W3 Total Cache

【Wordpress】キャッシュを使ってブログを高速化しよう! W3 Total Cache
W3 Total CacheはWordpressのプラグインで、コンテンツのキャッシュを作ってくれるプラグインです。
W3 Total Cacheは英語での表記ですが、キャッシュ系の細かな設定を行う事が出来るため、非常に便利なプラグインの一つなのです。

 
W3 TotalCacheには有償版と無償版がありますが、無償版でも十分に使えます。

 
W3 Total CacheをWordpressにインストールする
W3 Total CacheはWordpressのプラグインなので、新規のプラグイン追加の手順でWordpressにインストールすることが出来ます。
インストールした後はプラグインの有効化をする事を忘れないようにしましょう。

 
W3 Total Cacheのインストールは次の手順が主流です。

  • Wordpressのプラグインの「プラグインを追加」の画面で「W3 Total Cache」と検索する
  • 検索で表示された「W3 Total Cache」を「いますぐインストール」ボタンを押してインストール

 

W3 Total Cacheの設定方法と使い方とは
W3 Total Cacheはブログ高速化の上で必要なサーバ側、ブラウザ側のキャッシュに関する設定を行う事が出来ます。

 
サーバー側ではアクセスがあった際にページを表示する上で必要なページやデータベースの検索結果、ページを構成するオブジェクトなどを作成する事でいちから記事を作成するのではなく、あらかじめ用意しておいた部品(キャッシュ)を利用する事でブログの表示速度を向上させます。

 
ブラウザ側での設定ではブログに訪問したブラウザに対してHTMLやCSS、JSファイル等をキャッシュして保持するよう促し、再訪問の際にキャッシュを利用する事でページ閲覧時の高速化を測る事が出来ます。また、ブラウザ側でキャッシュしたファイルをユーザーが閲覧する事でWordpressのサーバー側では負荷が軽減される事でもブログの表示速度を向上させる効果があります。

 
サーバやブラウザだけでなくCDNに関する設定を行う事が出来、W3 Total CacheをCDNと連携して色々なファイルを連携する事で、場所的に閲覧ユーザーから近いサーバーからコンテンツを提供する事でブログの表示速度を向上させる設定もあります。

 
W3 Total Cacheで設定できる項目は次の通りです。

  • 全体設定
  • ページキャッシュの設定
  • ソースの最適化設定
  • データベースキャッシュの設定
  • オブジェクトキャッシュの設定
  • ブラウザーキャッシュの設定
  • ユーザーエージェントグループの設定
  • リファラーグループの設定
  • CDNの設定
  • モニタリング設定
  • その他の設定

 

W3 Total Cacheで起こりやすい不具合
W3 Total Cache等のキャッシュプラグインを導入し、利用すると、動的コンテンツを配信するサイトやブログなどではキャッシュの制御が適正に行われていないと古い情報が画面上に残ってしまったり、JavaScriptが動作しなくなってしまったりなどの不具合を起こす事があります。

 
多くはツールによって起こる不具合ではなく、ブログ運営のスタイルに合っていない設定であったり、キャッシュファイルの削除期限であったり、キャッシュファイルの参照グループの設定が行えていなかったりする事が原因でブログで不具合を起こす事が多いです。

 
W3 Total Cacheでブログ上でよく起こる不具合としては次のようなものがあります。

 

  • レスポンシブデザインでモバイルとパソコンで同じ広告位置表示になってしまう

 
キャッシュを使ってブログを高速化するW3 Total Cacheについては「【W3 Total Cache】W3 Total Cacheの設定方法と使い方」で簡単でわかりやすく詳しく紹介しているのでチェックしていってくださいね。

 

 

 

データ通信を削減してブログを高速化! Head Cleaner

【Wordpress】データ通信を削減してブログを高速化! Head Cleaner
Head Cleaner は、WordPressのプラグインの一つで、それぞれのページを構成するソースを最適化して、サイト表示速度を向上してくれるプラグインです。

 
CSSやJavaScriptを最適化してコンパクトにしたり一つにまとめたりする事でサーバーとユーザーのデータ通信の量を少なくする効果があったり、WebブラウザとWebサーバのやり取りの回数や送るデータ量を減らすことで、サイトの構築を早くする効果があります。

 
Head Cleanerを導入するメリットは何と言っても、ブログを表示した時の速度が高速化される事でしょう。
また、SEO的な視点から見ても、検索エンジンに優良なブログ・コンテンツである事を伝えるシグナルを生む事が出来、検索エンジンからの流入を増加させる可能性を秘めている点でもメリットとして上げる事が出来ます。

 
Head Cleanerを適切な設定で運用する事で、ユーザーがブログを訪問した際にブログが表示されるまでにかかる時間が大きく削減される事や、CSSやJavaScriptを最適化して、読み込み位置を変更する事で、ページのレンダリングを高速化する事が可能なところも魅力的です。

 
Head Clearnerを導入するデメリットとしては、CSSやJavaScriptの特性によっては、正常な動作を行わなくなる可能性がある事です。
また、Head Cleanerは設定項目が多いため、慣れるまではどのような設定を行うと、ブログに対してどのような働きがあるか分かりづらい点です。

 
Head CleanerはWordpressのプラグインなので、新規のプラグイン追加の手順でWordpressにインストールすることが出来ます。
インストールした後はプラグインの有効化をする事を忘れないようにしましょう。

 
Head Cleanerのインストールは次の手順が主流です。

  • Wordpressのプラグインの「プラグインを追加」の画面で「Head Cleaner」と検索する
  • 検索で表示された「Head Cleaner」を「いますぐインストール」ボタンを押してインストール

 

Head CleanerではHTML、CSS,JavaScriptといったWordpress上のリソースに対するダイナミックな変更を可能にする機能があり、設定によってそれらの機能を最大限利用可能な状態にする事が出来ます。

 
Haed Cleanerで出来る設定は具体的に次の通りです。

  • CSSとJavaScriptをサーバ上にキャッシュする
  • <head> 内の JavaScript を、フッタ領域に移動
  • Google Ajax Libraries を利用する
  • XML宣言を付与
  • メタタグ “canonical” を追加
  • OGP(Open Graph Protocol) 対応のメタタグを追加
  • メタタグ “generator” を削除
  • リンクタグ “RSD” を削除
  • リンクタグ “wlwmanifest” を削除
  • IEコンディショナルタグを削除
  • メタタグ “Last Modified” を追加
  • “パラノイアモード” を有効にする。
  • デバッグモード
  • Java Scriptのフィルタによる対象外設定
  • <head>からフッタに移動するJavaScriptの設定

 

Head Cleanerでブログを高速化するお勧めの設定では、すでにWordpressでHead Cleanerをインストールしている前提で設定内容について紹介します。
Head Cleanerでブログを高速化する上でオススメの設定は次の通りです。

  • CSS と JavaScript を、サーバ上にキャッシュする :ON
  • CSS, JS を動的生成する。:OFF
  • CSS に適用するデフォルト media 属性:all
  • 複数の CSS を結合する : ON
  • CSS を最適化する : ON
  • CSS に含まれる画像の URL を、データスキーマ URI に変換する : ON
  • 複数の JavaScript を結合する : ON
  • JavaScript を小さくする : ON
  • フッタ領域の JavaScript も対象にする : OFF
  • <head> 内の JavaScript を、フッタ領域に移動 : ON
  • Google Ajax Libraries を利用する : OFF
  • XML宣言を付与 : OFF
  • メタタグ “canonical” を追加 : ON
  • OGP(Open Graph Protocol) 対応のメタタグを追加 : OFF
  • メタタグ “generator” を削除 : OFF
  • リンクタグ “RSD” を削除 : OFF
  • リンクタグ “wlwmanifest” を削除 : OFF
  • IEコンディショナルタグを削除 : OFF
  • “パラノイアモード” を有効にする : OFF
  • デバッグモード : OFF

 

Head Cleanerでブログを高速化するお勧めの設定では、すでにWordpressでHead Cleanerをインストールしている前提で設定内容について紹介します。
Head Cleanerでブログを高速化する上でオススメの設定は次の通りです。

  • CSS と JavaScript を、サーバ上にキャッシュする :ON
  • CSS, JS を動的生成する。:OFF
  • CSS に適用するデフォルト media 属性:all
  • 複数の CSS を結合する : ON
  • CSS を最適化する : ON
  • CSS に含まれる画像の URL を、データスキーマ URI に変換する : ON
  • 複数の JavaScript を結合する : ON
  • JavaScript を小さくする : ON
  • フッタ領域の JavaScript も対象にする : OFF
  • <head> 内の JavaScript を、フッタ領域に移動 : ON
  • Google Ajax Libraries を利用する : OFF
  • XML宣言を付与 : OFF
  • メタタグ “canonical” を追加 : ON
  • OGP(Open Graph Protocol) 対応のメタタグを追加 : OFF
  • メタタグ “generator” を削除 : OFF
  • リンクタグ “RSD” を削除 : OFF
  • リンクタグ “wlwmanifest” を削除 : OFF
  • IEコンディショナルタグを削除 : OFF
  • “パラノイアモード” を有効にする : OFF
  • デバッグモード : OFF

 

Head Cleanerの注意点
Head Cleanerの良くある不具合とは、Head Cleanerを導入する事でWordpress、Webツールの利用の兼ね合い、併用しているプラグインとの組み合わせによって起こる不具合の事を指します。

 
Head Cleanerはとても使い勝手がよく、簡単な設定一つでブログのパフォーマンスを上げてくれるのでとても助かるのですが、キャッシュ系やHTML,CSS,JavaScriptの無駄を省き最適化するという特性上、他のプラグインや記述されている内容によっては正常な動作をしてくれない事もあるので注意が必要です。

 
これはHead Cleanerが悪いとかそういう問題ではなく、Head Cleanerのようにダイナミックなソースの変更を書けるようなプラグイン全般に言える事です。

 
Head Cleanerの動作についての理解が乏しい事で、設定すべき項目が設定できていなくて起こる不具合もあれば、Head Cleanerそのものの処理が原因で他のプラグインが動作しなかったりと不具合の原因もまちまちです。

 
現在、Head Cleanerを導入する事で起こる良くある不具合は次のようなものがあります。

  • 導入初期の放置による不具合
  • Webツールの「Search Console」が使えなくなる事がある
  • プラグインの「Autoptimize」が動作しなくなる

 
Head Cleanerについては「【WordPress】データ通信を削減してブログを高速化! Head Cleaner」で簡単でわかりやすく、更に詳しく紹介しているのでチェックしていってくださいね。

 

 

 

 

HTML・CSS・JavaScriptを縮小するプラグイン Autoptimize

【Wordpress】HTML・CSS・JavaScriptを縮小するプラグイン Autoptimize
AutoptimizeはWordpressのプラグインの一つで、HTMLやCSS、JavaScriptといったリソースを縮小化し、ブログのパフォーマンスを上げてくれるキャッシュ系プラグインの一つです。

 
通常、ブログ運営者が作成するHTMLやCSS、JavaScriptはブラウザの表示には直接関係ない改行や余計な余白などが沢山使われていて、ブラウザの表示という観点からすると無駄にファイル容量が大きくなっています。

 
無駄にファイル容量が大きくなると、ブログを訪問しに来た閲覧者のモバイルや、パソコンに無駄な通信容量を使わせる事になるため、ブログのパフォーマンスが低下してしまうのです。

 
Autoptimizeは、Wordpressのブログを表示する上で直接関係の無い、スペースや改行などを削除し、縮小化する事で、訪問者のモバイルやパソコンに負担を掛けないようにしてパフォーマンスを上げる事に繋がります。

 
AutoptimizeはWordpressのプラグインなので、新規のプラグイン追加の手順でWordpressにインストールすることが出来ます。
インストールした後はプラグインの有効化をする事を忘れないようにしましょう。

 
Autoptimizeのインストールは次の手順が主流です。

  • Wordpressのプラグインの「プラグインを追加」の画面で「Autoptimize」と検索する
  • 検索で表示された「Autoptimize」を「いますぐインストール」ボタンを押してインストール

 
Autoptimizeの設定についてみていきましょう。
AutoptimizeはWordpressのブログ運営者の技術的な知識や理解度などから大きく分けると二つの設定を行う事が出来ます。

  • Autoptimizeの基本的な設定(初心者向け)
  • Autoptimizeの高度な設定(理解の深い技術者向け)

 

Autoptimizeの基本的な設定では、Autoptimizeを導入したWordpress上のHTML・CSS・JavaScriptの縮小化をするかどうかの設定を行う事が出来ます。

 
Autoptimizeの基本的な設定で行える事は次の通りです。

  • HTMLに関する設定
  • JavaScriptに関する設定
  • CSSに関する設定

 

Autoptimizeの高度な設定ではAutoptimizeを導入したWordpress上のHTML・CSS・JavaScriptの縮小化をするかどうかの設定に加え、JavaScriptやCSSに対して、縮小化の上で除外したい内容などについて設定することが出来ます。

 
Autoptimizeの高度な設定は、設定画面の「Show advanced settings」ボタンを押すと表示されます。
もし「Hide advanced settings」ボタンが表示されている場合は、すでに高度な設定を行う設定画面になっています。

 
基本的な設定では、全てのJavaScriptやCSSに縮小化が有効されるのに対し、縮小化の影響で動作が不安定になってしまったりする場合に高度な設定を行うと解決する事があります。

 
Autoptimizeの高度な設定として行う事が出来る設定は次の通りです。

  • HTMLに関する設定
  • JavaScriptに関する設定
  • CSSに関する設定

 

Autoptimizeの設定は、HTML、JavaScript、CSSの設定がありますので、それぞれのお勧めの設定について紹介していきます。
なお、Autoptimizeの設定は、「高度な設定」の設定画面に切り替え設定していきますので、高度な設定である事を念頭に設定内容を参考にしてください。

 
Autoptimizeのオススメの設定については次の順番で紹介していきます。

  • HTML
  • JavaScript
  • CSS

 
AutoptimizeにおけるHTMLのお勧めの設定について紹介します。
AutoptimizeのHTMLのお勧めの設定は次の通りです。

  • Optimize HTML Code? : ON
  • Keep HTML comments? : OFF

 
次にJavaScriptのお勧めの設定についてみていきましょう。
AutoptimizeのJavaScriptのお勧めの設定は次の通りです。

  • Optimize JavaScript Code?:ON
  • Force JavaScript in?:ON
  • Look for scripts only in?:ON
  • Exclude scripts from Autoptimize::(任意)
  • Add try-catch wrapping?:OFF

 
次はCSSのお勧めの設定についてみていきましょう。
AutoptimizeのCSSのお勧めの設定は次の通りです。

  • Optimize CSS Code?:ON
  • Generate data: URIs for images?:ON
  • Look for styles only in?:OFF
  • Inline and Defer CSS?:OFF
  • Inline all CSS?:OFF
  • Exclude CSS from Autoptimize:(任意)

 
HTML・CSS・JavaScriptを縮小するプラグイン Autoptimizeについては「【WordPress】HTML・CSS・JavaScriptを縮小するプラグイン Autoptimize」で簡単でわかりやすく、更に詳しく紹介しているので興味のある人はチェックしていってください。

 

 

 

 

スポンサーリンク


ブログを高速化するプラグイン特集! 高速化の果てへ あとがき

ブログを高速化するプラグイン特集! 高速化の果てへ あとがき
ブログを高速化するプラグインについて紹介しました。

 
それぞれのプラグインに役割や特徴、得意な事や不得意な事があるので、一つのプラグインだけでなくいくつかプラグインを組み合わせる事によってブログを高速化していく事が出来ます。

 
ブログを高速化するプラグインは他にも沢山あるので、ブログを使ってプラグインを高速化したいと考える人は、他のプラグインについても利用を検討してみてください。

 
ブログを高速化するプラグイン特集でも、良いプラグインや使い勝手の良いプラグイン、効果の高いプラグインなどがありましたらこの記事を更新してガンガン紹介して行こうと思います。

 
また、それぞれのプラグインの紹介に、当ブログでオススメの設定などがあればそれについてもどんどん紹介していくのでチェックしていってくださいね。

 
Wordpressのブログを高速化して、サクサク動く快適ブログを作っていってくださいね。

 

 

 

 

ブログを高速化するプラグイン特集! 高速化の果てへ まとめ

ブログを高速化するプラグイン特集! 高速化の果てへ まとめ
ブログを高速化するプラグインとてしては、現在出ているプラグインではキャッシュ系のプラグインが主流となっています。

 
キャッシュ系のプラグインは、データベースやファイル、オブジェクトなどなど本来であれば一からサーバ上で処理して作らなければならないものを、何かしらの契機であらかじめ作っておく事で、サーバの処理時間などを短縮してブログのパフォーマンスを上げる物です。

 
また、HTMLやJavaScript、CSSなどをを縮小する事で、サーバと訪問ユーザーのパソコンやモバイルとの通信容量を削減する事で、通信時間を短くする効果もあります。

 
ページのヘッダー内で読み込んでいるJavaScriptやCSS等を遅延読み込みしたり、フッターで読み込むようにする事で、ページのレンダリングを妨げないようにし、ブログの閲覧ユーザーに対して早くコンテンツを表示できるようにするプラグインもあります。

 
このように、ブログを高速化するプラグインを利用する、あるいは組み合わせる事によって、Wordpressで運営されるブログをプラグインによって高速化する事が出来るのです。

 
ブログを高速化する上でオススメのプラグインが次のプラグインです。

  • W3 Total Cache
  • Head Cleaner
  • Autoptimize

 

【Wordpress】キャッシュを使ってブログを高速化しよう! W3 Total Cache
W3 Total CacheはWordpressのプラグインで、コンテンツのキャッシュを作ってくれるプラグインです。
W3 Total Cacheは英語での表記ですが、キャッシュ系の細かな設定を行う事が出来るため、非常に便利なプラグインの一つなのです。

 
W3 TotalCacheには有償版と無償版がありますが、無償版でも十分に使えます。

 

Head Cleaner は、WordPressのプラグインの一つで、それぞれのページを構成するソースを最適化して、サイト表示速度を向上してくれるプラグインです。

 
CSSやJavaScriptを最適化してコンパクトにしたり一つにまとめたりする事でサーバーとユーザーのデータ通信の量を少なくする効果があったり、WebブラウザとWebサーバのやり取りの回数や送るデータ量を減らすことで、サイトの構築を早くする効果があります。

 

AutoptimizeはWordpressのプラグインの一つで、HTMLやCSS、JavaScriptといったリソースを縮小化し、ブログのパフォーマンスを上げてくれるキャッシュ系プラグインの一つです。

 
通常、ブログ運営者が作成するHTMLやCSS、JavaScriptはブラウザの表示には直接関係ない改行や余計な余白などが沢山使われていて、ブラウザの表示という観点からすると無駄にファイル容量が大きくなっています。

 
無駄にファイル容量が大きくなると、ブログを訪問しに来た閲覧者のモバイルや、パソコンに無駄な通信容量を使わせる事になるため、ブログのパフォーマンスが低下してしまうのです。

 
Autoptimizeは、Wordpressのブログを表示する上で直接関係の無い、スペースや改行などを削除し、縮小化する事で、訪問者のモバイルやパソコンに負担を掛けないようにしてパフォーマンスを上げる事に繋がります。

 

 
最後までお読みいただきありがとうございました。

スポンサーリンク





 - Wordpress , , , ,

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

【W3 Total Cache】ブラウザキャッシュのメディアファイルとその他のファイルの設定
【W3 Total Cache】ブラウザキャッシュのメディアファイルとその他のファイルの設定

W3 Total Cacheのブラウザキャッシュでは、画像や動画、音声ファイルと …

【Quick Adsense】Quick Adsenseで広告を掲載する設定と使い方
【Quick Adsense】Quick Adsenseで広告を掲載する設定と使い方

WordPressをブログを運営し、広告掲載の上でQuick Adsenseを導 …

【Quick Adsense】好きな段落の後に広告を挿入するQuick Adsenseの設定
【Quick Adsense】好きな段落の後に広告を挿入するQuick Adsenseの設定

広告を掲載していると「自分はリード文を書くのに3段落と決めているから、その段落の …

【Wordpressプラグイン自作】管理画面の任意画面のヘッダー作成時に処理を実行する方法
【WordPressプラグイン自作】管理画面の任意画面のヘッダー作成時に処理を実行する方法

WordPressのプラグインを自作していて、Wordpressの管理画面の任意 …

【Autoptimize】JavaScriptを縮小化するAutoptimizeの基本設定 簡単設定!
【Autoptimize】JavaScriptを縮小化するAutoptimizeの基本設定 簡単設定!

Autoptimizeには基本設定と高度な設定があり、基本設定については初心者で …

【Stinger5】ウィジット機能を使ってGoogle Adsenseの広告を掲載する方法
【Stinger5】ウィジット機能を使ってGoogle Adsenseの広告を掲載する方法

WordPressのテーマであるStinger5にはデフォルトの基本機能として、 …

【Wordpress】データ通信を削減してブログを高速化! Head Cleaner
【WordPress】データ通信を削減してブログを高速化! Head Cleaner

WordPressでブログを運営している人で、「もっとブログのパフォーマンスを上 …

【W3 Total Cache】ブラウザキャッシュ(Browser Cache)の全般設定
【W3 Total Cache】ブラウザキャッシュ(Browser Cache)の全般設定

WordPressでブログを運営している人でキャッシュ系プラグインの王道である「 …

【Autoptimize】CSSを縮小化するAutoptimizeの基本設定 初心者でも簡単!
【Autoptimize】CSSを縮小化するAutoptimizeの基本設定 誰でも簡単!

AutoptimizeはWordpressのプラグインで、CSSを縮小化する機能 …

【Quick Adsense】Quick Adsenseの日本語の文字化け対応の方法
【Quick Adsense】Quick Adsenseの日本語の文字化け対応の方法

WordPressのブログ運営でマネタイズをする上でQuick Adsenseを …