内部SEO対策としてWordPressの高速化する方法をご紹介【Javascript編】

2016/4/7更新

前回はWordPressの高速化【CSS編】をご紹介しました。
今回は【Javascript編】ということで、Javascript周りの高速化・軽量化についてご紹介します。

1,レンダリングをブロックするJavaScriptを除去

前回、PageSpeed Insightsで管理しているサイトの状態を調べました。前回はここでCSSの遅延の原因について対策しましたが、今回はJavascript側の対策を行います。

レンダリングをブロックする JavaScript を除去

CSSの時はsync JS and CSSというプラグインを使ってブロックの解消を行ないました。プラグイン名を見てわかるかと思いますが、Javascriptのブロック解消も出来ます。

Async_JS_and_CSS settings2

[Load Javascript asynchronously]にチェックを入れるだけです。
ただこのプラグイン、どうもJavascriptの方はうまく動いてくれず、僕の方はけっこう不具合が出ました。
そこでJavascript側はAsynchronous Javascriptというプラグインを使って解消しました。
こちらはsettingとかはなく、プラグインをインストールして有効にするだけです。

【余談】

Head Cleanerという<head>内のCSSとJavascriptを整理してくれるプラグインがあります。

Head Cleaner
https://ja.wordpress.org/plugins/head-cleaner/

最初これ便利だなぁと思って使ってみたんですが、PageSpeed Insightsの点数がHead Cleanerをインストールする前より、インストール後の点数の方が下がってしまう事態に。よく見るとJavascriptのブロックはほとんど消えたんだけど、CSSのブロックが復活してて、結果的に点数が下がってしまいました。いろいろ試したけど、僕はインストールを諦めました。割とこれも効果がありそうなので参考までに。

2, インラインで記述

レンダリングを妨げる JavaScript を削除する
https://developers.google.com/speed/docs/insights/BlockingJS#InlineJS

ここで紹介されているように「小さな JavaScript をインライン化する」とあります。
小さなJavascriptってどこまでが小さいねん!って一人突っ込みを入れてみても意味はないですが、jQueryプラグインの一部や、アナリティクスタグなどは外部参照などにしなくてもいいのではないかと(ソースをキレイにするのにmain.jsにまとめる人もいますが)

3, async属性を使ってJavascriptの読込を遅延させる

上のプラグインでJavascriptのブロックを解消出来ますが、中にはエラーとかが出て、プラグインを入れられないって人もいると思います。その時はasync属性を使ってみましょう。上のプラグインはJavascriptがDOM構成の後に実行されるようにするためのものです。async属性も同じで、外部参照のJavascriptを読込ませる時にこの属性を付与してあげることで、非同期でJavascriptを読込ませることができます。

ただJavascriptを非同期で読み込む際、読み込む順序を注意しないと適切なページの依存関係で無くてってしまうので注意が必要です。

次回は【画像】について高速化(軽量化)についてご紹介します。

ご不明な点があればお気軽にコメントください( ˘ω˘)

タイムチケットやってます!

コメントを残す

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

CAPTCHA


トラックバック:https://recost-design.com/1926.html/trackback