Loading…

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

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

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

ページ表示速度高速化

所要時間目安：約3分

This session is using　 IPv4 　is established in

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

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

カーメンテナンスWAKO'S

  • 本日
  • 週間
  • 月間
  1. パナソニックカオスバッテリーS-115

    エクストレイルT32おすすめバッテリーPanasonicカオスバッテリー 3PV

    すべての車でバッテリーが搭載されています。特にアイドリングストップ車以降現在主流になりつつある電気自動車などではバッテリーの性能がとても重要になってきます。今回は日産エクストレイルT32においておすす…

    もっと読む

  2. キーシリンダー

    TOYOTAキーレスリモコンの設定方法とキーナンバー（キー番号） 2PV

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

    もっと読む

  3. ヘッドライトクリーニングにダイソーアルカリ電解水で黄ばみクスミが綺麗に 1PV

    ヘッドライトは経年劣化で黄ばんできてしまいます。特にここ10年くらいの車のヘッドライトはプラスチック製のヘッドライトカバーになってきています。昔のようにガラスではありませんので、より経年劣化が目立って…

    もっと読む

  1. パナソニックカオスバッテリーS-115

    エクストレイルT32おすすめバッテリーPanasonicカオスバッテリー 3PV

    すべての車でバッテリーが搭載されています。特にアイドリングストップ車以降現在主流になりつつある電気自動車などではバッテリーの性能がとても重要になってきます。今回は日産エクストレイルT32においておすす…

    もっと読む

  2. キーシリンダー

    TOYOTAキーレスリモコンの設定方法とキーナンバー（キー番号） 2PV

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

    もっと読む

  3. ヘッドライトクリーニングにダイソーアルカリ電解水で黄ばみクスミが綺麗に 1PV

    ヘッドライトは経年劣化で黄ばんできてしまいます。特にここ10年くらいの車のヘッドライトはプラスチック製のヘッドライトカバーになってきています。昔のようにガラスではありませんので、より経年劣化が目立って…

    もっと読む

  1. パナソニックカオスバッテリーS-115

    エクストレイルT32おすすめバッテリーPanasonicカオスバッテリー 3PV

    すべての車でバッテリーが搭載されています。特にアイドリングストップ車以降現在主流になりつつある電気自動車などではバッテリーの性能がとても重要になってきます。今回は日産エクストレイルT32においておすす…

    もっと読む

  2. キーシリンダー

    TOYOTAキーレスリモコンの設定方法とキーナンバー（キー番号） 2PV

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

    もっと読む

  3. ヘッドライトクリーニングにダイソーアルカリ電解水で黄ばみクスミが綺麗に 1PV

    ヘッドライトは経年劣化で黄ばんできてしまいます。特にここ10年くらいの車のヘッドライトはプラスチック製のヘッドライトカバーになってきています。昔のようにガラスではありませんので、より経年劣化が目立って…

    もっと読む

目次に行く･戻る

メルカリ招待コード：

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

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

 

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

 

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

トップページのアイキャッチ画像を丸くする方法

WordPress テーマ 伝えたいこと 備忘録

トップページの記事のイメージキャプチャ画像を丸くする方法

えーっと…。 カスタマイズというものは、 やってもやってもどこか抜け目があってしまうというものなのか…。(´～｀ヾ) ポリポリ・・・ 関連記事のイメージ画像を丸くする方法 zenbackのイメージ画像…

もっと読む

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

はてブボタン

SNS インターネット カスタマイズ ツール 伝えたいこと 備忘録

はてブボタンオリジナル作成方法

現在のサイトには企業のホームページやサイト、そして個人のブログやサイトには、 必ずあると言っても過言ではないソーシャル系のSNSボタンです。 その中のはてなブックマークボタンのオリジナルの作成方法につ…

もっと読む

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

温泉の入り方

伝えたいこと 備忘録 旅行

温泉の入り方とマナーが分かりやすい

温泉の入り方やマナーを日本人であれば概ね分かっていると思います。ですが、外国人の観光客の方などは温泉や湯船に浸かるという入浴方法などの文化がない国もあります。なので、温泉への入り方やマナー自体が分から…

もっと読む

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

ハイブリッドHDD

PC Windows10 カスタマイズ カスタマイズ 伝えたいこと 備忘録

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

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

もっと読む

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

引用元サイトの選択テキスト部分を自動的に生成された引用タグ表示場所

PC カスタマイズ ツール ブックマークレット 伝えたいこと 備忘録

引用元＜blockquote＞＜/blockquote＞タグを自動生成するブックマークレット選択したテキスト部分のみ

ブログをやっている方やサイト運営されている方って、必ずと言っていいほど引用することが出てくると思います。 毎回毎回、 引用部分をコピペして引用元サイトのURLリンクなどを何度かの操作をして作るのって面…

もっと読む

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

Windows10不具合

PC Windows10 不具合 伝えたいこと 備忘録

Windows10不具合、コルタナと検索窓が表示できない時の対処方法

Windows10がリリースされてもうすぐ半年になります。 その中でも意外と不具合？が多いと言われてもいます。 ですが、 昨年11月のメジャーアップデート（TH1511）によってかなり改善されてコルタ…

もっと読む

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

おすすめの記事一部広告


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

Multiplex 広告

おすすめ！！

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

詳細ページへ

No.1シェアAmazon

おすすめ2

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

詳細ページへ

楽天市場

Total286


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

目次に戻る

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

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

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

目次に戻る

目次に戻る

コメントを閉じる

comment

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

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

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

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

You may choose to prevent this website from aggregating and analyzing the actions you take here. Doing so will protect your privacy, but will also prevent the owner from learning from your actions and creating a better experience for you and other users.