Loading…

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

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

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

ページ表示速度高速化

所要時間目安:3

This session is using  IPv4  is established in

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

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

目次に行く・戻る

メルカリ招待コード:

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

読み込みを遅くする要因は、
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の文字コードUTF-8(BOMなし)

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

WordPressの文字コードはUTF-8で改行LFにて保存する方法

えーっと、この度WordPressのバージョンを4.6.1にバージョンアップしてから管理画面にjetpack4.3.2のダッシュボードを表示した際に、ちょっとしたWarningメッセージが表示されるよ…

もっと読む

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

温泉の入り方

伝えたいこと 備忘録 旅行

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

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

もっと読む

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

WordPress 不具合 伝えたいこと

Important notice for administrators

先月にWordPressのプラグインで有名な人気記事などを表示することが簡単にできるWordPress Popular Postsにて、以下のようなエラーメッセージが表示されるようになりました。 エラ…

もっと読む

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

ショートコード

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

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

ショートコードって学べば学ぶほど色々な活用方法があるんだなぁ。と実感している毎日です。 もちろん、他にも様々な関数を使ってもっともっと多くのカスタマイズなどができると思います。 今の私には、 そこまで…

もっと読む

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

Bloggerのダッシュボードが変わった

SNS インターネット 伝えたいこと 備忘録 時事ネタ

Bloggerダッシュボードデザインが変わって戸惑った…。

数年前から運用しているGoogleの無料サービスブログのBloggerというものがあります。このBloggerのダッシュボード(ホーム画面?)のデザインが今日いきなり変わっていてビックリしました。以前…

もっと読む

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

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

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

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

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

もっと読む

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

おすすめの記事一部広告

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

Multiplex 広告

おすすめ!!

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

おすすめ2

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

Total242


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

目次に戻る

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

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

目次に戻る

目次に戻る


コメントを閉じる

comment

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

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