WordPress プラグインの CSS を削除しサイト高速化

Akira

福岡在住の Web デザイナー。Web サイト制作に役立つ情報を紹介しています。AMP が大好き。

FacebookTwitter で記事の更新をお知らせしています。

サイトを高速で表示するには、レンダリングをブロックする CSS の排除が必須です。

しかし、多くの WordPress プラグインは、レンダリングをブロックする CSS を <head> タグ内に挿入してきます。

サイト表示速度が遅ければ遅いほど、サイト離脱率は高まります。

また、十分な速度を維持できなければ、検索順位にも悪影響が及びます。

サイト表示を高速にするために、WordPress プラグインの CSS を削除する方法をご紹介します。

プラグインの CSS の読み込み停止方法

多くのサイトがインストールしている Contact Form 7 を例に、プラグインの CSS を削除する方法を解説します。

他のプラグインでも、行うことは同じです。

CSS をテーマのスタイルシートにコピペ

まずはデベロッパーツールで <head> タグ内を確認し、Contact Form 7 の スタイルシートの <link> タグを探します。

<link rel="stylesheet" id="contact-form-7-css" href="サイトのURL/wp-content/plugins/contact-form-7/includes/css/styles.css" type="text/css" media="all">

上記の <link> タグを見つけた後は、まず id="contact-form-7-css" をどこかにメモをしておきます。この id は、CSS を削除する際のコードで使用します。

次に href 属性の URL をコピーした後、ブラウザの新しいタブにペーストし URL を開きます。

すると Contact Form 7 の CSS が表示されるため、CSS をお使いのテーマのスタイルシートにコピペします。

Contact Form 7 の CSS では、相対パスで background-image を指定している箇所があります。

この相対パスの指定が変わるため、この部分だけ CSS を変更します。

テーマにコピペした CSS の中から、下記の部分を探します。

div.wpcf7 .ajax-loader {
	visibility: hidden;
	display: inline-block;
	background-image: url('../../images/ajax-loader.gif');
	width: 16px;
	height: 16px;
	border: none;
	padding: 0;
	margin: 0 0 0 4px;
	vertical-align: middle;
}

このうち変更するのは、 background-image: url('../../images/ajax-loader.gif'); です。

テーマフォルダの直下にスタイルシートがある場合は、下記の CSS に書き換えます。

background-image: url('../../plugins/contact-form-7/images/ajax-loader.gif');

相対パスではなく、絶対パスで指定しても構いません。

他のプラグインでも、background-image で画像を呼び出していないかを確認します。

ちなみに、Contact Form 7 で呼び出している画像は、送信ボタンをクリック後に表示されるローディングアイコンです。

スタイルシートを head 内から削除

テーマのスタイルシートに CSS をコピペした後は、プラグインのスタイルシートを読み込まなくともデザインは崩れません。

テーマの functions.php に下記のコードを追加し、プラグインのスタイルシートを <head> タグ内から削除します。

add_action( 'wp_enqueue_scripts', function() {
  wp_dequeue_style( 'contact-form-7' );
});

wp_dequeue_style()では、ハンドルを指定します。

CSS ファイルのハンドルは、通常は id と同じです。

Contact Form 7 のスタイルシートの <link> タグからメモをしておいた、id="contact-form-7-css" を用います。しかし、-css は不要なため、実際に用いるのは contact-form-7 です。

これでレンダリングをブロックする WordPress プラグインのスタイルシートの削除は完了です。

プラグインやテーマによってはカスタマイズは不要

WordPress プラグインの中には、プラグインの設定からスタイルシートの読み込みを停止できるものもあります。

人気プラグインの WordPress Popular Posts が、その 1 つです。

WordPress Popular Posts の設定のツールタブには、「プラグインのスタイルシートを使う」という項目があります。

この項目を無効にするだけで、WordPress Popular Posts のスタイルシートが <head> タグ内で読み込まれなくなります。

また、テーマ「Cocoon」は、プラグインの CSS を含む全ての CSS をインライン化する機能があります(しかも、縮小まで行ってくれる)。

インライン化すれば、CSS はレンダリングをブロックしません。このようなテーマをお使いになるのもサイトを速くする方法の 1 つです。

コメント

  1. Akira様

    お世話になります。

    自分のサイトでもcontactform7のプラグインを使用しているため、当該ページのことを実現したく、自サイトのHTMLソースを確認しました。

    しかし、id=”contact-form-7-css”は存在しませんでした。(1箇所だけjavascriptのソースにcontact-formの記載があった程度です。)

    ただ、PageSpeedInsightsでは、cssのレンダリングで警告エラーが出ている状態です。

    当方のサイトでは、litespeedcacheのプラグインを用いているため、これが原因かなと推測しておりますが、解消方法についてご教示いただくことは可能でしょうか。

    • サイトを拝見しないと詳しいことが分かりませんが、 LiteSpeed Cache の設定で「 CSS 結合」をオンにされてはいないでしょうか。

      結合していると、サイトで読み込んでいるスタイルシートが 1 つにまとまるので、 id="contact-form-7-css" はないはずです。

      また、 Autoptimize などのプラグインでも、 CSS を結合できます。

      結合されている場合には、この記事のカスタマイズはほぼ必要ないと思います。

      レンダリングをブロックしている CSS を全てなくすためには、「全ブラウザ対応!preload で CSS を非同期で読み込み高速化」「コピペだけで高速に! CSS のインライン化」のカスタマイズが必要です。

  2. Akira様

    ご回答ありがとうございました。返信が遅くなり失礼いたしました。
    ご指摘の通り、LiteSpeed Cache の設定で「 CSS 結合」をオンにしておりました。

    preloadやcssのインライン化のカスタマイズについて検討してみます。
    お忙しい中ご回答いただきましてありがとうございました。

送信に失敗しました

ボットと判定された可能性があります。

大変お手数をおかけしますが、以下の内容をご確認の上、再度のコメントの送信をお願い申し上げます。