プラグインで追加されたCSSを1つにまとめてWordPressを高速化

今回は「PageSpeed Insights」で指摘された「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」という項目を改善していきたいと思います。

とりあえずレンダリングブロック(読み込みの邪魔)をしているCSSに対策をして行きます。

cssopt-4

WordPressではプラグインを利用する事で非常に手軽に便利な機能を使う事ができますが、プラグインを有効化するとプラグインのCSSとかスクリプトが追加されます(全部のプラグインという訳ではありません)。

例えば私も利用している「WP SyntaxHighlighter」。これはソースコードを記述する時にハイライトしてくれるプラグインですが、これを有効化してページのソースをみると3つのCSSが「head」部分に追加されていました。

<link rel='stylesheet' id='core3.0-css'  href='http://dokidome.com/wp-content/plugins/wp-syntaxhighlighter/syntaxhighlighter3/styles/shCore.css?ver=3.0' type='text/css' media='all' />
<link rel='stylesheet' id='core-Emacs3.0-css'  href='http://dokidome.com/wp-content/plugins/wp-syntaxhighlighter/syntaxhighlighter3/styles/shCoreEmacs.css?ver=3.0' type='text/css' media='all' />
<link rel='stylesheet' id='theme-Emacs3.0-css'  href='http://dokidome.com/wp-content/plugins/wp-syntaxhighlighter/syntaxhighlighter3/styles/shThemeEmacs.css?ver=3.0' type='text/css' media='all' />

実はこのCSSは本当は1つで良いはずですが、何故か3つもCSSファイルが追加されています。

ページのソースの確認は自分のブログの記事を開いて何も無いところで「右クリック」⇒「ページのソースを表示」で見る事ができます。

cssopt-2

このように色々なプラグインを実装して行く事でCSSのファイルが増えたりJavaScriptが増えたりするプラグインもある訳です。

スポンサーリンク
アフィリエイトBパートナー募集

今回の目的はCSSのファイルをまとめる事

CSSファイルやJavaScriptの外部ファイル等が増えていくとページを読み込むのに時間がかかってしまいます。そこで今回はCSSファイルを少なくする対策をする事にしました。

つまり複数のCSSファイルを全部子テーマのCSSにまとめて記述すれば余計なCSSファイルを読み込む必要がなくなります。

「PageSpeed Insights」で私のサイトを調べるとこれらCSSファイル達がレンダリングブロック(読み込みの邪魔)しているという事なので対策します。

記事の最初で紹介したように「WP SyntaxHighlighter」1つ使うだけでも3つのCSSが追加されますのでこれらを全部子テーマのCSSにまとめてしまう事で3つのCSSファイルを読みに行く必要はなくなると考えた訳です。

プラグインで追加されたCSSを探し出す

まずはプラグインで追加されているCSSを探す必要があります。自分のブログを開いて「右クリック」⇒「ページのソースを表示」させます。ちなみにHTMLとCSS、JavaScriptを縮小し最適化するプラグイン【Autoptimize】を有効化している場合には一時的に停止しておくと探しやすいです。

cssopt-3

この中から「link rel=’stylesheet’」という部分を1つ1つ探していきます。「Ctrl」+「F」を押すと検索窓が出ますのでそれで探すと早いです。

「head」内に追加されるCSS、それからフッター部分で追加されているCSSがあると思います。それからログインしているとWordPressの管理バーのCSSファイル等も表示されますので一度ログアウトして探してみる方がいいかも知れません。

あくまで「プラグイン」で追加されたCSSを探します。CSSファイルのURLを見ればプラグイン名が書かれていると思いますので分かると思います。

追加されているCSSは下記のような記述になっており、「href=’http://~」とリンクになっている部分があります。

<link rel='stylesheet' id='core3.0-css'  href='http://dokidome.com/wp-content/plugins/wp-syntaxhighlighter/syntaxhighlighter3/styles/shCore.css?ver=3.0' type='text/css' media='all' />

この「href=’http://~」という部分をクリックするとそのプラグインのCSSの中身を見る事ができます。要はこのプラグインで追加されたCSSの中身を全部子テーマのCSSに持っていき、CSSのリンクの記述を削除すれば良いという事になります。順番に説明してきます。

探しだしたCSSの記述を子テーマに移動する

そのまんまですが、プラグインで追加されたCSSを探し出しリンク部分をクリックしてCSSの中身を全部コピーします。

続いてWordPressに戻ってスタイルシートの編集。今度は子テーマのスタイルシートを開き、コピーしたCSSを貼り付けるのですが、先にコメントを入れておくと分かりやすいです。

/* ここから〇〇プラグインのCSS */

そしてこの下にコピーしたCSSを貼り付けです。コメントを入れておく事でどのプラグインのCSSか分かりますし、プラグインを使わなくなったときにそのCSSも一緒に消してしまえるようにします。

それから貼り付ける位置ですが、CSSは後から書いた物が優先される仕組みになっています。つまり子テーマの一番下に先ほどのCSSを持ってくるとそれが最優先で適応されますので、プラグインのCSSを自分で追加している場合は自分で追加したCSSが反映されない部分が出てきます。説明難しい。。。

簡単に言うと子テーマCSSの最初の方に貼り付けておけば問題ないよって事です。

プラグインで追加されたCSSの記述を削除する

さて、プラグインで追加されたCSSを自分の子テーマにまとめたのでプラグインによって追加されたCSSは出力しないようにしても問題は無いはずです。という訳でプラグインで追加されたCSSファイルを出力しないようにします。

この余計なCSSファイルを出力しないようにするには「functions.php」を編集します。子テーマを作成している場合は子テーマに「functions.php」を追加します。既にある場合は追加は不要です。

「functions.php」を追加する場合には他の子テーマのように親テーマの記述をコピーするのではなく、白紙で作成しておきます。つまり、ファイル名だけ書いて保存すればOKです。親テーマと同じ記述をするとブログが表示されない状態になります。

js-6

ここまでできたらWordPressに戻り、「外観」⇒「テーマの編集(エディタ)」と進み、先ほど作成した「functions.php」を開きます。

js-7

js-8

functions.phpでは最初と最後に次の記述をしておき、この中に全ての処理を書きます。

<?php

//ここに処理を記述していきます

?>

基本的にプラグインで追加されたCSSファイルを出力しないようにするにはこのような記述をします。

function my_dequeue_styles() {
    wp_dequeue_style( 'ハンドル名' );   
}
add_action( 'wp_print_styles', 'my_dequeue_styles' );

さて、ここで問題になるのは「ハンドル名」ですが、先ほどページのソースからCSSファイルを探した時に「link rel=’stylesheet’ id=’〇〇-css’」となっていましたね。ほとんどの場合、この「id=’〇〇’」のid名〇〇の部分がハンドル名です。

記事の最初で書いたように「WP SyntaxHighlighter」で追加された3つのCSSファイルのリンクをもう一度見てみますとこんな風になっています。

<link rel='stylesheet' id='core3.0-css'  href='http://dokidome.com/wp-content/plugins/wp-syntaxhighlighter/syntaxhighlighter3/styles/shCore.css?ver=3.0' type='text/css' media='all' />
<link rel='stylesheet' id='core-Emacs3.0-css'  href='http://dokidome.com/wp-content/plugins/wp-syntaxhighlighter/syntaxhighlighter3/styles/shCoreEmacs.css?ver=3.0' type='text/css' media='all' />
<link rel='stylesheet' id='theme-Emacs3.0-css'  href='http://dokidome.com/wp-content/plugins/wp-syntaxhighlighter/syntaxhighlighter3/styles/shThemeEmacs.css?ver=3.0' type='text/css' media='all' />

id部分を確認して「core3.0」「core-Emacs3.0」「theme-Emacs3.0」がハンドル名という事になります(最後の「-css」は要りません)。つまりこの3つを消すにはfunctions.phpにこのように書きます。

function my_dequeue_styles() {
    wp_dequeue_style( 'core3.0' );
    wp_dequeue_style( 'core-Emacs3.0' );
    wp_dequeue_style( 'theme-Emacs3.0' );
}
add_action( 'wp_print_styles', 'my_dequeue_styles' );

このように全部まとめて書く事ができます。functions.phpでは同じ記述をするとブログが表示されなくなるのでこのようにまとめて書いておくと便利です。

また、functions.phpを編集して画面が真っ白になったらFTP(ロリポップFTP)から編集したfunctions.phpを元に戻してあげると復活します。

先ほど「ほとんどの場合「この「id=’〇〇’」のid名〇〇の部分がハンドル名です」と書きましたが例外もあります。

というか私の利用している関連記事を表示するプラグイン「Yet Another Related Posts Plugin」では「head」部分に1つとフッター部分に1つ合計2つのCSSファイルが追加されており、「head」部分のCSSファイルは上記の方法で消せたのですが、フッターのCSSファイルが消せませんでした。

そこでフォーラムから同じような問題が無いか調べたところありました。「Yet Another Related Posts Plugin」で追加される2つのCSSファイルを消すにはfunctions.phpに次の記述も追加でOKです。

//yarppCSS削除
add_action('wp_print_styles','lm_dequeue_header_styles');
function lm_dequeue_header_styles()
{
  wp_dequeue_style('yarppWidgetCss');
}

add_action('get_footer','lm_dequeue_footer_styles');
function lm_dequeue_footer_styles()
{
  wp_dequeue_style('yarppRelatedCss');
}

という訳で私の場合は2つのプラグイン「WP SyntaxHighlighter」「Yet Another Related Posts Plugin」で追加されたCSSファイルを上記の記述で消す事ができました。

もちろん出力しないようにしたCSSファイルの中身は子テーマのCSSに全部追加してますので表示が崩れるという事はありませんでした。functions.phpを編集して保存したらページのソースを確認してCSSファイルの表示が消えている事を確認してみて下さい。

結果として全部で6個あったCSSファイル(子テーマを含む)を子テーマのCSSファイル1つにまとめる事ができました。

まとめ

プラグインで追加されたCSSファイルはまとめて子テーマに追加する事でCSSファイルの数を減らす事ができます。さらに圧縮して追加し、functions.phpで余計なCSSを出力しないようにする事でレンダリングブロック(読み込みの邪魔)をしている要素を少なくする事が可能です。結果的にCSSファイルを読み込むというリクエストを少なくするのでサイト表示のスピードを改善する事にも繋がります。

アフィリエイトBパートナー募集
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

おすすめの無料セミナー

これまでお金に関する勉強をした事がない方は稼ぐサイト作りの前にお金に関する無料セミナーに参加してみて下さい。お金をためたり増やしたりするためにお金の知識があるとかなり有利。考え方の土台になる部分ですからね。

「1万円から始められる節約の方法」「お金に働いてもらう方法」「収入の2割を自動的に貯める方法」など、お金に関する基本的な知識が学べる2時間の無料のセミナーが毎日のように行われてますので、一度参加してみる事をおすすめします。

これまで全くお金の勉強していない方であればお金の知識を身につける事で考え方が大きく変化するはずです。無料の2時間程度のセミナーですが、内容は濃いのでおすすめです。
お金に関する教養無料セミナー

プラグインで追加されたCSSを1つにまとめてWordPressを高速化”に1件のコメントがあります。

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. ピンバック: [WP]読み込み不要なプラグインのCSSをfunctions.phpで読み込まないようにする方法|ウェビメモ