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

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

所要時間目安：約3分

This session is using　 IPv4 　is established in

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

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

この記事は2016年6月10日のものです。現在は状況が異なる可能性がありますのでご注意ください。

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

目次に行く･戻る

+本日の人気記事TOP10+

メルカリ招待コード：

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

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

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

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

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

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

アドセンス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ペコッ）

あなたにおすすめ

: Stinger6 Stinger7 WordPress カスタマイズ備忘録
プラグインなしでブログカードを新規タブで開く方法とコード
先日、 WordPressにおいてブログカード（内部リンク用）を作成するショートコードのphp関数コードを紹介しました。 https://infovarious.com/post-852…
もっと読む

インフィード広告アドセンス

: WordPress カスタマイズ伝えたいこと備忘録
ページ表示速度が遅いのでphotonが使いたくてJetpackプラグインをインストールしてみた…。
ここのところ、サイト（ブログ）のページ表示速度が気になってしまいます。以前に運営していたBloggerブログでも同様のことを考えたりしていました。ですが、サイトのページ表示速度が少しくらい遅くても時代…
もっと読む

インフィード広告アドセンス

: WordPress カスタマイズ伝えたいこと備忘録
ブログに目次表示動画解説付きでTable of Contents Plus（TOC+）の設定方法
これまでは、ブログにおいて目次表示は要らないかなぁなんて思っていました。ですが、多くのサイトの方々が導入されているということとSEO的にも若干良いということなのと、訪れていただいたユーザーのユーザ…
もっと読む

インフィード広告アドセンス

: WordPress カスタマイズカスタマイズテーマ伝えたいこと備忘録
RSSフィードにアイキャッチ画像をしっかりと表示する方法
これまでに何度かThemeによってRSSフィードやFeedlyなどにアイキャッチ画像が表示されないThemeがあります。このアイキャッチ画像を今更ながら再検証してみました。以前にfunction.ph…
もっと読む

インフィード広告アドセンス

: 伝えたいこと時事ネタ
ジャニーズ問題で考えること
まずはじめに投稿するか迷いましたが、当ブログにおいてはカテゴリーを時事ネタと伝えたいこととして投稿します。不快な方などがいましたら削除いたします。 2023年3月にイギリスのBBCにてドキュメンタリー…
もっと読む

インフィード広告アドセンス

: Android iPhone スマホ伝えたいこと
今、一番人気のあるiPhoneアプリとAndroidアプリ
今では当たり前になってきている？スマホです。大きく分けるとすると、 iPhoneとAndroid系のスマホに2種類に分けられます。そんな中でも、使用する人によってインストールされるアプリ…
もっと読む