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

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

所要時間目安：約 2 分

This session is using　 IPv4 　is established in

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

ショートコード作り方テンプレートから呼び出す方法などいろいろ

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

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

目次に行く･戻る

+本日の人気記事TOP10+

メルカリ招待コード：

ふぅ～ε=(・ρ・*) フゥ、やっとできた！！

ここ数日なんとかサイトのページ表示速度をできるだけ速く高速化したいなぁ。とずぅ～っと考えていました。今日も昨日も記事にしていますが^^;）（汗）…。おそらく完成形かと思われるレンダリングブロックされているジャバスクリプト（JavaScript）の非同期にする方法の完成形です。！！
（たぶん←今のところ問題はないと確認しています。）

実はとっても簡単だったというオチ…。

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

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

（こんなこともしてみました。）

無知って、「知らぬが仏」ということわざがありますが、「無知ほど怖いものはない」といった言葉もあります。

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

田中角栄さんの名言でもある逆の「知らぬは一生の恥」、
「聞くのは一時の恥」なんて言葉もあります。

（これ逆だったかなぁ。「聞くのは一時の恥」「知らぬは一生の恥」だったかも(*゜.゜)ゞポリポリ）

まぁ、言葉は使いようなのでしょうが、知ることで・学ぶことで・勉強することで達成感や喜びも感じることができます。

ほんでもって本題のレンダリングブロックされているジャバスクリプト（JavaScript）の非同期化の方法ですが、

以前の記事にいろいろと試してみた内容を書きましたが以下のコードを子テーマのfunction.phpに追記するだけで、ちゃんと非同期化できました。

そのコードは以下になります。

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

この上記コードを子テーマのfunction.phpに追記するだけでレンダリングブロックしているジャバスクリプト（JavaScript）にちゃんとasync属性が付与されて非同期化されます。

以下の画像のようになります。

（ちょっと見えにくいですが、src='の前にちゃんとasyncが付いています。）

なお、以前の記事で紹介した以下のコードの"async"の部分は削除しました。

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

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

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

削除しなくても、問題なく動作していましたが最下部の</body>タグの前に追加・追記される形になってしまうので、一応元に戻しておきました。

以下の参照サイトによって確信を得ました！！^^;）

WordPressのscript_loader_tagを使ってscriptタグをすっきりする

WordPressでJavascriptを読み込むに使われるwp_enqueue_script()があります。wp_enqueue_script()の使い方は、wp_register_scriptとwp_register_styleの使い方に書いてある通りにしていただければ大丈夫です。WordPressで使われるwp_enqueue_script()は、Javascriptの依存関係やプラグインが使うJavascriptとの調整に使えてとても便利なのですが、今までwp_enqueue_script()に不満に思っていた点がありました。

YOUNG FLAVOR

どちらが良いのかは個人的には、
上記コードにも"async"属性は付けておいたほうが良いのかなぁ。

とも思いますが、
とりあえずは大事なfunction.php内のコードなので、デフォルトのテーマ内のfunction.php内のコードは元に戻しておきました。

今後、様子を見て上記コードの様に"async"属性は付けてみるかもしれません。

「Stinger6, Stinger7, WordPress, インターネット, カスタマイズ, テーマ, 伝えたいこと, 備忘録」同じカテゴリーの記事一覧

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

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

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

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

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

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

あなたにおすすめ

: AdSense AFFINGER4Pro STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ伝えたいこと備忘録
関連記事内（途中）にインフィード広告を入れる挿入方法
先月いや先々月の7月初旬頃かと思います。Google Adsenseにおいて、インフィード広告や関連コンテンツ内広告そして記事内広告の3つが追加されてこれまでよりより使いやすくなりました。（…
もっと読む

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

: 伝えたいこと備忘録時事ネタ
米FTCアマゾンを独禁法違反疑いで提訴と日立家電品正規取扱店制度
具体的には、アマゾンが主力事業のネット通販で出店している小規模事業者に対して高額な手数料を請求したほか、事業者が他の競合サイトで安く販売した場合、アマゾンのサイトでは検索しづらくしたなどと指摘していま…
もっと読む