どうしたらいいのNAVI

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

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

      2015/11/07


WordPressでブログを運営している人で、「もっとブログのパフォーマンスを上げたいな~」と考えている人も居る事でしょう。
ブログを高速化する方法は色々とありますが、その中の一つにデータ通信の量や回数を削減してブログのパフォーマンスを上げるという方法があります。

 
Wordpressでデータ通信の量や回数を削減してブログのパフォーマンスを上げるのにオススメのプラグインがHead Cleanerです。
Heade Cleanerを導入する事で、ブログにアクセスしてくれるユーザーのサーバと通信を削減し、ブログのパフォーマンスを結果的に底上げする事が出来るのです。

 
Wordpressでデータ通信を削減してブログを高速化するHead Cleanerについて簡単でわかりやすく、詳しく紹介・解説しているのでチェックしていってくださいね。

 

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

 

Head Cleanerとは

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

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

 
また、HTMLのヘッダー部分に記述されるソースも整理し、コンパクト化したりファイル化してくれるのでヘッダーが原因でブログのパフォーマンスが低下していた場合は、ブログの表示速度の高速化の恩恵が大きくなります。

 
プラグインを導入したり、ブログを更新したりしているうちに「なんか最近ブログの表示が遅くなってきたな~」と感じる人は、Head Cleanerを導入して、適切な設定をするだけで、ブログのパフォーマンスを大いに改善する可能性を秘めています。

 

 

 

メリット

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

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

 
最適な形で記述されたHTMLはブログのパフォーマンスを上げてユーザーにとって便利な面の他にも、検索エンジンにも最適な形でユーザーにコンテンツを提供している良質なサイトとして認識されやすい傾向があるので、SEOの目線からもメリットがあります。

 
Head Cleanerを導入してからサイトの評価が上がったのか、検索エンジンからの流入が増えた事例もあるので、ページのCSS・JavaScriptの読み込みやHead内の最適化は検索エンジンに気に入られやすいと言えます。

 
検索エンジンが何を「良質」と判断するかは時代の流れに伴って変わってくることでもありますが、そのなかでも表示速度などのパフォーマンスについては今後も変わらず、表示が早い事が「良質」である要素の一つとなってくるでしょう。

 

 

 

デメリット

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

 
例えば、読み込みの順番が保障されていないと思った表示が出来ないようなCSSや、Headで読み込まないと動作しないようなJavaScriptをフッター付近で読みこむ事で、正常な動作が行えなくなるなどの現象です。

 
Head Cleanerを用いる事でHTMLのヘッダーに記述されている内容や、CSSやJavaScriptの読み込みの方法がダイナミックに変更されますのでjQueryのJavaScriptファイルを読み込んで利用している場合などは、一つのファイルにまとめてフッター付近で読み込もうとすると動作が保障されなくなり、今までつかえていた機能が使えなくなる可能性があるので、しっかりとjQueryに対しては最適化をしない等の対策を行う必要があるでしょう。

 
Head Cleanerは詳細な設定を行う事で、CSSやJavaScriptの最適化をしたり、ファイルを一つにまとめたり、まとめたファイルをフッター付近で読み込んでレンダリングを邪魔しないよう設定できますが、設定項目についての理解が浅いとHead Cleanerが原因で不具合を起こした場合に対処のしようがなくなってしまう事があります。

 
設定項目一つ一つの働きについて大雑把でも良いので把握しておく必要があり、このプラグインを使う上では、ある程度の前提知識は必要となると思います。
 

 

 

 

Head CleanerをWordpressにインストールする

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

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

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

 

 

 

WordPressのプラグインの「プラグインを追加」の画面で「Head Cleaner」と検索する

Wordpressのプラグインの「プラグインを追加」の画面で「Header Cleaner」と検索する

※2015年9月26日 時点


Wordpressの管理画面の[プラグイン]→[新規追加]から、「プラグインの追加」画面を表示しておきましょう。
検索ボックスに「Head Cleaner」を入力して検索すると、プラグインを検索する事が出来ます。

 
画像の枠で囲まれたプラグインが対象のプラグインです。

 

 

 

検索で表示された「Head Cleaner」を「いますぐインストール」ボタンを押してインストール

検索で表示された「Header Cleaner」を「いますぐインストール」ボタンを押してインストール
「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のブログを高速化!」で簡単でわかりやすく、更に詳しく紹介しているのでチェックしていってください。


 

 

 

 

Head Cleanerのオススメの設定と効果

Head Cleanerでブログを高速化するオススメの設定
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のオススメの設定の効果を検証するにはパフォーマンスチェックツールを利用するのが一番なので、次のパフォーマンスチェックツールを利用してみました。

  • GTmetrix

 
GTmetrixには、PageSpeed InsightsとYSlowの比較結果に加え、全体的な総合評価などが存在する為、次の流れで評価を確認していきましょう。

  • PageSpeed Insights, YSlowの総合スコア
  • ページ全体の詳細
  • PageSpeed Insightsの評価
  • YSlowの評価

 
PageSpeed Insights, YSlowの総合スコア
PageSpeed Insights, YSlowの総合スコアを、Head Clenerを導入する前と、Head Cleanerを導入しオススメの設定を判定した結果で、PageSpeed InsightsとYSlowの総合評価スコアを比較した結果、Head Cleanerの設定では、PageSpeed Insightsの評価指標上はスコアに影響はありますが、YSlowにはあまり影響がないようです。

 
しかし、やはりPageSpeed Insightsの評価上では5%程、スコアが改善されているところからするとHead Cleanerによるスコア改善の効果があったと言えます。

 
ページ全体の詳細
次にHead Clenerを導入する前と、Head Cleanerを導入しオススメの設定を判定した結果で、ページ全体の評価を比較した結果、ページの読み込みの時間は約8秒、ページの容量は130KB程削減されたことになります。

 
PageSpeed Insightsの評価
次は、Head Cleaner導入する前と、Head Cleanerを導入しオススメの設定を判定した結果で、PageSpeed Insightsの評価結果を確認してみましょう。
PageSpeed Insightsの評価としては総合的に評価が上がり、特に次の項目について改善されている事がわかります。

  • Minify CSS
  • Leverage browser caching
  • Avoid a character set in the meta tag
  • Enable gzip compression

 
YSlowの評価
次は、Head Cleaner導入する前と、Head Cleanerを導入しオススメの設定を判定した結果で、YSlowの評価結果を確認してみます。
YSlowの評価としては、総合評価の時と同様で、詳細な評価の方へは効果がないようですね。

 
しかし、全体的なページの読み込み時間が短縮された経緯などから、YSlowの評価スコアに変化がなかったとしても、Head Cleanerのお勧めの設定によってパフォーマンスは改善されました。

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


 

 

 

 

Head Cleanerの良くある不具合と解決方法

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の注意点としては設定をちゃんとしていない時はプラグインは停止しておきましょうという点です。
Head Cleanerは不具合なのかは定かではありませんが、何も設定を行わず、ただプラグインを導入して運用しているとブログに不具合を起こします。

 
HTML上で外部サーバにあるファイルを参照している場合、外部サーバのURLの後に、自分のサーバのURLが追加されてしまうので、外部ファイルのファイルの読み込みが失敗します。

 
この、「どうしたらいいのNAVI」では外部ファイルの読み込みの一つに「font-awesome」というアイコンを外部ファイルとして読み込んでいたのですが、設定を行わず無設定のまま放置していたら、外部サーバにあるリソースの読み込みに失敗してしまい、アイコンが表示されない不具合が発生しました。

Head Cleanerを何も設定しない事で変更されたタグの内容は次のようなものでした。

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/http://dousitaraiino.jp/wp-content/plugins/head-cleaner/js_css.php?f=font-awesome&amp;t=css" rel="stylesheet">

 
何も設定しないでただ導入しているだけの場合は、Head Cleanerのプラグインは停止しておきましょう。

 

Head CleanerとはWordpressのプラグインの一つで、キャッシュ系プラグインです。

 
CSSとJavaScriptをサーバー上にキャッシュしたり、複数のCSSやJavaScriptを一つのファイルにまとめたり、一つにまとめたCSSやJavaScriptのJSファイルをフッダー領域で読み込むなどしてレンダリングブロックを回避してくれるのでとても便利なプラグインです。

 
Head Cleanerが原因でSearch Consoleが使えなくなると言ってもHead Cleanerを使う事で全ての人がSearch Consoleを使えなくなるわけではありません。

 
Header Cleanerが原因でSearch Consoleが使えなくなる人は次の条件に当てはまる人です。

  • Head Cleanerの設定で「複数のJavaScriptを結合する」にチェックしている
  • Head Cleanerの設定で「<head>内のJavaScriptを振った領域に移動」を有効化している
  • Search Consoleでサイトの所有権をGoogle Analyticsアカウントと連携し確認している

 

【Head Cleaner】Autoptimize効果なしを解消するカスタマイズ
Head CleanerもAutoptimizeもブログ高速化をする上で、単独で利用するとどちらも効果の高いプラグインです。

 
しかし、Head CleanerとAutoptimizeは、処理をカスタマイズせずに利用した場合は、二つのプラグインの組み合わせは良くなく、Head Cleanerの処理によって、Autoptimizeの縮小化の処理が途中で中断されてしまい、HTMLやJavaScript、CSSの縮小化などが止まってしまうのです。

 
Autoptimizeの縮小化が止まると、HTMLやJavaScript、CSSが縮小化されず、Autoptimizeの機能で高速化されるはずだったブログが高速化されなくなってしまう現象が起きます。

 
例えば、パフォーマンスをチェックするツールである「PageSpeed Insight」を利用して、ブログパフォーマンスを検証した場合、Head Cleaner、Autoptimizeの二つのプラグインを有効化し、動作するように設定しているのにもかかわらず、次のような「HTMLの縮小化」改善項目が提案されます。
Head CleanerがAutoptimizeの縮小化が止めるというのはどんな状態か-1

 
Head CleanerがAutoptimizeの効果をなくす原因というのは、「バッファリング」というソフトウェアの技術が絡んできます。

 
Head CleanerがAutoptimizeの効果をなくしてしまう原因というのは、Autoptimizeは「全てのHTMLの作成をバッファリングで待ち受けている」のに対して、Head Cleanerが「ヘッダー・フッターHTMLを処理するタイミングで全てのバッファリングの待ち受けを開放し、キャンセルしてしまう」事が原因です。

 
Head Cleanerのよくある不具合と解決方法については「【Head Cleaner】Head Cleanerのよくある不具合と解決方法」で簡単でわかりやすく詳しく紹介しているのでチェックしていってくださいね。


 

 

 

 

スポンサーリンク


データ通信を削減してブログを高速化! Head Cleanerを読むうえで知っておきたい知識

データ通信を削減してブログを高速化! Head Cleanerを読むうえで知っておきたい知識
データ通信を削減してブログを高速化! Head Cleanerを読む上で知っておきたい事について紹介します。
何かに困った時に他の方法を思いついたり、用語がわからなくて読みづらいと感じた場合は、これから紹介する事を参考にしてみてください。

 

 

 

ブログを高速化するプラグインについて

【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】ブログを高速化するプラグイン特集! 高速化の果てへ」で特集していますので、チェックしていってくださいね。

 

 

 

パフォーマンスをチェックするGTmetrixについて

【ツール】PageSpeed InsightsとYSlowで同時パフォーマンス計測! GTmetrix
GTmetrixとは、Webツールの一つでGoogleの提供するPageSpeed Insightsと、Yahoo!の提供するYSlowを使って同時にサイト・ブログのパフォーマンスを計測してくれるものです。
また、PageSpeed InsightsとYSlowの他にもページ表示に費やされたウォーターフォールチャートも確認する事が出来ます。

 
PageSpeed InsightsもYSlowもサイトやブログのページのパフォーマンスについて評価し、改善項目について提案してくれるので、出来れば同時に検証したいという思いを叶えるツールになっています。

 
GTmetrixを使ってサイト・ブログの表示速度を評価する方法は次の手順で行います。
Gtmetrixは使い方がとてもシンプルなのでよほどの事が無い限りは使っていて迷うという事はないのではないでしょうか。

  • GTmetrixのWebページへアクセスする
  • パフォーマンスを評価したいページのURLを入力する
  • 評価内容を確認する

 
Gtmetrixを使う為に、まずはGTmetrixのWebページへアクセスしましょう。
GtmetrixのWebページへは次のリンクからアクセスする事が出来ます。

GTmetrix

 
GTmetrixのページにアクセスしたら、パフォーマンスの計測をしたいページのURLを入力しましょう。
URLを入力するのは、ページ中央部に表示されている「Enter URL to Analyze…」と表示されているテキストボックスです。

 
パフォーマンス評価したいページのURLを入力したら「Analyze」ボタンを押しましょう。

 
GTmetrixでウェブページの表示速度について評価が完了すると、具体的に評価結果について表示されます。
アカウントを利用しない無償版では次の事を確認する事が出来ます。

  • PageSpeed Insights・Yslowの評価スコア
  • Webページの詳細情報
  • PageSpeed Insightsの評価内容と提案内容
  • YSlowの評価内容と提案内容
  • ページ表示にかかったウォーターフォールチャート

 
PageSpeed Insights・Yslowの評価スコア
Webページのパフォーマンスを検証した結果のスコアとして、PageSpeed InsightsとYSlowのスコアの評価を確認することが出来ます。
Webページの評価を行った際の総評価として捉えるのが良いでしょう。

 
Webページの詳細情報
Webページの詳細情報では、Webページの読み込みにかかった時間や全体のページサイズ、ページ表示の際に出ている外部、内部へのリクエスト回数が表示されます。

 
PageSpeed Insightsの評価内容と提案内容
PageSpeed Insightsの評価内容と提案内容では、PageSpeed Insightsから受ける評価の詳細と、提案内容について確認する事が出来ます。
PageSpeed Insightsの評価内容と提案は画面中央付近の「PageSpeed」を選択すると確認する事が出来ます。

 
YSlowの評価内容と提案内容
YSlowの評価内容と提案内容では、YSlowから受ける評価の詳細と、提案内容について確認する事が出来ます。
YSlowの評価内容と提案は画面中央付近の「YSlow」を選択すると確認する事が出来ます。

 
ページ表示にかかったウォーターフォールチャート
ページ表示にかかったウォーターフォールチャートでは、ページの表示をする上で、読み込んだJavaScriptやCSS、サーバーの応答などの含めてグラフ形式で確認する事が出来るチャートです。

 

ウォーターフォールチャートは、画面中央部の「Waterfall」タブをクリックすると表示する事が出来ます。

 
PageSpeed InsightsとYSlowで同時パフォーマンス計測できるGTmetrixについては「【ツール】PageSpeed InsightsとYSlowで同時パフォーマンス計測! GTmetrix」で簡単でわかりやすく、更に詳しく紹介しているのでチェックしていってください。


 

 

 

 

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

データ通信を削減してブログを高速化! Head Cleaner あとがき
データ通信を削減してブログを高速化するHead Cleanerについて紹介しました。
Head Cleanerの導入自体はとても簡単で、設定も日本語なので設定しやすくて良いですよね。

 
ただ、設定するときは、JavaScriptがちゃんと動くか、CSSがちゃんと動作するかなども含めてチェックしておかないといざというとき「あれ?動いてない?」という事もあり得ます。

 
Wordpressのテーマでは、jQueryを使った物が主流となっているので、誤ってフッター領域に移動させたら今まで使えていた機能が使えなくなる事もあるので注意が必要ですね。

 
しかし、ちゃんと設定して使ってみると10秒近くも表示速度を改善してくれるというところでは、ブログ運営をする上でかなり心強い武器となると言えましょう。

 
最初は使い慣れなくてJavaScriptが動かないなんて事もあるかもしれませんが、失敗・成功を繰り返しているうちに次第に体が覚えてくるのでトライしてみてくださいね。

 
データ通信を削減してブログを高速化して、自分にとってもユーザーにとっても快適なWordpressライフを送っていきましょう。

 

 

 

 

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

データ通信を削減してブログを高速化! 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」が動作しなくなる

 

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

スポンサーリンク





 - Wordpress , , , , ,

Message

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

  関連記事

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

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

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

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

【Wordpress】Head Cleanerが原因でSearch Consoleが使えない?!
【WordPress】Head Cleanerが原因でSearch Consoleが使えない?!

WordPressを使ってブログを運営している人で「Head Cleaner」を …

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

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

【Wordpress開発環境】Wordpress初期設定で必要なデータベースの作成
【WordPress開発環境】WordPress初期設定で必要なデータベースの作成

WordPressはレンタルサーバーでブログ運営する場合、多くのレンタルサーバー …

【Head Cleaner】Autoptimize効果なしを解消するカスタマイズ
【Head Cleaner】Autoptimize効果なしを解消するカスタマイズ

WordPressを運営していて、AutoptimizeとHead Cleane …

【Wordpress】プラグインを自作する上で絶対に知っておきたい事
【WordPress】プラグインを自作する上で絶対に知っておきたい事

WordPressでブログを運営していて、上級者になってくると「より自分にあった …

【Head Cleaner】CSSとJavaScriptをサーバ上にキャッシュする設定!
【Head Cleaner】CSSとJavaScriptをサーバ上にキャッシュする設定!

WordPressでブログを運営している人の中にはブログの高速化を期待して、高速 …

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

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

【Quick Adsense】記事の最初に自動で広告を掲載するQuick Adsenseの設定
【Quick Adsense】記事の最初に自動で広告を掲載するQuick Adsenseの設定

Google Adsenseや忍者Admaxといった広告をブログで掲載している人 …