どうしたらいいのNAVI

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

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

      2015/11/07


WordPressを運営していて、AutoptimizeとHead Cleanerの二つを利用してブログ高速化を考えている人も居るでしょう。

 
AutoptimizeはHTMLやCSS、JavaScriptを縮小化し、容量を小さくする事でブログを高速化する事に長けており、Head CleanerはHTMLのヘッダーで読み込んでいるJsファイルなどをフッター領域に移動させる事で、レンダリングをブロックしないようにする事でブログを高速化します。

 
しかし、この二つのプラグインを使っているとふと気づきます「あれ?Autoptimizeの縮小化が効いてない?」という事に。
Autoptimizeの効果がなくなる原因として、Head Cleanerの”ある処理”が原因でAutoptimizeの縮小化の効果が無効化されてしまうのです。

 
このHead Cleanerの”ある処理”を修正しないとAutoptimizeのHTML、CSS、JSファイルの縮小化機能が動作しなくなってしまい、プラグインの持ち腐れ状態になってしまうのです。

 
Autoptimizeの効果がない?Head Cleanerのカスタマイズについては簡単でわかりやすく詳しく紹介しているのでチェックしていってくださいね。

 

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

 

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

 
Autoptimizeを有効化し、HTMLを縮小化するように設定しているのであれば「HTMLの縮小化」の項目は出ません。また、実際にこのページのHTMLソースをブラウザの「ページのソースを表示」機能を使って確認してみてもHTMLが縮小化されているような結果が得られません。

 

 

 

 

Head CleanerがAutoptimizeの効果をなくす原因

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

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

WordPressは本来、データベースから記事の内容を取り出したり、Wordpressのテーマが呼び出す処理などを一通り行って最終的な記事ページ(HTML)を作成して、ブラウザに表示します。

 
この処理の中には、大まかに次のような流れが含まれています。

  • HTMLファイルを作成する準備
  • ヘッダーHTMLの作成
  • 記事内容HTMLの作成
  • サイドバーHTMLの作成
  • フッターHTMLの作成
  • HTML作成の終了処理

 
この流れの中でAutoptimizeは「HTMLファイルを作成する準備」の段階で、次々と作成される「ヘッダーHTML」や「記事内容HTML」、「サイドバーHTML」「フッターHTML」をバッファリングと呼ばれる機能を使ってサーバーのメモリに保持してから、最終的に「HTML作成の修了処理」のタイミングでHTMLを縮小します。

 
対して、Head Cleanerは「ヘッダーHTMLの作成」のタイミングで出力されるJavaScriptやCSSを、Autoptimizeと同様にバッファリングでサーバーのメモリに保持して、最終的に「フッターHTMLの作成」の時に移動すべきJSファイルやJavaScript、CSSを出力する事で、ヘッダーのCSSやJavaScriptを移動します。

 
これだけ見ると何の問題もなくAutoptimizeの縮小機能もHead CleanerのHTML整形機能も動作してくれそうなものですが、問題はHead Cleanerが自分以外のバッファリングを予め全て展開して無効化してしまう事です。

 
本来、バッファリングの機能は次々とバッファリングを入れ子(マトリョーシカみたい)のように、処理を書く事が出来、適切なタイミングで開放してやれば「他のバッファリングをすべて展開して無効化」する必要はないのですが、Head Cleanerにはこの処理が記述されています。

 
まとめるとAutoptimizeは「HTMLファイルを作成する準備の段階からすべてのHTMLが作成されるのを待ち受けている」のに、Head Cleanerが「ヘッダーHTMLの作成・フッターHTMLの作成のタイミングでAutoptimizeのHTMLの待ち受けを開放しキャンセルしてしまう」のです。

 
しかも、この処理は設定画面からは設定する事が出来ない、プラグインのPHPの処理を修正してカスタマイズするしか修正手段はありません。

 

 

 

 

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

Autoptimizeの効果をなくす、Head Cleanerの処理を修正(カスタマイズ)していきましょう。
修正が終わったら「ファイルを更新」ボタンを押して修正内容を反映させるのをお忘れなく。

 
Autoptimize効果なしを解消するHead Cleanerのカスタマイズでは次のPHPファイルを修正していきます。

  • head-cleaner/head-cleaner.php

 
Head Cleanerのカスタマイズをする上では次の流れで修正を行っていきましょう。

  • 「head-cleaner/head-cleaner.php」のプラグイン編集画面を開く
  • 「ヘッダーHTMLの作成」の全バッファリング解放処理を修正する
  • 「フッターHTMLの作成」の全バッファリング解放処理を修正する
  • 「PageSpeed Insight」で結果を確認してみる

 
では、実際にカスタマイズしていきます。

 

 

 

「head-cleaner/head-cleaner.php」のプラグイン編集画面を開く

「head-cleanerhead-cleaner.php」のプラグイン編集画面を開く
Autoptimizeの効果をなくすHead Cleanerの処理をカスタマイズする為、「head-cleaner/head-cleaner.php」のプラグイン編集が面をまず開きます。
Wordpress管理画面から「プラグイン」->「プラグイン編集」のリンクから「プラグイン編集」画面を開きましょう。

画面の右上部分にプラグインを選ぶリストボックスがあるので「Head Cleaner」を選択します。
選択すると画面右側の「プラグインファイル」のリストが更新され、Head Cleanerのプラグインにパッケージされているファイルの一覧が表示されるので、一覧の中から「head-cleaner/head-cleaner.php」を選択しましょう。

見出し画像は実際に「head-cleaner/head-cleaner.php」のプラグイン編集画面を開いたイメージです。

 

 

 

「ヘッダーHTMLの作成」の全バッファリング解放処理を修正する

次に「ヘッダーHTMLの作成」の全バッファリング解放処理を修正していきましょう。
「ヘッダーHTMLの作成」の全バッファリングを開放している処理は「head_start」の関数を修正します。

 
「head_start」は「public function head_start()」とブラウザの検索機能で検索してみると見つかると思います。
行数だと「390行目付近」が目安になります。

 
「ヘッダーHTMLの作成」のタイミングで全バッファリング解放処理を修正した後の「head_start」の関数は次のような記述になります。

 

 
この処理のハイライトされている処理が、元々有効化されていた処理で「ヘッダーHTMLの作成」のタイミングで全バッファリング解放処理を行っていた部分です。
元々の処理の概要はバッファリングのハンドラーを取得して、全てのバファリングを開放し、バッファリングを停止しています。Autoptimizeはこの処理でバッファリングが停止され、効果が出せない状態になっていました。

 
この処理をコメントアウト、もしくは削除する事で、Autoptimizeの縮小化処理が有効化されるようになります。

 

 

 

「フッターHTMLの作成」の全バッファリング解放処理を修正する

次に「フッターHTMLの作成」の全バッファリング解放処理を修正していきましょう。
「フッターHTMLの作成」の全バッファリングを開放している処理は「footer_start」の関数を修正します。

 
「footer_start」は「public function footer_start()」とブラウザの検索機能で検索してみると見つかると思います。
行数だと「430行目付近」が目安になります。

 
「フッターHTMLの作成」のタイミングで全バッファリング解放処理を修正した後の「footer_start」の関数は次のような記述になります。

 

 
この処理のハイライトされている処理が、元々有効化されていた処理で「フッターHTMLの作成」のタイミングで全バッファリング解放処理を行っていた部分です。
ヘッダーの時と同様でバッファリングのハンドラーを取得して、全てのバファリングを開放し、バッファリングを停止しています。
この処理も停止させないとAutoptimizeはこの処理でバッファリングが停止され、効果が出せない状態になってしまうので、この処理も停止しましょう。

 
この処理をコメントアウト、もしくは削除する事で、Autoptimizeの縮小化処理が有効化されるようになります。

 

 

 

 

「PageSpeed Insight」で結果を確認してみる

Head Cleanerをカスタマイズして保存したら、「PageSpeed Insight」で結果を確認するのが一番手っ取り早いでしょう。
実際にページスピードインサイトで確認してみた結果が次の通りです。修正前は「HTMLの縮小化」があったのに対し、Autoptimizeの縮小化機能が働いてHTMLの縮小化の改善項目が消え、改善されました。
「PageSpeed Insight」で結果を確認してみる-1

 
実際にブログページにアクセスして、ブラウザの「ページのソースを表示」機能を使って確認してみても、HTMLが縮小化されている事が確認できます。
また、Head Cleaner自体のヘッダー整形機能も動作している事も確認できたので今回の修正でHead Cleanerの動作が停止したという事もありませんでした。

 
ただし、今回のHead Cleanerのカスタマイズによって、Autopitmize以外の他のプラグインの影響を受けて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とは

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


 

 

 

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

 

 

 

PageSpeed Insightとは

PageSpeed Insightsの使い方
PageSpeed Insightsとは、Googleの提供するツールの一つで、サイトやブログの表示速度やユーザビリティを100点満点の点数で評価してくれるパフォーマンスチェックツールです。

 
パフォーマンスやユーザビリティの他にも、ページを表示する上でネックとなるリソースを示したり、改善方法の提案もしてくれる優れたツールです。

 
PageSpeed Insightsを使うにはGoogleの提供するサービスページへ移動する必要があります。
次のリンクにアクセスすると、PageSpeed Insightsのページに移動する事が出来ます。
PageSpeed Insights

 
PageSpeed Insightsの使い方はいたって簡単でシンプルです。
PageSpeed Insightsの画面に表示されているテキストボックスにパフォーマンスやユーザビリティを検証したいページのURLを入力するだけです。

 
PageSpeed Insightはモバイルについては速度・ユーザーエクスピリエンス、パソコンについてはGoogleの提案について、テストし評価を受ける事が出来ます。

 
テストした評価の画面では評価をした際の簡単なレンダリング表示についても確認する事が出来ます。

 
モバイルについては速度・ユーザーエクスピリエンスについて「修正が必要」「修正を考慮」の2段階の提案を受ける事が出来、パソコンについても提案の概要として「修正が必要」「修正を考慮」の2段階の提案を受ける事が出来ます。

 
PageSpeed Insightsでは、検証をしたサイトやブログのページを評価し、改善するための提案を受ける事が出来ます。
提案はモバイルの速度・ユーザーエクスピリエンス、パソコンの提案の概要毎に受ける事が出来ます。

 
Page Speed Insightsのモバイルの速度で受ける提案ではサイトやブログのページとして、改善の余地のある改善内容について提案を受ける事が出来ます。

 
パフォーマンス低下の原因であったり、パフォーマンスを更に向上させるうえで有意義な提案を受ける事が出来るので提案内容について目を通しておいた方が良いでしょう。

 
また、検証した際にパフォーマンスの低下の原因とされなかった物には「ルールに合格」として評価を受ける事が出来ます。

 
Page Speed Insightsのユーザーエクスピリエンスの速度で受ける提案ではサイトやブログのページとして、更にユーザーの使いやすさに対して改善の余地のある項目について提案を受ける事が出来ます。

 
ユーザーが目的のリンクを押しやすくしたり、見づらい表示となっていた場合はユーザーにとって不便な使えないページになってしまうので、提案内容に沿ってよりユーザーが使いやすいページを作成していきましょう。

 
また、検証した際にユーザーエクスピリエンスの低下の原因とされなかった物には「ルールに合格」として評価を受ける事が出来ます。

 
Page Speed Insightsのパソコンの提案の概要で受ける提案ではサイトやブログのページをパソコンで表示した場合に、表示やページの見易さ等、改善の余地のある項目について提案を受ける事が出来ます。

 
パソコンはモバイルに比べ、ページを表示する処理能力が高いですが、よりブログやサイトとして最適化しておいた方が良い項目について提案を受ける事が出来ます。

 
また、検証した際に評価が合格となったものについては「ルールに合格」として評価を受ける事が出来ます。

 
ブログやサイトのパフォーマンスを検証してくれるPageSpeed Insightsについては「【ツール】ブログ・サイトのパフォーマンスをチェック PageSpeed Insights」で簡単でわかりやすく、更に詳しく紹介しているのでチェックしていってくださいね。

 

 

 

 

Head CleanerのAutoptimize効果なしを解消するカスタマイズ あとがき

Head CleanerのAutoptimize効果なしを解消するカスタマイズする方法について紹介しました。
Wordpressは様々なプラグインがあり、プラグインを使って色々と自分好みのカスタマイズを行う事が出来るのが強みです。

 
しかし、その強みが逆に弱みにもなり、本来であれば有効な効果を発揮するプラグインであったとしても、組み合わせ次第で効果が発揮できなくなってしまう事もあります。

 
Wordpressも今でこそバッファリングの内容を処理の最後で検知してすべて開放するという処理があるので、現在のWordpressはバッファリングした内容が正しく展開されるようになりましたが、もしかすると前のバージョンではそのような処理が入っていなかったのかもしれません。(実際に調べたわけではないのでわかりませんが・・・)

 
もし、バッファリングの扱いや、Wordpress上の処理が今と違うのであれば、Head Cleanerの処理の挙動がそのようになっていたとしてもなんら不思議ではありません。
兎にも角にも、これでHead Cleanerを導入する事で、Autoptimizeの縮小機能が阻害される事はなくなりました。

 
Head CleanerのAutoptimize効果なしを解消するカスタマイズを使って、ブログを高速化していってくださいね。

 

 

 

 

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を処理するタイミングで全てのバッファリングの待ち受けを開放し、キャンセルしてしまう」事が原因です。

 
Autoptimizeの効果をなくす、Head Cleanerの処理を修正(カスタマイズ)していきましょう。
修正が終わったら「ファイルを更新」ボタンを押して修正内容を反映させるのをお忘れなく。

 
Autoptimize効果なしを解消するHead Cleanerのカスタマイズでは次のPHPファイルを修正していきます。

  • head-cleaner/head-cleaner.php

 
Head Cleanerのカスタマイズをする上では次の流れで修正を行っていきましょう。

  • 「head-cleaner/head-cleaner.php」のプラグイン編集画面を開く
  • 「ヘッダーHTMLの作成」の全バッファリング解放処理を修正する
  • 「フッターHTMLの作成」の全バッファリング解放処理を修正する
  • 「PageSpeed Insight」で結果を確認してみる

 
「head-cleanerhead-cleaner.php」のプラグイン編集画面を開く
Autoptimizeの効果をなくすHead Cleanerの処理をカスタマイズする為、「head-cleaner/head-cleaner.php」のプラグイン編集が面をまず開きます。
Wordpress管理画面から「プラグイン」->「プラグイン編集」のリンクから「プラグイン編集」画面を開きましょう。

 
画面の右上部分にプラグインを選ぶリストボックスがあるので「Head Cleaner」を選択します。
選択すると画面右側の「プラグインファイル」のリストが更新され、Head Cleanerのプラグインにパッケージされているファイルの一覧が表示されるので、一覧の中から「head-cleaner/head-cleaner.php」を選択しましょう。

 
次に「ヘッダーHTMLの作成」の全バッファリング解放処理を修正していきましょう。
「ヘッダーHTMLの作成」の全バッファリングを開放している処理は「head_start」の関数を修正します。

 
「head_start」は「public function head_start()」とブラウザの検索機能で検索してみると見つかると思います。
行数だと「390行目付近」が目安になります。

 
「ヘッダーHTMLの作成」のタイミングで全バッファリング解放処理を修正した後の「head_start」の関数は次のような記述になります。

 

 
次に「フッターHTMLの作成」の全バッファリング解放処理を修正していきましょう。
「フッターHTMLの作成」の全バッファリングを開放している処理は「footer_start」の関数を修正します。

 
「footer_start」は「public function footer_start()」とブラウザの検索機能で検索してみると見つかると思います。
行数だと「430行目付近」が目安になります。

 
「フッターHTMLの作成」のタイミングで全バッファリング解放処理を修正した後の「footer_start」の関数は次のような記述になります。

 

 
Head Cleanerをカスタマイズして保存したら、「PageSpeed Insight」で結果を確認するのが一番手っ取り早いでしょう。
実際にページスピードインサイトで確認してみた結果が次の通りです。修正前は「HTMLの縮小化」があったのに対し、Autoptimizeの縮小化機能が働いてHTMLの縮小化の改善項目が消え、改善されました。
「PageSpeed Insight」で結果を確認してみる-1

 
実際にブログページにアクセスして、ブラウザの「ページのソースを表示」機能を使って確認してみても、HTMLが縮小化されている事が確認できます。
また、Head Cleaner自体のヘッダー整形機能も動作している事も確認できたので今回の修正でHead Cleanerの動作が停止したという事もありませんでした。

 
ただし、今回のHead Cleanerのカスタマイズによって、Autopitmize以外の他のプラグインの影響を受けてHead Cleanerが動作しなくなる事も考えられますので、カスタマイズ後はHead Cleanerが動作しているかどうかをよく確認してください。

 

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

スポンサーリンク





 - Wordpress , , ,

Message

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

  関連記事

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

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

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

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

【Quick Adsense】サイドバーに広告を追加する設定について
【Quick Adsense】サイドバーに広告を追加する設定について

WordPressでブログを運営している人で、広告を掲載している人は「サイドバー …

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

WordPressでブログを高速化する上で、プラグインの導入は今や必須となってい …

【Wordpressプラグイン自作】特定のイベント時に処理を実行させるアクションフック(add_action)
【WordPressプラグイン自作】特定のイベント時に処理を実行させるアクションフック(add_action)

WordPressのプラグインを自作するには自分のつくったプログラムがいつ実行さ …

【WordPress】WordPressの本体をダウンロードする方法

ここではWordpress本体をダウンロードする方法を紹介しています。 &nbs …

【Wordpress】プラグインを整理しなければならない理由 ユーザと自分の為に
【WordPress】プラグインを整理しなければならない理由 ユーザと自分の為に

WordPressのプラグインはとても便利ですよね。 このブログでもWordpr …

【W3 Total Cache】ブラウザキャッシュ(Browser Cache)を設定しよう!
【W3 Total Cache】ブラウザキャッシュ(Browser Cache)を設定しよう!

W3 Total Cacheにはブラウザキャッシュに関する詳細な設定を行う事が出 …

クイックタグを入力補助するボタンをエディタに追加するか-1
【Quick Adsense】エディタに追加されるクイックタグのボタン設定

WordPressのブログ運営でQuick Adsenseを使って広告掲載を行っ …

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

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