Cocoonでレンダリングをブロックしている JavaScript/CSS を排除

web
jeonsango / Pixabay

別に運営しているサイト(勉強の公式)での話。こちらのテーマはCocoonを使用している。

ページ読み込み速度が遅いことに気が付き、PageSpeedで原因を探ったところ、jQueryとFont Awesomeが悪さしていたことが発覚。

PageSpeed Insights

head内のコードをちょっと変更するだけで表示速度のPageSpeed Insightsの点数も90点近くまで上昇した。

発覚までの経緯

ある時期を境に、Analytics の直帰率が10%ほど上昇した。

丁度、テーマを変更したり、画像を変更したりするなど、サイトの改修作業の途中だった。それが原因でユーザーが内部リンクをクリックしてくれないのが原因かと思い、色々と努力してみたがあまり変わらず。

グーグルの自動広告を丁度その頃導入したので、それがサイトの表示速度を遅くしているかと思い至った。

しかし、PageSpeed Insights で調べたところ、「レンダリングをブロックしている JavaScript/CSS 」のせいで遅いとのこと。

jQueryの読み込みが遅いこと、Font Awesome がレンダリングブロックを解決するCSS配信に引っかかっていた事が発覚。

この時のサイトの点数は70前後だった。

レンダリングをブロックしている JavaScript

対策:JavaScript をdeferにして非同期に

まずは結論から、以下のコードをCocoon子テーマのfunctions.phpに貼り付ければよい。

if (!(is_admin() )) {
function add_defer_to_enqueue_script( $url ) {
    if ( FALSE === strpos( $url, '.js' ) ) return $url;
    if ( strpos( $url, 'jquery.min.js' ) ) return $url;
    return "$url' defer charset='UTF-8";
}
add_filter( 'clean_url', 'add_defer_to_enqueue_script', 11, 1 );
}

このコードは、.jsと付いたコード(つまりJavaScriptのコード)のうち、jquery.min.js以外のコードにdeferという属性を付けてやるものである。

これにより、画面の読み込みとは別に、JavaScriptを非同期で読み込むことができる。つまり、JavaScriptを読み込み終わる前に、画面を表示してくれるのだ。

もともと、画面が表示されるのはJavaScriptの読み込みが終わるまでだった。HTMLのソースはブラウザによって上から順に読まれる。はじめに大量のJavaScriptを読み込むと、その読み込みに時間がかかる分だけ画面の表示が遅くなってしまうのだ。

deferではなくasyncにするとサイトが真っ白になった

はじめ、WordPressでレンダリングをブロックするJavascript/CSSを排除する方法などを参考にして、JavaScriptにdeferではなくasync の属性を付けてみた。

何度がスマホで動作確認をしてみると、「アドセンスの広告だけが表示されて、肝心のブログコンテンツが真っ白で表示されない」という事態が起きてしまった。

もう少し良く調べてみると、asyncの代わりにdeferという属性を付けても良いことが分かった。

deferもasyncも、JavaScriptを非同期にしてくれるのは変わらない。しかし、deferは読み込み順序を保持してくれるので、非同期にしても上から順番にコードを実行してくれる。
参考:外部JavaScriptを非同期(async / defer)で読み込みレンダリングを高速化する

asyncにしてしまうと、jQueryなどを必要とする他のスクリプトが、jQueryなどを読み込む前に読み込まれてしまった影響でエラーが生じ、画面が表示されなくなってしまったと考えられる。

もちろん推測なので確かなことは分からなかったが、deferにした状態で何度かテストをしてみたところ、同様の症状は見られなかった。

レンダリングをブロックしているCSS配信

レンダリングブロックとCSS

レンダリングとは、ブラウザがWebページを読み込むまでに行う一連の描画処理のこと。

レンダリングブロックとは、処理が終わるまでブラウザに描画をしないこと。

つまり、CSSを読み込み終わるまで処理が終わらないので、レンダリングが終わらず、レンダリングブロックされていたということだ。

原因のコード

原因はFont Awesomeをhead内に以下のように記述していたことだ。

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

これはCDNを利用してデータを読み込み、自分のサイトに表示させるためのコード。これを使うことで、自分のサーバーに負荷を与えずに Font Awesome を読み込むことができる。

しかし、CDNを使うのは楽な反面、以下のように表示速度が遅くなることがあるようだ。

Webフォント「Font Awesome」で考えずにMaxCDNを使うと表示が遅いこともある(計測してみた)
使わなくてもいいのに、安易にCDNを使っていませんか? 快適な表示のためにはCDNを使わない選択肢も必要ですよ。

対策:JavaScript+SVG描画に変更する

Font Awesome 5からJavaScriptとSVGによる描画ができるようになっていたらしい。これまではCSSとウェブフォントを利用していたが、バージョン5.xからはJavaScript+SVGが推奨されているとのことだ。

Font Awesome

なので、試しに先程のコードをJavaScript+SVGのコードに変更するだけで、速度が劇的に改善された。

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

おわりに

PageSpeed Insights で調べたところ、最終的にモバイルとパソコンで90点近くになったので一安心である。あとは直帰率の経過を見守りたい。

コメント