wordpress・SEO

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

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

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


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

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

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

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

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


スポンサーリンク

レンダリングを妨げるリソースの除外 を解消する方法

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

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

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

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

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


「レンダリングを妨げるリソースの除外」の対象からjquery.min.jsを除外した解決策

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

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

  【ベース】 WordPress

 【テーマ】 THE THOR CHILD

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

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


  1. まずFTPソフトを用いてWEBサーバからwp_headをダウンロードします。
  2. パソコン上にwp_headのバックアップ(原本コピー)を作成します。
  3. wp_headをエディタで開き”jquery.min.js”を検索。
  4. ”jquery.min.js”の読み込みスクリプトにasyncを追加
  5. 修正後ファイルをhtpソフトでアップロード
  6. サイトへの表示確認を実施(完了)

【修正イメージ】

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

<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だけ解決できなかったので力押しにしました。

スポンサーリンク
  • この記事を書いた人

marusuke1216

30代のシステムエンジニア。 インフラ関連の案件中に従事している。 資格は、ネットワークスペシャリスト、PMO等を保有。

-wordpress・SEO

Copyright© SEのアソビ , 2020 All Rights Reserved Powered by AFFINGER5.