現在の接続環境は
です

記事内にプロモーションが含まれています。

Windows10サポート終了まで
¥1,650 (2024/11/30 16:49時点 | Amazon調べ)

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

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

ページ表示速度高速化

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

所要時間目安:3

This session is using  IPv4  is established in

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

2025年2月8日 (土曜日)↓における週間月間人気記事トップ3は?↓

  • 本日
  • 週間
  • 月間
  1. エクストレイルT32で電動レカロをバッ直でなく車に取り付ける方法 2PV

    RECAROシートというとサーキット走行や車好きの方々が取り付けるちょっと高級な車のシートというイメージをお持ちかもしれません。RECAROシートにもいくつも種類があって本当に腰痛対策用など医療的な面…

    もっと読む

  2. エンジンスターターリモコン

    カーメイトのエンジンスターターでエラー15表示と対処方法 2PV

    夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…

    もっと読む

  3. キーシリンダー

    TOYOTAキーレスリモコンの設定方法とキーナンバー(キー番号) 1PV

    この度は(今回は?)、プラスチックの経年劣化により車のキーレスリモコンキーの送信機側(トランスミッター)のみをなくしてしまった場合です。(まだスマートキーやインテリジェンスキーと言われる前のキーレスリ…

    もっと読む

  1. エンジンスターターリモコン

    カーメイトのエンジンスターターでエラー15表示と対処方法 38PV

    夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…

    もっと読む

  2. カーナビテレビが見れなくなったICカードが正常に動作しませんでした

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

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

    もっと読む

  3. アイドリングストップシステム異常警告灯表示対処方法 13PV

    2010年前後以降の車に搭載されていることの多いアイドリングストップシステム。各自動車メーカーによって呼び名は異なりますが、機能としては信号待ちが長い時や停止時間が長い時などに勝手に(自動的に)アイド…

    もっと読む

  1. エンジンスターターリモコン

    カーメイトのエンジンスターターでエラー15表示と対処方法 38PV

    夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…

    もっと読む

  2. カーナビテレビが見れなくなったICカードが正常に動作しませんでした

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

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

    もっと読む

  3. アイドリングストップシステム異常警告灯表示対処方法 13PV

    2010年前後以降の車に搭載されていることの多いアイドリングストップシステム。各自動車メーカーによって呼び名は異なりますが、機能としては信号待ちが長い時や停止時間が長い時などに勝手に(自動的に)アイド…

    もっと読む

今日は2025年2月8日です。

目次に行く・戻る

メルカリ招待コード:

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

読み込みを遅くする要因は、
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ペコッ)

 

Stinger6, Stinger7, WordPress, インターネット, カスタマイズ, テーマ, 伝えたいこと, 備忘録」の人気記事

バレンタインまであと…VALENTINEはどんなPresent(プレゼント)でどのように過ごされますか?

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

おすすめ!!

世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!

おすすめ2

楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に!!楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。

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

0

カウントダウンタイマー

あなたにおすすめな関連記事

🎉 Counting Up! 🎉
Loading...
スマホでのピンチアウト操作方法

STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ 伝えたいこと 備忘録

スマホでピンチアウトできないStinger6、Stinger7、StingerPLUS+でのピンチアウト方法

WordPressでのテーマとして超有名でかつ、カスタマイズ性に優れたStingerシリーズがあります。 そのStingerシリーズ(micataシリーズとAFFINGERシリーズ)では、最近(昨今流…

もっと読む

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

伝えたいこと 備忘録 時事ネタ

Googleを独禁法違反で審査 公取委、検索寡占を解明へ

公正取引委員会(公取委)が、Google(グーグル)を検索サービス(検索ポータルサイト。検索プラットフォーム)の独占禁止法疑いで審査へとのことのようです。(調査) ググるという言葉が出来たのが2000…

もっと読む

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

no image

備忘録

プラーバシーポリシー

プライバシーポリシー 当サイトに掲載されている広告について当サイトでは、第三者配信の広告サービス(Googleアドセンス、A8.net、Amazonアソシエイト、バリューコマース、)を利用し…

もっと読む

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

BRAUN電気シェーバーシリーズ9とラムダッシュ

伝えたいこと 備忘録 旅行 時事ネタ

電気シェーバーおすすめのBraunシリーズ9替刃F/C90意外と…。

男性の髭って、あると痛いですよね。 でも、ちょっと濃い目の髭だとなかなか電気シェーバーだと剃り残しや剃り切れないことって多いと思われます。 私の旦那は、ちょっと濃い目の髭になっております。 そんな旦那…

もっと読む

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

RSSフィードにアイキャッチ画像と続きを読むを表示させる方法

STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ 伝えたいこと 備忘録

RSSフィードにアイキャッチ画像を表示させる方法Feedlyなど

WordPressでのブログ運営にして間もなく一年が経とうとしています。 はじめは試行錯誤でphpって何?functionって日本語だと機能って意味だけれど何?みたいな感じでした。まぁ、今でも超有名な…

もっと読む

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

記事上に人気記事表示

Stinger6 WordPress カスタマイズ

アイキャッチ画像設定し忘れプラグインなし自動設定方法Stinger6

WordPressを使用すると、 アイキャッチ画像の設定が簡単に可能になります。 中でも人気のテーマStingerシリーズだとなおさらいろいろな機能が元々色々あってとても便利です。 そのStinger…

もっと読む

あなたが訪問してから

0 秒経過 🎉

あなたが訪問してから

0 秒

おすすめの記事一部広告

お小遣い稼ぎにアンケート。

Multiplex 広告

Total492


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

目次に戻る

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

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

目次に戻る

目次に戻る


コメントを閉じる

comment

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


This site uses Akismet to reduce spam. Learn how your comment data is processed.