こんにちは。本サイトをPageSpeed Insightsでチェックしたところが「レンダリングを妨げるリソースの除外」という改善要望がでました。対象はjquery.min.jsとなっており、かなり悪戦苦闘しましたが、無事解決しましたので解決方法を記事にします。
なお、私の環境は、WordPressでテーマをTHE THOR CHILDにしています。
レンダリングを妨げるリソースの除外 とは？
そもそもの改善事項メッセージ「レンダリングを妨げるリソースの除外」の意味をご説明します。
ＷＥＢサイトをブラウザで開く際は、各ＷＥＢサイトのソースコードを１行ずつ読み込みながら開いています。
この読み込み処理途中にcssファイルやjavascriptが存在した場合は、これのファイルの読み込みを開始し、完了するまで次のコードを読み込みのを待ちます。
この待ち時間が発生してしまっていることをgoogleが「レンダリングを妨げるリソース」という言い方で指摘しているのです。
レンダリングを妨げるリソースの除外 を解消する方法
いくら待ち時間が発生しても必要なファイルであればダウンロードの必要があります。そのため、「レンダリングを妨げるリソースの除外」を解決できないのでは？と思うかもしれませんが、解決方法はあります。
それは、非同期読み込みです。
非同期読み込みは、ccsやjavascript順番通りに読み込みを行うのではなく、読み飛ばして後から読み込むようにする方法です。
なんだ解決できるじゃんと思うかもしれませんが、この方法には代償があります。それは、WEBサイトを開いた瞬間にccsが読み込まれず非同期読み込みが完了するまで、サイトの形が崩れることがあることです。
そのため、非同期読み込み対象は、サイトの頭の部分では使わないcssなどにすることが理想的です。（または一瞬の画像崩れを需要する）
「レンダリングを妨げるリソースの除外」の対象からjquery.min.jsを除外した解決策
ここから「レンダリングを妨げるリソースの除外」の対象からjquery.min.jsを除外した具体的な方法をご説明します。
前提として私の環境は以下の通り。
【ベース】 WordPress
【テーマ】 THE THOR CHILD
結論としては、”wp_head”定義されている読み込みコードを”jquery.min.js”を非同期にすることで解決しました。
これだと漠然としているので具体的な手順を記載します。
- まずFTPソフトを用いてWEBサーバからwp_headをダウンロードします。
- パソコン上にwp_headのバックアップ（原本コピー）を作成します。
- wp_headをエディタで開き”jquery.min.js”を検索。
- ”jquery.min.js”の読み込みスクリプトにasyncを追加
- 修正後ファイルをhtpソフトでアップロード
- サイトへの表示確認を実施（完了）
【修正イメージ】
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だけ解決できなかったので力押しにしました。
