※この記事は効果と影響について未確認のため、参考程度に読んでください。
WordPressはアクセスされるたびにデータベースから該当するデータを引っ張り、テーマを通して表示する・・・という作業を繰り返してページの表示をしているため、htmlで作成するページと比べると同じ内容でも表示速度はどうしても遅くなります。
それを軽減するためになるべくプラグインを使わない、とか、キャッシュ系のプラグインを使う、とか、CDNを使って一時的にhtmlページを作っておきそれを表示するようにする・・・などという方法を用いると思います。が、私の検証結果では根本的な原因は他にあることがほとんどです。
リンク先ページでも書いている通り、諸悪の根源？は外部のサイトから何かを読み込んで表示する「ブログパーツ」や「広告コード」。これを外すことで各段に表示速度が速くなります。
当サイトもGoogle Analyticsの情報によると、平均的な表示時間が11秒かかっていたようです（速度計測ツールを使った瞬間的な表示時間やトップページだけの表示時間はあてになりません）。この状態から外部とやり取りするようなパーツを外したら・・・ごちゃごちゃやるよりも手っ取り早く半分位の時間で表示されるようになりました。
一番ボトルネックになっていたのは【にほんブログ村】のPVランキング用パーツ。これを貼らないとブログ村のPVランキングに参加できないばかりか、同じパーツを貼っているサイトからの流入や被リンクの恩恵がなくなってしまうんです。
まあ被リンクについては良質？かどうかによって評価も変わってくるかもしれないので何とも言えないところですが、そうはいっても少しでも良い効果がありそうなものは取り入れておきたいところ。
でも・・・このパーツ本当に重いんです。そして、非同期のコードは提供されていないんです（要望を上げられている方がいるようですが、この記事を公開する段階では未対応です）。
今回は私のサイトで表示速度低下のボトルネックになっていた【にほんブログ村】のPVランキング用パーツ（これを張り付けないとPVランキング参加できません）を非同期にすることで読み込み速度を改善しよう！！というのがテーマです。別にこのパーツでなくてもJavaスクリプトを使って読み込んでいるパーツなどでは改善が期待できると思います。
同期のスクリプトを強制的に非同期にする方法
WORDPRESSの速度表示を改善するためSCRIPTタグの読み込みを非同期にする方法を参考に同期読み込みのScriptタグを非同期化してみました。
挿入するコードは
//javascriptの非同期
function remove_script_type($tag) {
return str_replace("type='text/javascript'" , "async='async'" , $tag);
}
add_filter('script_loader_tag' , 'remove_script_type');これをテーマのfunctions.phpへ追記するだけです。
※参考サイトのコードはコピー不可（右クリック不可）だったためコピー用にコードを引用させていただいております。
このコードが行っていることは【同期で読み込みなさいとしている「type=’text/javascript’」という文字列を非同期で読み込みなさいという「async=’async’」という文字列へ変更する】というもの。
要するに同期コードしか提供されていないSctiptコードを強制的に非同期コードにしてしまうということをします。
これによって、アクセスされるたびにいちいち外部サイトとデータのやり取りをして結果が返ってくるまでじーーーっと待っていた（完全表示までに時間がかかっていた）ものをひとまず表示優先にしてくれ！！という動作になり、結果的に外部とのやりとりによる表示速度低下を防げるという方法です。
ただ懸念すべきは
- 非同期にしてしまっているので正確な情報が伝わらない（収集できない）可能性がある
- サイト内すべての同期Sctiptコードを非同期にしてしまうのでどこかに影響が出る可能性がある
いずれもサイトの環境によって違うと思われるので、設定したら自身で検証してみていただきたいと思います（そういう意味で冒頭に「未確認な情報」と書かせていただいたわけです）。
一応ざっと確認したところ当サイトでは問題ないようですし、【にほんブログ村】のPVランキング用パーツを入れても表示速度の低下はみられないですし、PVランキングポイントも加算されているようなので正解！かも知れませんが、今後検証しながら追記していこうと思います。
※Google Adsenseを使用している方は広告コードを非同期コードにしてから試してください（当サイトではすでに非同期コードで広告挿入しているのでそのまま上のコードをfunctions.phpへ追記しました）。
非同期にするものを限定的にするには
これまで紹介した方法ではサイト内にあるすべての同期スクリプトコード（type=’text/javascript’）が非同期コード（async=’async’）に書き変わってしまうため、プラグインやテーマ、パーツなどによっては何か影響があるかもしれません。
私のように「ブログ村のパーツだけ」ということが明確な場合は何もfunctions.phpへ追記してすべてを置き換えてしまわなくても、パーツに書かれている「type=text/javascript」を「async」に変えれば済む話ですから、そちらの方が安全な方法なのかも知れません。
2018年8月17日追記 【ブログ村のPVランキングパーツ】では使えなかった
変更した当初は「これでOK」と思われたにほんブログ村のPVランキングパーツ（当サイトサイドバーにあるブログ村のランキングウィジェットのことです）ですが、async属性を加えることでランキング表示されない事態となってしまいました。
何でだろう・・・・ということでさらに研究を続けていこうと思います。また続報をさせていただきます。
