メインコンテンツまで移動する

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

  • 公開日
  • 更新日

Akira Web デザイナー

必要性

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

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

サイト表示速度が遅ければ遅いほど、サイト離脱率は高まります。また、十分な速度を維持できなければ、検索順位にも悪影響が及びます。

サイト表示を高速にするために、WordPress プラグインの 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'); です。この GIF 画像は、送信ボタンをクリック後に表示されるローディングアイコンです。

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

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

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

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

スタイルシートを 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 つです。

フォローする