無料のWPテーマ「Cocoon」のJavascriptを非同期読み込みにしてみた結果を書いておきたいと思います。
Javascriptを非同期読み込みにするコード
if (!(is_admin() )) { function add_async_to_enqueue_script( $url ) { if ( FALSE === strpos( $url, '.js' ) ) return $url; //非同期読み込みを除外したいjsをここに書く if ( strpos( $url, 'xxxxxx.js' ) ) return $url; return "$url' async='async"; } add_filter( 'clean_url', 'add_async_to_enqueue_script', 11, 1 ); }
この形のコードはいろんなサイトで紹介されています。!(is_admin())は管理画面に反映されないように、管理画面じゃないときにJavascriptの非同期読み込みをおこなうようにしています。
deferかasyncか
実をいうと私はjavascriptはasyncをつければとりあえずページの読み込みが速くなるみたいな、そういう程度の知識しかもっていません。asyncのほかにdeferというのがありますが、この違いはなんなのか気になります。ちょっと検索をかけてみると。以下のような違いがあるそうです。
しかし、上記の画像を見ても、実際のページの動きまではわからないので、クロームのデベロッパーツール等をつかって研究しないとdeferとasyncの違いはよくわからないと思います。わたし程度の知識しかないものがこんなことを書くのも恐れ多いですが。
ちょっとCocoonのJavascript非同期読み込みの話からずれてしまったので、結果的にはどうなったのかを書いておきたいと思います。
CocoonのJavascript非同期読み込みをやってみた結果
上記のコードをfunction.phpに貼り付け、ページの表示がどうなるか確認してみましたが、ページがうまく表示されない部分がありました。なにを除外したら解決したのかを書いてもよいのですが、信頼性が低い情報だと思うので省略します。それと、Cocoonを使っているサイトのページのソース表示を確認してみると、なぜか async がついてないScriptがあり、これの原因についてはよくわかりませんでした。(ページの読み込みの順番がなにか関係しているのかな?)
あとはグーグルの PageSpeed Insights で速度はどうかわったのか?を確認してもよかったのですが → やってません。経験上、Javascriptの非同期読み込みをしてもあまり点数が変わらないような気がしています。
まとめ: CocoonのJavascript非同期読み込みはしなくてもいい
CocoonのJavascriptの非同期読み込みはしないならしないでもいいと思います。やってもページ速度があまりかわらない、かつ、ページの表示がおかしくなるおそれもあります。どこかの情報で『ウェブページの表示は体感速度が遅くなければいい』と言及されているのをみたことがあります。こちらは何の根拠もない適当な発言ではあるのですが、わたしもほぼ同意見です。
ちょっと専門家がこの記事を見たら怒られそうな内容になってしまいましたが、この記事の情報は以上になります。
コメント