ゆめぴょんの知恵ゆめぴょんの知恵
サイト制作、WordPressカスタマイズ、無料アプリ紹介など。海外旅行135ヶ国。知識を知恵にするブログ!

【WordPress高速化】プラグインのCSS・JavaScriptを削減・圧縮・まとめる方法

WordPressプラグインのコネタ(子猫)

WordPressプラグインやテーマには、独自のスタイルシートやJavaScriptを読み込み、表示の高速化の妨げになるものがあります。今回はそれらを削除・圧縮・結合・下方へ移動させる方法を紹介します。

ゆめぴょん(@yume_pyon)です。こんちはっ!

WordPressプラグインをうまく使うと、かなりの時間短縮ができて便利です。しかし入れすぎると高速化にマイナスです。前回の記事までで6種類ものプラグインをはずすことに成功しました。

今回はプラグインはずしの記事は一休みします。代わりに、テーマやプラグイン導入により高速化を妨げる要因となった部分を、改善する方法を考えてみました。

テーマ・プラグインでCSSやJSが挿入される場所

WordPressのテーマやプラグインを導入した時に、いくつかのCSS(スタイルシート)やJS(JavaScript)ファイルが読み込まれる場合があります。

まずプラグインの場合は、コンテンツがはじまる前のheadタグ内などに挿入されることが多いです。

または、フッター下方部のbodyタグの直前に挿入されることもあります。

テーマファイルで言うと「header.php」「footer.php」の中にそれぞれ「<?php wp_head() ?>」「<?php wp_footer() ?>」というPHPの記述があります。この場所に追加されます。

ちなみにテーマや一部のプラグインには、「functions.php」の中にCSS・JSの挿入記述がある場合もあります。私は確認できませんでしたが。「All in One SEO」とかかな。

挿入されるCSSやJSファイルを削除する方法

さて、WordPressテーマやプラグインによって挿入されたCSS・JSファイルを、あらかじめ確認しておきましょう。具体的にはブログのソースコードで「.css」「.js」を検索すると楽です。

そして不要で削除したり、まとめたり、下方へ移動したい場合は、いったんオリジナルを削除する必要があります。まずはテーマファイルの該当箇所を見てみましょう。

テーマファイルはWordPressで最重要です。修正前には必ずバックアップをとってください。もし問題が起こったらすぐ元に戻してください。全て自己責任でお願いします。

まずテーマファイル(functions.phpも含む)に直接記述しているCSS・JSの挿入については、コメント化するだけでいいでしょう。

それ以外は「<?php wp_head() ?>」「<?php wp_footer() ?>」によって生成されています。WordPressの独自関数によってそれぞれのCSS・JSを削除できます。

「wp_head」からCSS・JSを削除する方法

まずは削除したいCSS・JSをソースコードから見つけて、id名やファイル名をメモしておいてください。

そして「functions.php」に下のようなコードを挿入します。この例ではjQueryと「Crayon Syntax Highlighter」というプラグインで挿入されるCSSファイルを削除しています。

「crayon-font-monaco」などはハンドル名と呼ばれるのですが、ほとんどの場合は「id名」です。先ほどメモした内容を記述すればいいです。ただcrayonでは「-css」は不要でしたが。

「wp_deregister」や「wp_dequeue」などについては詳しく解説しませんので、気になる方はググって調べてください。私は下のブログも参考にしました。

【Wordpress高速化日記】プラグインやテーマが読み込ませる.css,.jsファイル数を関数で減らしてみた|ウェブシュフ

「jQuery」ファイルを削除するのは、テーマファイル「functions.php」の上方でも大丈夫です。重複した「jQuery」を削除して独自に読み込みたい場合などにもこの方法は使えます。

「wp_footer」からCSS・JSを削除する方法

これも「functions.php」の中に記述するのがスマートかもしれないけど、何を削除したのか忘れてしまうため、私は直接「footer.php」に下のように記述しています。

「wp_footer」から取り除くためには、その直前に削除したい内容を記述すると、後々もわかりやすいかと思います。

テーマ・プラグインのCSSやJSを圧縮・まとめる方法

さて最初にCSS・JSファイルを削除する方法を書きましたが、それだけではテーマやプラグインが動かなくなるので、作業的にはこちらが先です。

CSS・JavaScriptファイルは数が増えるほど、表示速度の高速化を妨げる要因となります。それを防ぐためには次のような方法があります。

  1. なるべく1つにまとめる。または数を減らす
  2. 圧縮する

というわけで、可能な限りはどんどんマージ(結合)して1ファイルにまとめるのが最善策です。

ただし、標準のCSSファイル「style.css」などに取り込むのは私はオススメしません。なぜならプラグインを削除・変更した場合に、関連CSSを削除するのを忘れてしまうからです。

CSSやJavaScriptファイルを圧縮

このブログでは何度か紹介していますが、CSSやJavaScriptファイルを圧縮するウェブサービスを利用するのが便利です。下のサービスはYahoo!が提供するYUIというAPIを使っています。

Online YUI Compressor

下の記事でも紹介していますので、もしよければ参考にしてみてください。

【Web制作】スマホサイトの高速化!pagespeedで93点達成の攻略方法【Web制作】スマホサイトの高速化!pagespeedで93点達成の攻略方法28 shares

スマホ用テーマデザインでサイト作成した時に実装した、表示の高速化に関するチップを…

まとめたCSSやJSをテーマファイル下方に移動

上で圧縮したり、まとめたりしたCSS・JSファイルは、可能な限り下方で読み込んだ方が、コンテンツ表示の妨げにもならず高速化につながります。

ただしファーストビューで利用するCSS・JavaScriptなどは、下方に移動させると画面が乱れる原因にもなるため、よく考えて実験も繰り返しながら調節するのがオススメです。

必要な時だけ読み込む設定方法

WordPressプラグインは便利だけど、不要な時にも読み込まれるのが無駄だと感じる時があります。

例えば上で紹介した「Crayon Syntax Highlighter」や「SyntaxHighlighter Evolved」などソースコードを装飾するプラグインは、映画の感想記事では全く不要です。

WordPressでソースコードを色分けし行番号つきで表示!プラグインSyntaxHighlighter EvolvedWordPressでソースコードを色分けし行番号つきで表示!プラグインSyntaxHighlighter Evolved40 shares

ブログ記事でHTMLやCSS、WordPress関係のPHPなどを表示したい場合…

だから私のブログでは、WordPressやブログ作成術などのカテゴリーに属する記事のみで、これらプラグインを読み込むように設定しています。

また「ホーム」「カテゴリーの一覧ページ」などで利用しているAutopager(もっと読む!のリンク)も、個別記事や固定ページでは読み込まないようにしています。

jQueryのautopagerで次ページを画面遷移なしで自動読込みする方法jQueryのautopagerで次ページを画面遷移なしで自動読込みする方法17 shares

jQueryプラグインautopagerを使うと、ツイッターなどでも導入されてい…

例えば次のように記述できます。利用する場合は「$cate_slug」にあらかじめ「get_the_category()」などでカテゴリー名を入力しておくのを忘れずに!

まとめ:今日のゆめぴょんの知恵

今回の記事内容をざっくり言うと。

  • まずはプラグインなどが挿入するCSS・JSファイルを見つける
  • 次にそれらを圧縮したり、まとめたりする
  • まとめたCSS・JSは下方へ配置。オリジナルは削除
  • 表示速度の高速化は、地道な作業の積み重ねが大切!

次回の記事は「ウェブ制作に役立つチップ」の予定です(^^)。更新を見逃さないためにも、 feedlyの登録をおすすめします(^^)/

ゆめぴょん(@yume_pyon)でした。ばいちゃお! こてっZzz

«前記事:【WordPress】ページネーションの自動生成でSEO対策!プラグイン不要【WordPress】パンくずリスト設置方法!プラグイン不要。複数カテゴリから選択可に:次記事»
ページ
↑先頭
ホーム