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, インターネット, カスタマイズ, テーマ, 伝えたいこと, 備忘録」同じカテゴリーの記事一覧

: Stinger6トップページ記事間にアドセンス広告を表示・入れる方法

: WordPressプラグインなしでコンタクトフォームを作成方法

: スマホやモバイル端末でサイドバー非表示・削除にする方法

: Stinger7にテーマ変更してみたが…。

: カエレバ・ヨメレバをCSSでカスタマイズする方法

: WordPressブログカード作成方法

あなたにおすすめ

: WordPress テーマ伝えたいこと備忘録
zenbackのイメージ画像を丸くする方法
つい先の投稿で関連記事のイメージ画像を丸くする方法を投稿しました。ですが、それだけですと全体的なバランスが取れないことに気づきました^^; なので、 zenbackという関連記事？などを表示するツ…
もっと読む

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

: Stinger6 WordPress カスタマイズ
記事の上に今日の人気記事を表示する方法
↑ のように、個別記事のタイトルの上に「本日の人気記事」というものを表示する方法です。 WordPressにおいては、 WordPress Popular Postsという人気記事のプ…
もっと読む

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

: スマホ伝えたいこと備忘録
アクセス数を増やす方法!!それはスマホ…。
ブログやホームページなどのサイトを運営していると、やはり気になるのがアクセス数だと思いわれます。ここ2年から3年で一般人や普通の人？（表現が曖昧ですが無礼のないように）でも、はてなブログやWordP…
もっと読む

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

: AFFINGER4Pro STINGER PLUS+ Stinger6 WordPress カスタマイズ伝えたいこと備忘録
ブログデザインがセンスの良いレイアウトやデザインにならない。Simple is Bestにしたい…。
人に見ていただくのでブログ運営においてデザインも重要です。自分の備忘録のみであれば、然程デザインやユーザビリティにこだわらなくても良いのかもしれません。テーマを変えてみようと思いましたが、これまでのカ…
もっと読む

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

: AdSense スマホ伝えたいこと備忘録
クリック率(CTR)や広告配置について考えてみる…。
当ブログはGoogle AdSense（グーグルアドセンス）による広告配信？をしています。そんな中で多くの方々が考えたことのあるであろう広告の配置の仕方についてです。広告配置にはいろいろな配置の場所。…
もっと読む