どうしたらいいのNAVI

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

【Head Cleaner】Google Ajax Libraries を使う設定!

      2015/11/07


Head Cleanerの設定にはGoogle Ajax Librariesを使う事の出来る設定があります。
Google Ajax LibrariesはWordpressに最初から入っているAjaxと比べ読み込みが早くなる可能性があるため、是非使っておきたい設定の一つです。

 
Ajaxはいろいろな機能を実装できるし、便利な反面、ライブラリーが大きくなりすぎてしまい、読み込みに時間がかかってしまうというのが難点です。
また、ライブラリーが大きくなればなるほど、読み込みした場合のサーバへの負荷も大きくなりがちです。

 
Head CleanerでGoogle Ajax Librariesを使う設定について簡単でわかりやすく、詳しくまとめているのでチェックしていってくださいね。

 

 
【Head Cleaner】Google Ajax Libraries を使う設定!
 

 

Head CleanerのGoogle Ajax Librariesを使う設定とは

Head CleanerのGoogle Ajax Librariesを使う設定とは、Wordpressに標準搭載されているAjaxを利用するのではなく、Googleが提供するサーバからGoogle Ajax Librariesを読み込んで利用する設定にするという物です。

 
Wordpressに標準搭載されているAjaxを使うのも早くて良いのですが、Googleが提供しているCDN(コンテンツデリバリーネットワーク)を利用する事で、Ajaxライブラリを高速に読み込むことが出来ます。

 
Head CleanerのGoogle Ajax Librariesを使う設定を有効化する事によって、Ajaxライブラリ読み込みにかかるパフォーマンス低下を防ぐ事が出来る可能性を秘めています。

 

 

 

 

Google Ajax Librariesを利用する

Google Ajax Librariesを利用する
Head Clenerの設定項目のうちの「Google Ajax Libraries を利用する」にチェックを入れる事で、Google Ajax Librariesを使う事が出来ます。

 
画像の例では、Google Ajax Librariesを利用する設定になっています。

 

 

 

 

有効化する事で変更されるHTML

Google Ajax Librariesを利用する 有効化する事で変更されるHTML
Google Ajax Librariesを利用する設定を有効化する事で、Google Ajax Librariesを読み込むためのスクリプトタグがHTMLに追加されます。
具体的にはGoogle Ajax Librariesを利用する設定を有効化したことで次の様なスクリプトが追加されました。

 

 
画像の例では、Googl Ajax Librariesを利用する設定が無効化されたHTMLと、有効化されたHTMLをdfツールで比較したものです。

 

 

 

 

スポンサーリンク


Google Ajax Libraries を使う設定!を読むうえで知っておきたい知識

Google Ajax Libraries を使う設定!を読む上で知っておきたい事について紹介します。
何かに困った時に他の方法を思いついたり、用語がわからなくて読みづらいと感じた場合は、これから紹介する事を参考にしてみてください。

 

 

 

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」で簡単でわかりやすく、更に詳しく紹介しているのでチェックしていってくださいね。

 

 

 

Head Cleanerの設定

【Wordpress】Head Cleanerの設定! Wordpressのブログを高速化!
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の設定

 
CSSとJavaScriptをサーバ上にキャッシュするかどうかでは、CSSとJavaScriptをWordpressが運用されているサーバ上にキャッシュしておき、読み込みのCSSやJavaScriptの高速化をはかるものです。

 
Head Cleanerでは、元のJavaScriptやCSSファイルではなく、キャッシュして置いたCSSやJavaScriptに対して、ダイナミックを変更を加え、HTML上ではキャッシュし最適化して置いたJavaScriptやCSSを読みこませる事で、元のCSSやJavaScriptを直接編集しなくてもパフォーマンスに最適な形でブラウザに読み込ませる事が出来ます。

 
ヘッダーのJavaScriptをフッタに移動させる設定では、<head> 内の JavaScript を、フッタ領域に移動する設定を有効化する事によってヘッダーで読み込んでいる、またはヘッダーに直接記述されているJavaScriptをフッターに移動する事が出来ます。

 
ヘッダーで同期読み込みをしているJavaScriptはページ表示のレンダリングを邪魔し、JavaScriptの読み込みが終わるまで記事が表示されなくなってしまうので、同期読み込みを行っているJavaScriptについてはフッター領域に移動するのがパフォーマンスアップではベストな方法でしょう。

 
Head CleanerのGoogle Ajax Librariesを使う設定とは、Wordpressに標準搭載されているAjaxを利用するのではなく、Googleが提供するサーバからGoogle Ajax Librariesを読み込んで利用する設定にするという物です。

 
Wordpressに標準搭載されているAjaxを使うのも早くて良いのですが、Googleが提供しているCDN(コンテンツデリバリーネットワーク)を利用する事で、Ajaxライブラリを高速に読み込むことが出来ます。

 
XML宣言を付与の設定では、有効化する事でHTMLの先頭にXML宣言を追加してくれる設定です。

 
メタタグ “canonical” を追加の設定では、HTML上にcanonicalを自動的に追加してくれる機能です。
既にページに対してcanonicalを追加している場合は、メタタグcanonicalを追加する設定を有効化しても、すでに記述されているcanonicalが優先されます。

 
これはパフォーマンスアップというよりはSEO観点でURLを正規化しておいた方が良いという意図の設定です。

 
OGP(Open Graph Protocol) 対応のメタタグを追加する設定を有効化する事によってOpen Graph Protocol対応のメタタグを自動的にHTML上に追加してくれます。

 
メタタグ “generator” を削除の設定では、有効化する事でHTML上に記述されているメタタグのgenerator属性を削除する設定です。

 
メタタグのgeneratorは本来HTML文書として基本的に表示に使われる項目ではありません。
メタタグのgeneratorを削除する事で少しでもHTML文書を軽くする事が出来ます。

 
リンクタグ “RSD” を削除の設定では、<link>タグでrsdが指定されている場合に該当の行を削除してくれるというものです。

 
リンクタグのRSDは汎用的なブログ編集用のアドレスとして使われる物なので、Wordpress上でしかブログを投稿しないという人はリンクタグのRSDを削除する事で、少しでもHTMLが軽量化されるので、有効化しても良いでしょう。

 
RSDのタグを記述していなかったり、すでに削除している人は無効化しておいて良いと思います。

 
リンクタグ “wlwmanifest” を削除では、HTML上に記述された<link>タグに記載されている「wlwmanifest」の行を削除してくれます。

 
リンクタグのwlwmanifestはWindows Live Writer を使って記事を投稿するときのアドレスを指定する物なので、Wordpress上でしか記事を編集しない人にとっては削除した方がわずかながらHTMLを小さくする事に繋がるので有効化しても良いでしょう。

 
もともとwlwmanifestを記述していない人や、すでに自分で削除した人は無効化のままでも良いです。

 
IEコンディショナルタグを削除する設定では、IEのバージョンごとにCSSを適用する場合に用いるコメントを削除する場合の設定です。
余りに古いバージョンを指定してCSSを指定している場合や、最新のブラウザを対象にする為、IEコンディショナルタグを削除する場合などに利用価値があるのではないでしょうか。

 
IEコンディショナルタグも削除する事でHTMLをわずかながら削除する事に繋がるので、もしIEコンディショナルタグが不要なのであれば有効化してしまっても良いでしょう。
IEコンディショナルタグを記述していない人や、すでに削除済みの人は無効化したままで良いです。

 
メタタグ”Last Modified”を追加の設定を有効化する事で、コンテンツの最終更新日時を表すLast Modifiedを追加してくれます。
Last Modifiedを追加する事によりキャッシュされたコンテンツが最新状態かどうかを判断するのに利用されます。

 
パラノイアモードを有効にする事でHTMLソースから無駄を省き、できるだけサイズを小さくしようとしてくれます。
パラノイアモードを有効にする事でヘッダー内だけでなく、HTML全体の不要な改行や空白を削除してくれるようになります。

 
ただし、このパラノイアモードそのものが、まだ実験段階らしく、正常に動作する事が保障されていないので、パラノイアモードを有効化する事によって不具合が発生した場合はパラノイアモードを無効化するようにしましょう。

 
デバッグモードの設定では、Head Cleanerに読み込んだJavaScript等の情報をHTMLのコメントとして表示してくれるデバッグモードを有効化する事が出来ます。
Head Cleanerによってまとめられた内容を確認する事が出来るので、不具合などを感じた場合はデバッグモードを有効にして確認してみると良いでしょう。

 
ただ、デバッグモードはあくまでデバッグ用の機能ですので、何か不具合が出て確認する場合を除いては基本的に無効化しておいた方が良いでしょう。

 
Java Scriptのフィルタによる対象外設定で、Head Cleanerで一つのファイルにまとめたり、最適化する対象外とするJavaScriptを指定する事が出来ます。
Head Cleanerによって一つのファイルにまとめたり、フッタ領域に移動する事によって不具合が出た場合にフィルタによる対象外設定を行うと良いでしょう。

 
<head>からフッタに移動するJavaScriptの設定では、ヘッダーで読み込んでいるJavaScriptの内、フッターに移動させるJavaScriptを選択する事が出来ます。
ここで選択されたJavaScriptはフッター領域で読み込まれる事となります。

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

 

 

 

 

Google Ajax Libraries を使う設定! あとがき

Google Ajax Libraries を使う設定! あとがき
Google Ajax Libraries を使う設定について解説しました。
JavaScriptのライブラリも大きくなればやはりサーバへの負担が大きくなり、Wordpressのパフォーマンスの低下やブログ記事表示の低下の原因となってしまう事があります。

 
サーバのパワーが足りないのに、何度もサーバ上にAjaxを読み込みに行けば、全体的に見てパフォーマンス低下の影響は大きいと言えるでしょう。
Google Ajax LibrariesをGoogleのCDN上から読み込めば、サーバの負担も軽くなるという点ではやはり利用価値は高いと言えるでしょう。

 
ブログが成長してAjaxライブラリの読み込みが多い有名ブログこそ、Google Ajax Librariesを利用するのが良いのかもしれませんね。

 

 

 

 

Google Ajax Libraries を使う設定! まとめ

Google Ajax Libraries を使う設定! まとめ
Head CleanerのGoogle Ajax Librariesを使う設定とは、Wordpressに標準搭載されているAjaxを利用するのではなく、Googleが提供するサーバからGoogle Ajax Librariesを読み込んで利用する設定にするという物です。

 
Wordpressに標準搭載されているAjaxを使うのも早くて良いのですが、Googleが提供しているCDN(コンテンツデリバリーネットワーク)を利用する事で、Ajaxライブラリを高速に読み込むことが出来ます。

 
Head Clenerの設定項目のうちの「Google Ajax Libraries を利用する」にチェックを入れる事で、Google Ajax Librariesを使う事が出来ます。

 
Google Ajax Librariesを利用する設定を有効化する事で、Google Ajax Librariesを読み込むためのスクリプトタグがHTMLに追加されます。

 

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

スポンサーリンク





 - Wordpress , , ,

Message

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

  関連記事

【W3 Total Cache】オブジェクトキャッシュ(Object Cache)を設定しよう!
【W3 Total Cache】オブジェクトキャッシュ(Object Cache)を設定しよう!

キャッシュ系プラグインとしてW3 Total Cacheを利用している人はオブジ …

【Quick Adsense】moreタグの後に自動広告挿入!Quick Adsenseの設定
【Quick Adsense】moreタグの後に自動広告挿入!Quick Adsenseの設定

WordPressのブログで、広告を掲載してブログの収益化に挑戦している人も居る …

【Quick Adsense】最後の段落の前に広告を自動挿入する!Quick Adsenseの設定
【Quick Adsense】最後の段落の前に広告を自動挿入する!Quick Adsenseの設定

WordPressでブログを運営している人の中には「最後の段落の前に広告を自動挿 …

【W3 Total Cache】レスポンシブテーマでPCとスマホの広告位置が一緒に!? 原因と対処方法
【W3 Total Cache】レスポンシブテーマでPCとスマホの広告位置が一緒に!? 原因と対処方法

W3 Total Cacheを入れてWordpressのブログを高速表示させよう …

【Wordpress】ブログの定型文を簡単挿入! TinyMCE Templates
【WordPress】ブログの定型文を簡単挿入! TinyMCE Templates

WordPressでブログ記事を投稿していると、いつも使っている言い回しや、定型 …

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

WordPressでプラグインを自作開発していると、Wordpressの管理画面 …

【Wordpress】プラグインを整理してブログ価値を高めよう!
【WordPress】プラグインを整理してブログ価値を高めよう!

WordPressを使用している人はとても多いですよね。 SEOに強いし、いろい …

【Wordpress】おすすめテーマのカスタマイズ方法
【WordPress】おすすめテーマのカスタマイズ方法

WordPressでは、デザインも秀逸で派手な物やシンプルな物、機能的に優れてい …

【Stinger5】Stinger5のカスタマイズ方法のまとめ特集
【Stinger5】Stinger5のカスタマイズ方法のまとめ特集

WordPressでブログを運営し、Stinger5を使っていると自分好みにカス …

【Wordpress】プラグインを使う上で絶対参考にしたい考察
【WordPress】プラグインを使う上で絶対参考にしたい考察

WordPressでブログを運営し、さまざまなプラグインを利用しオリジナリティあ …