【コピペで解決】”レンダリングを妨げるリソースの除外”をプラグインなしで対応

2019-06-052023-02-02

Google PageSpeed Insights に表示される警告、改善ポイントの一つ、「レンダリングを妨げるリソースの除外」と言う項目があります。

サイトスピードの改善を行っている方の中でも、ワードプレスやWebサイトの構成にあまり慣れていない方にとっては「何を言ってるのかさっぱりワカラン」となりがちなのがこの項目です。

サイトの高速化に取り組むにあたって、障壁になりやすいポイントではありますが、逆に言うと、ここが踏ん張りどころだと思って、しっかりと取り組めば、高速化とスコアに繋がるポイントでもあります。

WordPressの高速化総まとめページはこちら。

Google PageSpeed Insights
「レンダリングを妨げるリソースの除外」の要因

まずは、キッチリ要因を把握しよう、ということで、少しWebサイトがブラウザに表示されるまでの流れを、かみ砕いて説明していきます。

Google PageSpeed Insightsでサイトをテストすると、上記画像のような表示が出る場合があります。

解説を見てもカタカナばっかり並んでて、慣れてない方からすれば、この表示を見ただけで挫折すると思います。が、グッとこらえて、先に進みましょう。

レンダリングと言うのは、言い換えると「描画」です。

ブラウザはページ内データを読み込み始め、まず<head>タグ内を処理しようとします。

そしてブラウザは<head>タグ内に記述されている処理が完了するまで、描画を開始しないと言うルールになっています。

<head>タグ内では、ページを構成する色んなソースを読み込みますが、主に外部ソースのJavaScriptとCSSの読み込み処理が時間を大きく食う部分になります。

“レンダリングを妨げるリソースの除外” の解決方法

PageSpeed Insights 内でレンダリングを妨げているソースの一覧が確認できます。

上記で例に挙げている画像では全てCSSファイルですが、JSファイルがここに表示されている場合もあります。

基本的な解決方法は遅延または非同期読み込み

プログラムと言うのは上から順に1行ずつ処理されるのが基本的な動作です。

各行の処理が終了するのを待ってから次の行の処理に移ります。
これを同期処理と言います。

逆に、現在の行の処理の終了を待たずに次の行に移る処理の仕方を非同期処理と呼びます。

Point

外部ソース化されたJSとCSSは非同期に処理することによって、レンダリングの開始を早めることができます。

非同期処理の副作用

こと「Webサイトのページ読み込み」に限って言えば、非同期処理には明確な副作用があります。

<head>タグが何故存在するのかということを考えれば答えは出ますが、本来は先に読み込む必要があるからそこに書き込むわけです。上でも述べたように<head>タグ内の処理が終了するまで、ブラウザはレンダリングを始めません。

つまり、言い換えるならば、描画に影響を与える要素を<head>タグ内で読み込むようになっています。

スタイルシートなんかはもろに見た目に影響するものですし、JavaScriptも同じく見た目に影響する処理は多数存在します。

非同期処理をすると、それら見た目に影響を与えるファイルを読み込む前にブラウザが描画を開始しますので、画面がチラついたり、カク付いたりという副作用が発生することがあります。

Point

PageSpeed Insightsのスコアを気にするあまり、ユーザー体験を損なうのは本末転倒なので、注意が必要です。

JavaScriptのファイルを非同期または遅延させて読み込む

JavaScriptは<head>タグ内で必ず処理する必要はありません。

<body>タグ内に移動させても問題なく動くのでファイルの読み込み位置を変えれば “レンダリングを妨げるリソース” には該当しなくなります。

これは遅延読み込みと言う手法です。今では結構<body>で読み込まれるのが主流だったりもします。

キッチリやるなら、ファーストビューに影響を与えるJavaScriptは<head>内で読み込むようにするのがユーザー体験的にはベストかもしれません。

CSSのファイルを先読みする

CSSは基本的に<head>タグ内での処理必須なので、先読み処理という方法を取るのがお手軽です。
(実際は<body>内に<style>タグで記述しても適用されますがHTMLの文法上NGとされます。)

先読み処理というのは非同期処理の一種で”rel”属性に”preload”というプロパティを与えることによって実現できます。

読み込みの処理を待たずにメインの処理が次の行に移ります。

インライン化でも同じく、PageSpeed Insightsの警告自体は解決できると思いますが、CSSの適用優先順位に影響が出る可能性がありすます。

全てのファイルを取り除ければいいのですが、ファーストビューの描画に影響を与えるファイルがPageSpeed Insights上で表示されている場合もあり、そういったいわゆる、「クリティカルなソースファイル」に関しては非同期処理をしない方がいいでしょう。

コピペできる解決策

ワードプレスサイトに限った話になりますが、functions.phpに以下のコードをコピペするだけで”レンダリングを妨げるリソースの除外” の警告自体は取り払うことが可能です。

あくまで応急処置的に、全ての外部ソースを非同期処理しています。

ですので、上で述べたようにファーストビューに影響を与えるようなクリティカルなJSやCSSは除外した方がユーザー体験を損なうことがなくベストな状態に仕上がると思います。

除外の機構も設けていますので、以下ソースコードを紹介します。

if ( !(is_admin() ) ) {
    /*CSSの先読み非同期処理*/
    function my_style_loader_tag_function($tag){
        $match = preg_match("/base.css|除外したいファイル名を正規表現で記述/", $tag);
        if (!$match) {
            $tag = preg_replace( '/stylesheet/' , 'preload', $tag );
            $tag = preg_replace( '/ />/' , ' as="style" onload="this.onload=null;this.rel='stylesheet'" />', $tag );
        }
        return $tag;
    }
    add_filter('style_loader_tag', 'my_style_loader_tag_function');
/************************************************************************************/
    /*header内JS非同期読み込みasync/defer*/
    function replace_scripttag ( $tag ) {
        if ( !preg_match( '/b(defer|async)b/', $tag ) ) {
            return str_replace( "type='text/javascript'", 'defer', $tag );
        }
        return $tag;
    }
    add_filter( 'script_loader_tag', 'replace_scripttag' );
}

<head>~</head>内で読み込まれる外部ソースのCSSファイルJSファイルをすべて「非同期」または「先読み」処理に変換します。

コード解説

上記のfunction.phpへの記述を解説します。

サイトの状況によっては少し調整が必要な場合がありますので、適宜変更してみてください。

1行目：

管理者ログインしてページにアクセスしている場合、以下の処理は行いません、という分岐処理です。

不要な場合は1行目と最終行の閉じカッコを削除すると、常時適用になります。

2-12行目：

<head>タグ内のCSSファイルの読み込みソースコードを、[rel=”preload”]という先読み処理属性に書き換えます。

全てのCSSファイルに適用すると描画の際チラつきが発生する場合がありますので5行目で特定のファイルは先読み処理を除外するようにしています。

このサイトの場合”base.css”という名前のファイルを先読み処理すると、一瞬CSS完全非適用の状態が表示されるチラつき現象が発生しましたので、当該ファイル名を正規表現で記述して除外しています。

正規表現ですのでファイル名のドットなどはバックスラッシュでエスケープする必要があります。
ファイル名に限って言えば似たようなものですので、エスケープしなくてもほぼ同じ動作になるとは思います。

14-21行目：

<head>タグ内のJavaScriptファイルの読み込みソースコードに、[async/defer]という非同期処理属性を付加します。

17行目の[defer]の部分を[async]に置き換えても動作します。

[async/defer] の違いに関しては基本的に同じ非同期処理ですが、実行時、記述された順序を守る必要がある場合はdefer、順序を守る必要がない場合はasyncを選択すればOKです。

ワードプレスのjQueryに依存するプラグインなどを使っている場合はdeferを選んでおいたほうが安全です。

まとめ

PageSpeed Insights スコアを気にし過ぎても仕方ない部分もあるのですが、どうしても気になる方向けに簡単な解決方法を紹介してみました。

functions.phpの編集だけ基本的に対応可能ですが、副作用の項でも述べたように、サイトに寄ってはこの処理で画面がチラついたりする可能性もありますので、適宜修正が必要な場合があります。

先読みするCSSを除外すればするだけ、もちろん PageSpeed Insights に捕まる可能性があがるので、そこら辺は実際のユーザビリティとトレードオフの形になってしまいますね。

JSファイルに関しては遅延読み込みの除外処理は作っていませんが、ファーストビューをjQueryなどで大幅に改変する動作を設定している場合は、CSSと同じく一瞬のカクつきなどが出る場合がありますので、そういったJSファイルがある場合は除外処理を作ったほうがいいかもしれません。

ワードプレスサイトの表示速度の改善に関する記事を他にも書いていますので、気になる方は是非覗いてみてください。

コメント一覧（2件）

よよよ より:

2021-01-17 22:04

ありがとうございますm(__)m
47点から81点までグーンとアップしました。

返信
- katsuwo より:
  
  2021-01-20 06:44
  
  お役に立ててよかったです（＾＾）
  
  返信