Stinger6 Stinger7 WordPress インターネットカスタマイズテーマ伝えたいこと備忘録

ページ表示速度高速化レンダリングブロックを非同期にしてみる。

本日の人気記事BEST10

所要時間目安：約3分

ページ表示速度高速化方法で子テーマに@import使用しない方法と画像圧縮

ページ表示速度高速化レンダリングブロック解決方法ができた！！

Stinger6 Stinger7 WordPress インターネットカスタマイズテーマ伝えたいこと備忘録

2016年6月15日

ここ最近…。本当にサイトの高速化、サイトのページ表示速度を速くしなければ！！なんて思い過ぎている私です。
ない知識をフルに活用してみてはいるものの、うまくいったりいかなったり、トライ・アンド・エラーそして、トライを繰り返している今日この頃…。

読み込みを遅くする要因は、
header（ヘッダー）部分のjQueryや外部読み込みなどをしている同期されているものをGoogle Page Insight（グーグルページインサイト）で、よく指摘されます。

なので、
非同期にすれば良いのは分かっていてもWordPressにおいては、PHPとかいまだによく分からない関数などが多くてトホホな状態だったりもします。

前回のページ表示速度高速化に関する記事ですm(__)m

ページ表示速度高速化方法で子テーマに@import使用しない方法と画像圧縮

以前からページ表示速度が気になっている私です。今回は大きく分けて2つの事を実施しました。ちょっとなぐり書きですが、備忘録として残しておきたいと思います。ページ

2016-06-10 05:27

アドセンス336pxPC閲覧記事下表示1つ目コード

でも、なんとかして非同期にすれば良いのではないかと試行錯誤した中でとりあえずの解決策と実施してみた方法を備忘録として残しておきたいと思います。

まずは、今回の結果的にこれで良かった（と思われる）方法です。

テーマ内のfunction.phpに以下のコードが記載されている部分があります。

wp_enqueue_script(
 'jquery',
 '//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js',
 array(),
 '1.11.3',
 false
 );

これが、
実際に表示された時には以下のようになっています。

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js?ver=1.11.3'></script>

とりあえず、
この1つでも非同期にすればレンダリングブロックする要素は1つ減ります。

なので、なんとかasync属性を付けたかったのです。

目次に戻る

そして、結果いきついた解決方法（と思われる）ものは以下のようにします。

wp_enqueue_script(
 'jquery',
 '//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js',"async",
 array(),
 '1.11.3',
 false
 );

function.php内のコードに"async"とただ単に付け加えてみました。

そうしたところ、ページのソースを見ると

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js?ver=1.11.3'></script>

はheader（ヘッダー）内からはなくなり、

footer（フッター）より下の<body>タグの終了部分</body>直前に移行されて、
さらに非同期の"async"がちゃんとついていました。

今のところこれで様子を見ています。

ですが、
本来？なら以下のようにコード記載するべきなのかなぁ。と思ってもいます。

// 非同期にするコードここから
 if (!(is_admin() )) {
 function add_async_to_enqueue_script( $url ) {
 if ( FALSE === strpos( $url, '.js' ) ) return $url;
 if ( strpos( $url, 'jquery.min.js' ) ) return $url;
 return "$url' async charset='UTF-8";
 }
 add_filter( 'clean_url', 'add_async_to_enqueue_script', 11, 1 );
 }
 // 非同期にするコードここまで

ただ、
上記コードをfunction.php内に追記すると確かに"async"属性は付くのですが、
すべてに"async"属性が付与されてしまっていつまで経っても、表示されるはずのページ全ての読み込みが終わりませんでした。

こんな感じにソースはなりました。

なので、
はじめに記載した超初歩的な？ことをしてみた結果…。

非同期にしたいものだけを非同期にすることができ、かつページの表示されるべきものも全てが通常通りに読み込まれました。

他にも"defer"属性を付ける方法もありますが試してはいません。
"defer"を付与するコードは以下です。

（上記の"async"部分を"defer"に変えるだけです。）

if (!(is_admin() )) {
 function add_defer_to_enqueue_script( $url ) {
 if ( FALSE === strpos( $url, '.js' ) ) return $url;
 if ( strpos( $url, 'jquery.min.js' ) ) return $url;
 return "$url' defer onload='myInit()";
 }
 add_filter( 'clean_url', 'add_defer_to_enqueue_script', 11, 1 );

WordPressの関数的？には、こういった書き方（記述）が正しいのかもしれません。

その他の解決方法と思われるwp_enqueue_scripts()に対する非同期方法

function replace_script_tag ( $tag ) {
 return str_replace( "type='text/javascript'", 'async', $tag );
 }
 add_filter( 'script_loader_tag', 'replace_script_tag' );

や、

//wp_enqueue_script にasyncを追加する。
 function st_register_jq_script( $tag, $handle ) {
 if ( 'st_register_jq_script' !== $handle ) {
 return $tag;
 }
 return str_replace( ' src', ' async="async" src', $tag );
 }
 add_filter( 'script_loader_tag', 'st_register_jq_script', 10. 2 );

という具合に記述するのが本来なのかとは思います。

今のところうまい具合にいっているので、
一番はじめに上記したので対応中です。

今後、変更することはあると思われます。
（さらに、コメントなどでご指摘など大歓迎ですm(._.*)mペコッ）