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

WordPressプラグインのCSSを削除

福岡在住ウェブデザイナー。 WordPress のカスタマイズを、「見やすさ」と「使いやすさ」にこだわり紹介しています。

カスタマイズ箇所プラグインの CSS
カスタマイズ方法CSS ・ PHP
テンプレート変更なし
コピペの可否50% 可能

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

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

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

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

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

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

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

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

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

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

まずはデベロッパーツールで head 内を確認し、 Contact Form 7 の CSS ファイルの 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 をコピペした後は、プラグインの CSS ファイルを読み込まなくともデザインは崩れません。

子テーマの functions.php に下記のコードを追加し、プラグインの CSS ファイルを head 内から削除します。

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

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

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

Contact Form 7 の CSS ファイルの link タグからコピペしておいた id="contact-form-7-css" を用います。しかし、 -css は不要なため、実際に用いるのは contact-form-7 です。

これでレンダリングをブロックする WordPress プラグインの CSS ファイルの削除は完了です。

設定から読み込みを停止できるプラグインもある

WordPress プラグインの中には、プラグイン設定から CSS ファイルの読み込みを停止できるものもあります。

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

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

この項目を無効にするだけで、 WordPress Popular Posts の CSS ファイルが head 内で読み込まれなくなります。

こんなサイト表示速度をしっかりと考えるプラグインばかりであればいいのに…。

Facebook ページにいいね!をする
Twitter でフォロワーになる

シェアする

URL をコピーする

コメント

  1. コウタロウ より:

    Akira様

    お世話になります。

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

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

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

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

  2. コウタロウ より:

    Akira様

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

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