どうしたらいいのNAVI

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

【Head Cleaner】ブログを高速化するHead Cleanerのお勧めの設定

      2015/11/07


WordPressでブログのパフォーマンス高速化の為に、Head Cleanerを導入しているという人も居る事でしょう。
Wordpressでブログを高速化する上で、設定はやはりキモとなってくる部分なので、設定についてもしっかりと考えていきたいですよね。

 
ここで問題となるのが、「Head Cleanerで一番速くなるお勧めの設定ってなんだろう?」という点ですよね。

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

 

 
【Head Cleaner】ブログを高速化するHead Cleanerのお勧めの設定
 

 

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のオススメの設定の効果

Head Cleanerのオススメの設定の効果
Head Cleanerのオススメの設定の効果を実際に検証してみます。
今回の検証はブログの顔であるトップページを対象にパフォーマンスの変化を検証したいと思います。
Head Cleanerのオススメの設定の効果を検証するにはパフォーマンスチェックツールを利用するのが一番なので、次のパフォーマンスチェックツールを利用してみました。

  • GTmetrix

 
それぞれのツールを使ってオススメの設定を反映する前後の状態を比較していきたいと思います。

 

 

 

GTmetrixでのパフォーマンス検証結果

【ツール】PageSpeed InsightsとYSlowで同時パフォーマンス計測! GTmetrix
GTmetrixには、PageSpeed InsightsとYSlowの比較結果に加え、全体的な総合評価などが存在する為、次の流れで評価を確認していきましょう。

  • 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 Cleanerを導入する前は、PageSpeed Insightsの評価スコアは「C(78%)」YSlowの評価スコアが「D(61%)」でした。
同時刻にHead Cleanerを導入しオススメの設定を反映した後、再度パフォーマンスを検証した結果、PageSpeed Insightsは「B(83%)」でYSlowの評価スコアは「D(61%)」でした。

 

 

 

ページ全体の詳細

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

 
Head Cleanerを導入する前の検証結果は次の通りでした。

  • ページの読み込み時間 : 21.3秒
  • ページの容量 : 1.17MB
  • リクエスト数 : 229回

 
Head Cleanerを導入し、おすすめの設定を反映して検証した結果は次の通りでした。

  • ページの読み込み時間 : 13.6秒
  • ページの容量 : 1.04MB
  • リクエスト数 : 229回

 
ページ読み込みの時間についてはかなり大幅に改善され、パフォーマンスが向上されています。
実際にWebページにアクセスして表示してみても、パフォーマンスが改善された事を感じる事が出来ます。

 

 

PageSpeed Insightsの評価

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

 
他にも改善された項目は多くありますが、特にこれらの項目については、Head Cleanerの効果によって改善されたと言えるでしょう。

 

 

YSlowの評価

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

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

 

 

 

 

スポンサーリンク


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

 

 

 

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

 

 

 

パフォーマンスチェックのツール 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のお勧めの設定について紹介しました。
オススメの設定を反映した結果、ページの表示速度は高速化されたので、是非お勧めの設定を使ってみてください。

 
パフォーマンスチェックツールの中には、パフォーマンスの評価の指標が違うものもあるので、いろいろと使って見ると更に自分のブログを高速化させる手段が見つかるかもしれませんね。

 
PageSpeed Insightsでの評価はHead Cleanerのオススメの設定で改善する事が出来たので、YSlowの項目についてもどうせなら改善していきたいものですね。

 
パフォーマンス改善は終わりのない戦いみたいなものなので、Webコンテンツ作成との折り合いをどうつけていくかもブログ運営者としての腕の見せ所と言えるでしょう。

 
ブログを高速化して、快適な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のお勧めの設定によってパフォーマンスは改善されました。

 

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

スポンサーリンク





 - Wordpress , , ,

Message

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

  関連記事

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

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

【Wordpress】Wordpressでブログ運営する上で参考にしたい考察 
【WordPress】WordPressでブログ運営する上で参考にしたい考察 

WordPressはブログを運営する上でメジャーなCMSです。 Wordpres …

W3 Total Cacheで起こりやすい不具合
【W3 Total Cache】W3 Total Cacheで起こりやすい不具合 え?マジデ?!を解消しよう

W3 Total Cache等のキャッシュ系プラグインを使ってブログの動作の軽量 …

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

Head Cleanerの設定にはGoogle Ajax Librariesを使 …

【Stinger5】Stinger5のサイドバーの新規記事一覧を消す方法
【Stinger5】Stinger5のサイドバーの新規記事一覧を消す方法

WordPressでブログを運営している人で、Stinger5を利用している人も …

【Wordpress開発環境】開発環境構築で必要なXamppの設定
【WordPress開発環境】開発環境構築で必要なXamppの設定

WordPressでテーマやプラグインの開発を進めるには、自分のパソコン上で開発 …

【Wordpress】Head Cleanerの設定! Wordpressのブログを高速化!
【WordPress】Head Cleanerの設定! WordPressのブログを高速化!

WordPressでブログ運営を行っていると、ブログのパフォーマンスを気にしてい …

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

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

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

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

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

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