どうしたらいいのNAVI

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

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

      2015/11/07


WordPressでブログを運営している人の中にはブログの高速化を期待して、高速化プラグインの一つであるHead Cleanerを利用している人も多い事でしょう。
Head Cleanerは設定された内容を反映した動作となるので、設定項目についての理解は必要不可欠です。

 
Head Cleanerの設定では「CSSとJavaScriptをサーバ上にキャッシュする」設定があり、CSSとJavaScriptをサーバ上にキャッシュするかどうかを設定する事が出来ます。

 
Head Cleanerの「CSSとJavaScriptをサーバ上にキャッシュする」設定を行う事により、どのような効果があり、ブログの高速化に影響してくれるのでしょう。
また、ブログはどのような影響を受ける事になるのでしょうか。

 
Head CleanerのCSSとJavaScriptをサーバ上にキャッシュする設定について簡単でわかりやすく、詳しく解説しているのでチェックしていってください。

 

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

 

CSSとJavaScriptをサーバ上にキャッシュするとは?

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

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

 
これにより、ブログ運営者は作成したJavaScriptやCSSの最適化について過度に意識しなくてもサイト・ブログ制作の上で行うCSSやJavaScript改変ごとに最適な形でファイルを保存しておく事が出来ますし、ブログを訪問するユーザーにとっては最適な形でCSSやJavaScriptが記述されて居る為、サーバーとの通信容量の削減が見込まれ、結果的にブログのパフォーマンスが向上するという流れになるのです。

 
CSSやJavaScriptには余計な空白が含まれていたり、ブラウザにとって不要な改行コードがファイルの記述内容に含まれていたり、本来なら一つのファイルで記述できるような内容であったりするので、これらを一本化したり、余計や空白や改行コードを削除したりする事で、ファイルの読み込みの回数や、全体の容量を削減する事にもつながります。

 
CSSとJavaScriptをサーバ上にキャッシュする事によってCSSやJavaScriptの読み込みを高速化し、ブログパフォーマンスが向上するのです。

 

 

 

 

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

Head CleanerのCSSとJavaScriptをサーバ上にキャッシュする設定
CSSとJavaScriptをサーバ上にキャッシュする設定はHead Cleanerの設定画面の「CSSとJavaScriptをサーバ上にキャッシュする」のチェックボックスにチェックを入れると有効化され、チェックを外すと無効化されます。

 
Head Cleanerではキャッシュしたファイルに行う最適化の設定などをする事が出来、「CSSとJavaScriptをサーバ上にキャッシュする」設定を有効化する事によって、更に次のような設定を行う事が出来るようになります。

  • CSS, JS を動的生成する
  • CSS に適用するデフォルト media 属性
  • 複数の CSS を結合する
  • CSS を最適化する
  • CSS に含まれる画像の URL を、データスキーマ URI に変換する
  • 複数の JavaScript を結合する
  • JavaScript を小さくする
  • フッタ領域の JavaScript も対象にする

 
キャッシュファイルを静的ファイルとしてではなく、動的な生成を行うかどうかを設定する事や、CSSに適用するデフォルトmedia属性、最適化の設定等、CSSやJavaScriptに関する設定を行う事が出来るようになります。

 
画像の例ではHead CleanerのCSSとJavaScriptをサーバ上にキャッシュする設定は有効化されている設定で、キャッシュファイルで設定できる項目をすでに表示させている状態になります。

 

 

 

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

Head CleanerのCSSとJavaScriptをサーバ上にキャッシュする設定を有効化する事によって変更されるHTMLを「どうしたらいいのNAVI」を例に見ていきましょう。
この設定を有効化する事で変更されるHTMLの要点をまとめると次の通りです。

  • HTMLに直接記述されていたCSSがキャッシュファイル化され、読み込まれる
  • HTMLに直接記述されていたJavaScriptがキャッシュファイル化され、読み込まれる

 

 

 

HTMLに直接記述されていたCSSがキャッシュファイル化され、読み込まれる

HTMLに直接記述されていたCSSがキャッシュファイル化され、読み込まれる
CSSとJavaScriptをサーバ上にキャッシュする設定を有効化する事で、HTMLが直接記述されていたCSSがキャッシュファイル化され、読み込まれます。
キャッシュファイルは「all(共通)」「print(印刷用)」「screen(ブラウザ表示用)」に分かれ、別々のキャッシュファイルとして保存され読み込まれる事になるのです。

画像の例では、CSSが3つのファイルに分割され、HTML上で読み込まれる事となったdfツールの一例です。

 

 

 

HTMLに直接記述されていたJavaScriptがキャッシュファイル化され、読み込まれる

HTMLに直接記述されていたJavaScriptがキャッシュファイル化され、読み込まれる
JavaScriptについても、HTMLファイル上に直接記述されている物については、キャッシュファイル化され、読み込まれるようになります。
JavaScriptはHTML上に記載されている物については、一つのキャッシュファイルとしてまとめられます。

 
画像の例では、JavaScriptがファイル化されHTML上で読み込まれる事となったdfツールの一例です。

 

 

 

CSSとJavaScriptをサーバ上のキャッシュを有効化した場合の詳細設定

CSSとJavaScriptをサーバ上のキャッシュを有効化した場合には、先ほども紹介しましたが、次のような詳細な設定を行う事が出来ます。
この設定により、CSSやJavaScriptをキャッシュした際に、ファイルを最適化したり、圧縮したり、コードを移動させたりまとめたりする事が出来ます。

 

  • CSS, JS を動的生成する
  • CSS に適用するデフォルト media 属性
  • 複数の CSS を結合する
  • CSS を最適化する
  • CSS に含まれる画像の URL を、データスキーマ URI に変換する
  • 複数の JavaScript を結合する
  • JavaScript を小さくする
  • フッタ領域の JavaScript も対象にする

 
それぞれの設定を有効化する事によってHTMLファイル上の記述や、CSSやJavaScriptの記述方法がダイナミックに変更される事となります。
項目について具体的に見ていきましょう。

 

 

 

CSS, JS を動的生成する

CSS, JS を動的生成する
CSS, JS を動的生成する設定では、Head Cleanerで作成されるキャッシュファイルに有効期限を決め、更にgzipで圧縮するかどうかを設定する事が出来ます。
有効化する事で、キャッシュされたCSS、JavaScriptのファイルは有効期限毎に更新され、更に圧縮された形で保存される事となります。

 
ファイルがgzip形式によって圧縮される事で、ブラウザからブログの読み込みを行う際にファイル通信の容量が削減されるため、ブログパフォーマンスが高速化されます。

 
CSS,JSの圧縮や有効期限やgzipの圧縮についてはHead Cleanerの「js_css.php」をHTML上で呼び出す事によって圧縮、展開が行われています。
動的ファイルを使用していると、SEO的に不利と言われる事もあるようですが、HTML上ではっきりとパラメータも指定されているので、クローラーのアクセスは問題なく行われるものと思われます。

 
画像の例ではCSS,JSを動的生成を有効化し、キャッシュファイルに有効期限を指定し、更にgzipで圧縮する設定になっています。

 

 

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

CSS, JS を動的生成する 有効化する事で変更されるHTML
CSS,JSを動的生成する設定を有効化する事で変更されるHTMLは読み込みされるCSS,JSが「js_css.php」を介して展開されるという点です。

 
Head Cleanerの「CSSとJavaScriptをサーバ上にキャッシュする」設定を有効化しているとHead Cleanerが作成した静的ファイルを読み込みに行きますが、「CSS, JS を動的生成する」事で、「js_css.php」にキャッシュファイルの識別子を渡す事で圧縮、読み込みを行えるようになっています。

 
有効化されると次のような記述でJSやCSSファイルが読み込まれるようになります。

 
少し分かり辛いかもしれませんが、画像はCSS,JSの動的生成を有効した場合に変更されるHTMLをdfツールで比較した一例です。

 

 

 

CSS に適用するデフォルト media 属性

CSS に適用するデフォルト media 属性
CSSに適用するデフォルトのmedia属性では、CSSをキャッシュファイル化した場合に設定されるデフォルトのメディア属性を指定する事が出来ます。
パフォーマンスが改善されるというよりも、CSSをキャッシュファイル化した際のレイアウト崩れを解消する事が目的の設定項目です。

 
指定する事で、何もmedia属性を指定されていないCSSにはデフォルトのmedia属性が設定されるようになります。

 
CSSのメディア属性は大きく分けると「all(共通)」「print(印刷)」「screen(ブラウザ)」の3種類に分かれています。
allは印刷、ブラウザで表示した場合の共通項目で、printは印刷用、screenはブラウザ用の表示として利用されます。

 
Head Cleanerを利用する事で画面表示に何かしらの不具合が出た場合にデフォルトに設定するmedia属性を変更してみましょう。

 
画像の例では、CSSに適用するデフォルトmedia属性として「all」が設定されるようにしています。

 

 

 

複数の CSS を結合する

複数の CSS を結合する
複数のCSSを結合する設定では、HTML上で読み込まれているCSSファイルを一つのファイルにまとめる事が出来ます。
HTML上で読み込まれているCSSファイルを一つにまとめる事で、サーバーへの読み込みにかかる通信を一本化する事が出来るので結果として画面表示が高速化される事になります。

 
CSSに「all」「print」「screen」のmedia属性を指定している場合は、media属性ごとにキャッシュファイルがまとめられ結合されます。
何も指定されていないCSSファイルについては「CSS に適用するデフォルト media 属性」で指定した属性のファイルにCSSがまとめられます。

 
複数のCSSを結合する事で表示の不具合が出る事もあるので、その場合はキャッシュファイルの内容などを確認してみましょう。

 
小さいファイルであっても、複数のCSSファイルに分かれているのであれば、読み込みの処理に時間がかかってしまうので、高速化の考え方としてはとても理に適った方法です。

 
画像の例では、複数のCSSを結合する設定になっています。

 

 

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

複数の CSS を結合する 有効化する事で変更されるHTML
複数のCSSを結合する事で変更されるHTMLは、複数のCSSファイルの読み込みが、キャッシュファイルの一本化によって読み込みがmedia属性ごとに1行で済んでいる点です。
複数のCSSは一つのキャッシュファイルとしてまとめられる為、media属性ごとに全てのCSSの情報が一括して読み込まれる事になります。

 
画像では、複数のCSSファイルが一つのファイルとして読み込まれるようになったdfツールの一例です。

 

 

 

CSS を最適化する

CSS を最適化する
CSSを最適化する設定では、キャッシュしたCSSの内容の最適化を行う設定項目です。
CSSを最適化する設定にした場合は、コメントや余計な空白、改行コードなどが削除され、CSSの容量がコンパクト化され、データ通信の容量が小さく済みます。
データ通信の容量が小さくなるという事は、それだけ通信時間が削減される事になるのでブログを高速化する事が出来ます。

 
画像の例では、CSSを最適化する設定になっています。

 

 

 

最適化されたCSS

最適化されたCSS
CSSを最適化する設定を有効にする事によって最適化されたCSSは、先ほども言った通り、コメントや余計な空白、改行コード等、表示に関係の無いブラウザなどからすれば無駄な文字を削除してくれます。

 
画像はHead CleanerのCSSを最適化する設定を有効化する事によって、最適化されたCSSの一例です。

 

 

 

 

CSS に含まれる画像の URL を、データスキーマ URI に変換する

CSS に含まれる画像の URL を、データスキーマ URI に変換する
CSSに含まれる画像のURLをデータスキーマURIに変換するの設定では、CSSに含まれている画像のURLをFirefox、Safari、Opera などのデータスキーマURIに対応するブラウザからアクセスがあった場合にCSS内の画像ファイルをデータスキーマURIに変換して、HTTPリクエストを減らす事でブログパフォーマンスを向上させます。

 
画像の例では、CSSに含まれる画像のURLを、データスキーマURIに変換する設定になっています。

 

 

 

複数の JavaScript を結合する

複数の JavaScript を結合する
複数のJavaScriptを結合する設定項目では、有効化する事で、HTML上に記述されている複数のJavaScriptを一つのファイルに結合する事が出来ます。
CSSの結合と同様に、JavaScriptを結合する事で、Jsファイルの読み込み回数を減らす事が出来るので、ブログのパフォーマンスアップにつながります。

 
複数のJavaScriptを結合する設定では、HTMLが直書きされている事によってHead Cleanerに作成されるJavaScriptファイルも結合の対象になります。

 
画像の一例では、複数のJavaScriptファイルを一つのファイルに結合する設定になっています。

 

 

 

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

複数の JavaScript を結合する 有効化する事で変更されるHTML
複数の JavaScript を結合する設定で変更されるHTMLは、複数のJsファイルの読み込みがあった場合、一つのJsファイルにまとめられて読み込まれる点です。

 
先ほども言いましたが、複数のJsファイルを一つのファイルで読み込む事によって、ファイル取得にかかるリクエストの回数を減らし、パフォーマンスの向上につながります。

 
画像の例では、複数のJsファイルが一つのファイルにまとめられたことを確認するためのdfツールの比較結果の一例です。

 

 

 

JavaScript を小さくする

JavaScript を小さくする
JavaScriptを小さくする設定では、JavaScriptに含まれる動作に影響しない、コメントや余分な空白、改行コードなどを削除し、JavaScriptを小さく最適化してくれます。
JavaScriptそのものの容量が小さくなることで、サーバとやり取りするデータの通信量が減り、画面の表示速度を向上する事が出来ます。

 
パフォーマンスアップの世界は0.1秒でも早くする事で劇的にブログパフォーマンスが上がるので、JavaScriptを小さくする事も細かい事ですがやっておいた方が良いでしょう。

 
画像の例では、JavaScriptを小さくする設定が有効化されています。

 

 

最適化されたJavaScript

最適化されたJavaScript
JavaScriptを小さくする設定を有効にする事によって最適化されたJavaScriptは、先ほども言った通り、コメントや余計な空白、改行コード等、表示に関係の無いブラウザなどからすれば無駄な文字を削除してくれます。

 
画像はHead CleanerのJavaScriptを小さくする設定を有効化する事によって、最適化されたJavaScriptの一例です。

 

 

 

フッタ領域の JavaScript も対象にする

フッタ領域の JavaScript も対象にする
フッタ領域のJavaScriptも対象にする設定によって、ヘッダーに記載されているJavaScriptだけでなく、フッターに記述されているJavaScriptも「複数の JavaScript を結合する」や「JavaScript を小さくする」設定を有効化する事が出来ます。

 
フッタ領域にレンダリングの邪魔をしない様、直接自分でJavaScriptを記載している場合に効果があります。

 
既にフッタ領域にJavaScriptを記述していると言えども、余計なコメントや改行などを含んでいる場合もあるので、フッタ領域のJavaScriptも対象にしたほうがパフォーマンスを向上する事が出来る場合があります。

 
ただし、他のプラグインによってフッダ領域に追加されたJavaScriptがうまく読み込まれなくなる可能性もゼロではないので動作不具合などが出た場合は、この項目は設定しない方が良いでしょう。

 
画像の例では、フッター領域のJavaScriptも対象にする設定になっています。
 

 

 

 

スポンサーリンク


CSSとJavaScriptをサーバ上にキャッシュする設定!を読むうえで知っておきたい知識

CSSとJavaScriptをサーバ上にキャッシュする設定!を読むうえで知っておきたい知識
CSSとJavaScriptをサーバ上にキャッシュする設定!を読む上で知っておきたい事について紹介します。
何かに困った時に他の方法を思いついたり、用語がわからなくて読みづらいと感じた場合は、これから紹介する事を参考にしてみてください。

 

 

 

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

 

 

 

 

CSSとJavaScriptをサーバ上にキャッシュする設定! あとがき

CSSとJavaScriptをサーバ上にキャッシュする設定! あとがき
Head CleanerのCSSとJavaScriptをサーバ上にキャッシュする設定について解説しました。

 
CSSとJavaScriptをサーバ上にキャッシュする設定によって、CSSファイルやJsファイルの一本化や、最適化などなどブログのパフォーマンスを大きく向上する事が出来そうですね。

 
実際に使用してみると表示速度が大幅に改善されたりと、使っててよかったと思う事が多いです。

 
ただ、Wordpressの他のプラグインを利用していると、プラグインの機能によってJsファイルが追加されたりCSSファイルが追加されたりする事も多いので、Head Cleanerの設定次第では動かなくなってしまう可能性のあるプラグインもあるのでそこが厄介なところではありますが、適切にプラグインが管理できていれば問題ないでしょう。

 
Head CleanerのCSSとJavaScriptをサーバ上にキャッシュする設定をブログにとって適切に行う事で、ブログパフォーマンスをあげて行きましょうね!

 

 

 

 

CSSとJavaScriptをサーバ上にキャッシュする設定! まとめ

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

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

 
CSSとJavaScriptをサーバ上にキャッシュする設定はHead Cleanerの設定画面の「CSSとJavaScriptをサーバ上にキャッシュする」のチェックボックスにチェックを入れると有効化され、チェックを外すと無効化されます。

 
Head Cleanerではキャッシュしたファイルに行う最適化の設定などをする事が出来、「CSSとJavaScriptをサーバ上にキャッシュする」設定を有効化する事によって、更に次のような設定を行う事が出来るようになります。

  • CSS, JS を動的生成する
  • CSS に適用するデフォルト media 属性
  • 複数の CSS を結合する
  • CSS を最適化する
  • CSS に含まれる画像の URL を、データスキーマ URI に変換する
  • 複数の JavaScript を結合する
  • JavaScript を小さくする
  • フッタ領域の JavaScript も対象にする

 
Head CleanerのCSSとJavaScriptをサーバ上にキャッシュする設定を有効化する事によって変更されるHTMLを「どうしたらいいのNAVI」を例に見ていきましょう。
この設定を有効化する事で変更されるHTMLの要点をまとめると次の通りです。

  • HTMLに直接記述されていたCSSがキャッシュファイル化され、読み込まれる
  • HTMLに直接記述されていたJavaScriptがキャッシュファイル化され、読み込まれる

 
CSSとJavaScriptをサーバ上にキャッシュする設定を有効化する事で、HTMLが直接記述されていたCSSがキャッシュファイル化され、読み込まれます。
キャッシュファイルは「all(共通)」「print(印刷用)」「screen(ブラウザ表示用)」に分かれ、別々のキャッシュファイルとして保存され読み込まれる事になるのです。

 
JavaScriptについても、HTMLファイル上に直接記述されている物については、キャッシュファイル化され、読み込まれるようになります。
JavaScriptはHTML上に記載されている物については、一つのキャッシュファイルとしてまとめられます。

 
CSSとJavaScriptをサーバ上のキャッシュを有効化した場合には、先ほども紹介しましたが、次のような詳細な設定を行う事が出来ます。
この設定により、CSSやJavaScriptをキャッシュした際に、ファイルを最適化したり、圧縮したり、コードを移動させたりまとめたりする事が出来ます。

 

  • CSS, JS を動的生成する
  • CSS に適用するデフォルト media 属性
  • 複数の CSS を結合する
  • CSS を最適化する
  • CSS に含まれる画像の URL を、データスキーマ URI に変換する
  • 複数の JavaScript を結合する
  • JavaScript を小さくする
  • フッタ領域の JavaScript も対象にする

 
CSS, JS を動的生成する設定では、Head Cleanerで作成されるキャッシュファイルに有効期限を決め、更にgzipで圧縮するかどうかを設定する事が出来ます。
有効化する事で、キャッシュされたCSS、JavaScriptのファイルは有効期限毎に更新され、更に圧縮された形で保存される事となります。

 
ファイルがgzip形式によって圧縮される事で、ブラウザからブログの読み込みを行う際にファイル通信の容量が削減されるため、ブログパフォーマンスが高速化されます。

 
CSS,JSを動的生成する設定を有効化する事で変更されるHTMLは読み込みされるCSS,JSが「js_css.php」を介して展開されるという点です。

 
Head Cleanerの「CSSとJavaScriptをサーバ上にキャッシュする」設定を有効化しているとHead Cleanerが作成した静的ファイルを読み込みに行きますが、「CSS, JS を動的生成する」事で、「js_css.php」にキャッシュファイルの識別子を渡す事で圧縮、読み込みを行えるようになっています。

 
CSSに適用するデフォルトのmedia属性では、CSSをキャッシュファイル化した場合に設定されるデフォルトのメディア属性を指定する事が出来ます。
パフォーマンスが改善されるというよりも、CSSをキャッシュファイル化した際のレイアウト崩れを解消する事が目的の設定項目です。

 
指定する事で、何もmedia属性を指定されていないCSSにはデフォルトのmedia属性が設定されるようになります。

 
複数のCSSを結合する設定では、HTML上で読み込まれているCSSファイルを一つのファイルにまとめる事が出来ます。
HTML上で読み込まれているCSSファイルを一つにまとめる事で、サーバーへの読み込みにかかる通信を一本化する事が出来るので結果として画面表示が高速化される事になります。

 
CSSに「all」「print」「screen」のmedia属性を指定している場合は、media属性ごとにキャッシュファイルがまとめられ結合されます。
何も指定されていないCSSファイルについては「CSS に適用するデフォルト media 属性」で指定した属性のファイルにCSSがまとめられます。

 
複数のCSSを結合する事で変更されるHTMLは、複数のCSSファイルの読み込みが、キャッシュファイルの一本化によって読み込みがmedia属性ごとに1行で済んでいる点です。
複数のCSSは一つのキャッシュファイルとしてまとめられる為、media属性ごとに全てのCSSの情報が一括して読み込まれる事になります。

 
CSSを最適化する設定では、キャッシュしたCSSの内容の最適化を行う設定項目です。
CSSを最適化する設定にした場合は、コメントや余計な空白、改行コードなどが削除され、CSSの容量がコンパクト化され、データ通信の容量が小さく済みます。
データ通信の容量が小さくなるという事は、それだけ通信時間が削減される事になるのでブログを高速化する事が出来ます。

 
CSSを最適化する設定を有効にする事によって最適化されたCSSは、先ほども言った通り、コメントや余計な空白、改行コード等、表示に関係の無いブラウザなどからすれば無駄な文字を削除してくれます。

 
CSSに含まれる画像のURLをデータスキーマURIに変換するの設定では、CSSに含まれている画像のURLをFirefox、Safari、Opera などのデータスキーマURIに対応するブラウザからアクセスがあった場合にCSS内の画像ファイルをデータスキーマURIに変換して、HTTPリクエストを減らす事でブログパフォーマンスを向上させます。

 
複数のJavaScriptを結合する設定項目では、有効化する事で、HTML上に記述されている複数のJavaScriptを一つのファイルに結合する事が出来ます。
CSSの結合と同様に、JavaScriptを結合する事で、Jsファイルの読み込み回数を減らす事が出来るので、ブログのパフォーマンスアップにつながります。

 
複数のJavaScriptを結合する設定では、HTMLが直書きされている事によってHead Cleanerに作成されるJavaScriptファイルも結合の対象になります。

 
複数の JavaScript を結合する設定で変更されるHTMLは、複数のJsファイルの読み込みがあった場合、一つのJsファイルにまとめられて読み込まれる点です。

 
JavaScriptを小さくする設定では、JavaScriptに含まれる動作に影響しない、コメントや余分な空白、改行コードなどを削除し、JavaScriptを小さく最適化してくれます。
JavaScriptそのものの容量が小さくなることで、サーバとやり取りするデータの通信量が減り、画面の表示速度を向上する事が出来ます。

 
パフォーマンスアップの世界は0.1秒でも早くする事で劇的にブログパフォーマンスが上がるので、JavaScriptを小さくする事も細かい事ですがやっておいた方が良いでしょう。

 
JavaScriptを小さくする設定を有効にする事によって最適化されたJavaScriptは、先ほども言った通り、コメントや余計な空白、改行コード等、表示に関係の無いブラウザなどからすれば無駄な文字を削除してくれます。

 
フッタ領域のJavaScriptも対象にする設定によって、ヘッダーに記載されているJavaScriptだけでなく、フッターに記述されているJavaScriptも「複数の JavaScript を結合する」や「JavaScript を小さくする」設定を有効化する事が出来ます。

 
フッタ領域にレンダリングの邪魔をしない様、直接自分でJavaScriptを記載している場合に効果があります。

 

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

スポンサーリンク





 - Wordpress , , , , ,

Message

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

  関連記事

【Autoptimize】CSSを縮小化するAutoptimizeの高度な設定
【Autoptimize】CSSを縮小化するAutoptimizeの高度な設定

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

【Wordpressプラグイン自作】プラグイン開発で良く使う!よく見る!PHPの関数
【WordPressプラグイン自作】プラグイン開発で良く使う!よく見る!PHPの関数

WordPressプラグインを自作したり、既存のプラグインを編集したりする上で、 …

【Wordpressプラグイン自作】Wordpressのプラグインの初期化処理の方法(plugins loaded)
【WordPressプラグイン自作】WordPressのプラグインの初期化処理の方法(plugins loaded)

WordPressで自作プラグインを認識させ、アクションフックやフィルターフック …

【Quick Adsense】画像の後に広告を自動挿入するQuick Adsenseの設定
【Quick Adsense】画像の後に広告を自動挿入するQuick Adsenseの設定

画像の後に広告を掲載したいな~なんて考えている人も居るのではないでしょうか。 ブ …

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

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

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

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

【Autoptimize】JavaScriptを縮小化するAutoptimizeの高度な設定
【Autoptimize】JavaScriptを縮小化するAutoptimizeの高度な設定

Autoptimizeには基本設定と高度な設定があり、高度な設定については技術的 …

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

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

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

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

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

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