WordPressでCSSの読み込みを非同期化してレンダリングブロックから排除する方法

更新日:

WordPressで、header.phpやfunctions.phpに"~.css"というコードがある場合、
それがブログの読み込みを遅くしている時があります。

サイトの読み込み速度を測るPagespeed Insightsでこういう表示が出たりするんです。

例えば、これだったら、ヘッダー(もしくはfunctions.php)で読み込んでるCSSファイルが
レンダリングブロック(読み込みの邪魔)をしてるので、排除してくださいと出ています。

 

というわけで、ここでは、このCSSの読み込みを非同期にして(ページの読み込みを邪魔しないように読み込ませて)、ページ表示速度を上げる方法を、解説していきます。

 

WordPressでCSSの読み込みを高速化!

というわけで、やり方を解説します。

手順としては、

  1. functions.phpからheader.phpにタグを移す
  2. そのタグを非同期タグに書き換える

という2STEP(もしくは1STEP)です。

 

PHPをイジるので、必ず、やる前にバックアップを取ってください。最悪ブログが壊れます。

 

準備: functions.phpからheader.phpにCSSを移す

この準備部分は、最初からCSSのタグがheader.phpに入っているのであれば、必要ありません。

CSSのタグがfunctions.phpに入っている場合は、header.phpに移します。

 

今回は、highlight.js のCSSを例に取って話します。

こちらの記事で、highlight.js(色付きソースコードをブログ記事に表示するテーブルを出力する方法)を書いているのですが、

このCSSがレンダリングブロックしてしまって、
780ミリ秒、ブログ表示速度を遅らせているというので、このCSSを非同期化します

 

1. functions.phpを開き、このCSSの記述の1列をカットして、メモ帳などに貼り付け、保存ボタンを押します。

//シンタックスハイライトJSを追加
function hljs_load() {
if ( is_singular() ) {

wp_enqueue_style( 'hljs-style', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/ir-black.min.css' );

wp_enqueue_script( 'hljs-script', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js', array(), null, true );
wp_add_inline_script( 'hljs-script', 'hljs.initHighlightingOnLoad();' );
}
}
add_action( 'wp_enqueue_scripts', 'hljs_load' );

赤文字部分をカット(コピーして削除)する、そしてfunctions.phpは保存する

 

2. 今カットしてメモ帳に貼り付けたコードをheaderで使えるstylesheetタグに変更します。

wp_enqueue_style( 'hljs-style', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/ir-black.min.css' );

  ↓

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/styles/ir-black.min.css">

 

このように、アドレス部分(赤文字)のみをコピーします。

コピーしました

コピー

<link rel="stylesheet" href="ここにアドレス部分のみをコピー">

 

3. そして、このタグをheader.phpの</head>の手前にペーストして保存します。

これで、ひとまず下準備は終了です(この時点では表示速度は変わりません)

 

メイン:CSSを非同期化するコードに変える

それでは、header.phpのこのstylesheetタグを非同期で読み込むタグに変更します。

 

1. メモ帳などを使って、header.php内のレンダリングブロックしてるCSSコードをこのように変更します。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/styles/ir-black.min.css">

<link rel="preload" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/styles/ir-black.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/styles/ir-black.min.css"></noscript>

 

コピーしました

コピー

<link rel="preload" href="〇〇.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="〇〇.css"></noscript>

この非同期用コードの2つの〇〇.cssの部分を、赤文字の.css部分と入れ替えます。

 

2. さらに、今変更したコードのすぐ下に下記の超長いコードを付け足します。

コピーしました

コピー

<script>
(function( w ){
	"use strict";
	if( !w.loadCSS ){
		w.loadCSS = function(){};
	}
	var rp = loadCSS.relpreload = {};
	rp.support = (function(){
		var ret;
		try {
			ret = w.document.createElement( "link" ).relList.supports( "preload" );
		} catch (e) {
			ret = false;
		}
		return function(){
			return ret;
		};
	})();
	rp.bindMediaToggle = function( link ){
		var finalMedia = link.media || "all";
		function enableStylesheet(){
			if( link.addEventListener ){
				link.removeEventListener( "load", enableStylesheet );
			} else if( link.attachEvent ){
				link.detachEvent( "onload", enableStylesheet );
			}
			link.setAttribute( "onload", null ); 
			link.media = finalMedia;
		}
		if( link.addEventListener ){
			link.addEventListener( "load", enableStylesheet );
		} else if( link.attachEvent ){
			link.attachEvent( "onload", enableStylesheet );
		}
		setTimeout(function(){
			link.rel = "stylesheet";
			link.media = "only x";
		});
		setTimeout( enableStylesheet, 3000 );
	};
	rp.poly = function(){
		if( rp.support() ){
			return;
		}
		var links = w.document.getElementsByTagName( "link" );
		for( var i = 0; i < links.length; i++ ){
			var link = links[ i ];
			if( link.rel === "preload" && link.getAttribute( "as" ) === "style" && !link.getAttribute( "data-loadcss" ) ){
				link.setAttribute( "data-loadcss", true );
				rp.bindMediaToggle( link );
			}
		}
	};
	if( !rp.support() ){
		rp.poly();
		var run = w.setInterval( rp.poly, 500 );
		if( w.addEventListener ){
			w.addEventListener( "load", function(){
				rp.poly();
				w.clearInterval( run );
			} );
		} else if( w.attachEvent ){
			w.attachEvent( "onload", function(){
				rp.poly();
				w.clearInterval( run );
			} );
		}
	}
	if( typeof exports !== "undefined" ){
		exports.loadCSS = loadCSS;
	}
	else {
		w.loadCSS = loadCSS;
	}
}( typeof global !== "undefined" ? global : this ) );
</script>

 

<link rel="preload" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/styles/ir-black.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/styles/ir-black.min.css"></noscript>
(ここに貼り付ける)

 

Neby
もともとこのコードはGithubのこのコードを使ってます。

 

3. 今作った超長いコードを元のheader.phpに書かれていたものと入れ替えます。

そして、保存ボタンを押せば、これで全作業完了です。お疲れ様でした。

 

「header.phpにこんなクソ長いコードを足したら、
むしろページ表示速度下がるんじゃないの?アホなの?」

って私も思いながらやってみたんですが、

実際にPagespeed Insightsで計測してみると、
レンダリングブロックから消えて、速度が上がってました。あら不思議ですね。

 

というわけで、CSSを非同期にして、高速化する方法でした。

 

今回の記事は、下記のサイトの記事を参考にさせて頂きました。

全ブラウザ対応!preload で CSS を非同期で読み込み高速化

 

もともとのhighlight.jsを実装する方法の記事はこちら

記事にコード表示。超軽量highlight.jsコピーボタン付きをプラグインなしで実装。

 

写真で血圧記録

  • この記事を書いた人

Neby

本を毎日多読しつつ、資産運用、プログラミング、心理学、ネットビジネススキルを猛向上中。貧富の差が広がる5年後、10年後に安心生活を送るためのお金のリテラシー、スキル、資産を一緒に作っていきましょう。

-ブログのSEO対策
-