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

WordPressプラグインのCSSを削除

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を「見やすさ」と「使いやすさ」にこだわり紹介しています。

PageSpeed Insights で真っ先に注意してくるのが、レンダリングをブロックしている CSS です。

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

しかし、多くの WordPress プラグインは、逆に CSS を <head> タグ内に挿入してきます。

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

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

サイトのアクセス数が減少する前に、レンダリングをブロックしている WordPress プラグインの CSS を削除されてはいかがでしょうか。

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

今回は、多くのサイトがインストールしている Contact Form 7 を例にカスタマイズをご紹介します。

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

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 で呼び出している画像は、送信ボタンをクリック後に表示されるローディングアイコンです。

Contact Form 7 のローディングアイコン

functions.php にコードを追加し 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> タグ内で読み込まれなくなります。