【解説】「レンダリングを妨げるリソースの除外」からjquery.min.jsを解消する方法

　こんにちは。本サイトをPageSpeed Insightsでチェックしたところが「レンダリングを妨げるリソースの除外」という改善要望がでました。対象はjquery.min.jsとなっており、かなり悪戦苦闘しましたが、無事解決しましたので解決方法を記事にします。

　なお、私の環境は、WordPressでテーマをTHE THOR CHILDにしています。

Contents

レンダリングを妨げるリソースの除外　とは？

　そもそもの改善事項メッセージ「レンダリングを妨げるリソースの除外」の意味をご説明します。

　ＷＥＢサイトをブラウザで開く際は、各ＷＥＢサイトのソースコードを１行ずつ読み込みながら開いています。

　この読み込み処理途中にcssファイルやjavascriptが存在した場合は、これのファイルの読み込みを開始し、完了するまで次のコードを読み込みのを待ちます。

　この待ち時間が発生してしまっていることをgoogleが「レンダリングを妨げるリソース」という言い方で指摘しているのです。

　いくら待ち時間が発生しても必要なファイルであればダウンロードの必要があります。そのため、「レンダリングを妨げるリソースの除外」を解決できないのでは？と思うかもしれませんが、解決方法はあります。

　それは、非同期読み込みです。

　非同期読み込みは、ccsやjavascript順番通りに読み込みを行うのではなく、読み飛ばして後から読み込むようにする方法です。

　なんだ解決できるじゃんと思うかもしれませんが、この方法には代償があります。それは、WEBサイトを開いた瞬間にccsが読み込まれず非同期読み込みが完了するまで、サイトの形が崩れることがあることです。

　そのため、非同期読み込み対象は、サイトの頭の部分では使わないcssなどにすることが理想的です。（または一瞬の画像崩れを需要する）

ここから「レンダリングを妨げるリソースの除外」の対象からjquery.min.jsを除外した具体的な方法をご説明します。

　前提として私の環境は以下の通り。

　【ベース】 WordPress

　【テーマ】 THE THOR CHILD

結論としては、”wp_head”定義されている読み込みコードを”jquery.min.js”を非同期にすることで解決しました。

　これだと漠然としているので具体的な手順を記載します。

【修正イメージ】

　URLなどが違う可能性があるため、機械的なコピーはＮＧです。

<script async src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>'."\n";

【wp_headのディレクトリ】

/（サイト名）/public_html/wp-content/themes/the-thor/inc/parts

今回はソース修正という力業で解決しています。テーマの更新時の影響などを考えるとなるべくプラグインやテーマの設定などで対応することもお勧めします。

実際私もプラグイン等で解決していたのですが、どうしてもjquery.min.jsだけ解決できなかったので力押しにしました。