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

プロモーションを含みます

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

2025年11月15日 (土曜日)本日の人気記事トップ１０

目次に行く･戻る

メルカリ招待コード：

所要時間目安： 約 3 分

This session is using　 IPv4 　is established in

今日は2025年11月15日です。

カーメンテナンスWAKO'S

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

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

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

 

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

 

アドセンス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"属性が付与されてしまっていつまで経っても、表示されるはずのページ全ての読み込みが終わりませんでした。

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

非同期コード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ペコッ）

 

追記）解決しました。以下を参照してください！！

 

あなたにおすすめ

人気の商品が日替わりで登場。毎日お得なタイムセール「Amazonタイムセール全体」

出展：Amazonタイムセール

人気の商品が日替わりで登場。毎日お得なタイムセール

埼玉県子ども虐待条例についてNHK
伝えたいこと 備忘録 時事ネタ

埼玉県子ども虐待条例について

10月7日のニュースにて知ったのですが、埼玉県にて子ども虐待条例という条例が2023年10月10日可決される見通しとの事でした。 この内容を拝見してどう思うのか。または実際にこのようなことが可能なのか...

さらに読む…。

WXR-1900DHP2
PC 伝えたいこと 備忘録 無線LANルーター

オススメの無線LANルーターはWXR-1900DHP2評価とレビュー

以前、以下のような記事を書きましたが、それ以来使用してもうすぐ3ヶ月になります。 その間には光回線を200Mbpsから1Gbpsへと変更もしました。 また、コラボひかりが流行っていて電話などが多かった...

さらに読む…。

錦織圭君ノドグロ
伝えたいこと

ノドグロ枯渇の恐れが…。錦織君影響スゴイなぁ

  2014年の全米オープンテニスで見事準優勝という偉業を成し遂げたプロテニスプレーヤーの錦織圭君です。 もうみなさん周知の事実ですよね。 世界的にも、 超有名人になってくれました。 （＾ｖ...

さらに読む…。

欧州連EU諸国の法律でCookie許可通知
インターネット 伝えたいこと 備忘録 時事ネタ

欧州連合の法律により、欧州連合からの訪問者には、ブログで使用されている Cookie に関する情報を提供する必要があります。また、これらの法律では多くの場合、同意を得ることが求められます。

長いタイトル通りですが、EU欧州連合においてはサイトを閲覧される際にCookieを使用していますよ。的な通知を表示するのが法律で定められているらしい。Googleの無料ブログサービスBloggerのダ...

さらに読む…。

日本郵便グループかんぽ生命
セキュリティ 伝えたいこと 備忘録 時事ネタ

日本郵便、郵便局内にてゆうちょ銀行顧客情報を不正利用合計1000万人分

日本郵政は2007年に可決された郵政民営化後に徐々に郵便事業・簡易保険事業（かんぽ生命）貯金事業（ゆうちょ銀行）の3本柱を分社化し完全民営化してくということでした。郵政民営化法からもう少しで約20年に...

さらに読む…。

ハイブリッドHDD
PC Windows10 カスタマイズ カスタマイズ 伝えたいこと 備忘録

dynabookEX56/MRDにST1000LM014ハイブリッドHDDに交換・換装したレビュー評価

もう数年前と言うには、ある意味ふさわしくはなくなってきたハイブリッドHDD（SSHD）です。 Seagate社をはじめ東芝製ハイブリッドHDDなど数社が、既に1TBを超えるハイブリッドHDD（SSHD...

さらに読む…。

関連記事

メンテナンス
カーナビテレビが見れなくなったICカードが正常に動作しませんでした
ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法

本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…

もっと読む

メンテナンス
MM518D-L
日産ディーラーオプションナビMM316D-WからMM518D-L交換（換装）NISSAN純正ナビリモコン

ある程度、年式がたった車においてはディーラーオプションナビ（DOP）やメーカーオプションナビ（MOP）の地図データが古くなったり、ナビのモニタインチ数が大きくなったりします。地図データが古くなるのはも…

もっと読む

メンテナンス
キーレスリモコン破損
車のキーナンバー確認方法。キーレス紛失や壊れた時

初めての経験でした。（汗）…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。（汗）…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …

もっと読む

【Amazonふるさと納税】12月31日まで！

【AmazonAudible】10月11日～1月21日まで！

Auto Spec ニッサン エクストレイル T32前後期に適合 内蔵型コンソールボックス 車内収納ボックス 2ポートUSB充電付き 車種専用設計 センサーLEDライト付き 小物入れ 滑り止めマット付き 収納アクセサリー 装着簡単 (ニッサン・エクストレイル T32前後期, ブラック)
¥5,980 （2025/09/20 19:25時点 | Amazon調べ）
Amazon
楽天市場
Yahooショッピング
メルカリ
NISSAN(ニッサン) 日産純正部品 リモコン TV & VTR B8084-C9993
¥7,800 （2025/09/13 14:27時点 | Amazon調べ）
Amazon
楽天市場
Yahooショッピング
メルカリ

【Amazon初回ユーザー登録・Kindle本初回有料購入で特別ボーナス】10月31日まで！

【AmazonタイムセールSALE車＆バイク】！


Multiplex 広告

入学入社まであと…入学入社祝いはどんなPresent（プレゼント）でどのように過ごされますか？

ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。

ブログサービスが始まってから:


カウントダウンタイマー

おすすめの記事一部広告


Total896


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

目次に戻る

よろしかったらシェアよろしくお願いします。

この記事タイトルとURLをコピー

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

目次に戻る

目次に戻る

コメントを表示（0）

コメントを書く

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

新着コメント

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

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