WordPressでレンダリングをブロックするJavascriptを排除する方法

投稿者: | 2017年10月14日

皆さん、お疲れ様です。

この記事では、PageSpeed Insightsで指摘をつけた、レンダリングをブロックするJavascriptを排除する方法について記載したいと思います。今回は、思考錯誤をたくさんしました。色々試しましたが、一番簡単解決方法は、Javascriptの読み込み属性に、「async属性」を追加することです。

改善自体は、 「b)」だけで、そのほかは確認や考察です。

a)改善前

PageSpeed Insightsの状況は次の画像のとおりです。「レンダリングをブロックするJavaScript」に3本ピックアップされています。

b)改善

やり方は、なんでも良いのですが、「function.php」の最後尾に以下のコードを追加して保存します。

c)改善後

PageSpeed Insightsから「レンダリングをブロックするJavaScript」がなくなっています。


d)改善前後のページの読み込み状況の考察(今はメモ)

ぱっと見は、読み込みが早くなっていること以外は、わかりませんね。。。

e)そのほかの修正方法としてPHP自体を改修することを考える

e)-1    使用していないJavaScriptを探し出す

Grepコマンドを使用して調査をすると、外部サイトのJavaScriptを読み込んでいることがあったり、デッドリンクになっているJavaScriptが存在します。

e)-2    JavaScriptをしている関数を書き換える

書き換え方は、イメージできていないのですが、JavaScriptをPHP上で読み込む場合、次のPHPに記載がありました。このPHPを残しておきたいと思います。


久々にPHPをSSHからのぞきました。内部コードまで見るのは、中々大変ですね。より良い方法が見つかりましたら、ご紹介したいと思います。

残るは、「ブロッキング CSS リソース」ですね。今回調査した感じをみると先人たちが解決してくれているような気配がします。Googleで探してしっかり拝読したいと思います。

それでは、また。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA