【WordPress】Scriptタグを無理やり非同期にして表示速度を高速化してみた

公開日: 更新日: Wordpress
Knowledge Base Wordpress カスタマイズ




※この記事は効果と影響について未確認のため、参考程度に読んでください。

WordPressはアクセスされるたびにデータベースから該当するデータを引っ張り、テーマを通して表示する・・・という作業を繰り返してページの表示をしているため、htmlで作成するページと比べると同じ内容でも表示速度はどうしても遅くなります。

それを軽減するためになるべくプラグインを使わない、とか、キャッシュ系のプラグインを使う、とか、CDNを使って一時的にhtmlページを作っておきそれを表示するようにする・・・などという方法を用いると思います。が、私の検証結果では根本的な原因は他にあることがほとんどです。

リンク先ページでも書いている通り、諸悪の根源?は外部のサイトから何かを読み込んで表示する「ブログパーツ」や「広告コード」。これを外すことで各段に表示速度が速くなります。

当サイトもGoogle Analyticsの情報によると、平均的な表示時間が11秒かかっていたようです(速度計測ツールを使った瞬間的な表示時間やトップページだけの表示時間はあてになりません)。この状態から外部とやり取りするようなパーツを外したら・・・ごちゃごちゃやるよりも手っ取り早く半分位の時間で表示されるようになりました。

一番ボトルネックになっていたのは【にほんブログ村】のPVランキング用パーツ。これを貼らないとブログ村のPVランキングに参加できないばかりか、同じパーツを貼っているサイトからの流入や被リンクの恩恵がなくなってしまうんです。

まあ被リンクについては良質?かどうかによって評価も変わってくるかもしれないので何とも言えないところですが、そうはいっても少しでも良い効果がありそうなものは取り入れておきたいところ。

でも・・・このパーツ本当に重いんです。そして、非同期のコードは提供されていないんです(要望を上げられている方がいるようですが、この記事を公開する段階では未対応です)。

今回は私のサイトで表示速度低下のボトルネックになっていた【にほんブログ村】のPVランキング用パーツ(これを張り付けないとPVランキング参加できません)を非同期にすることで読み込み速度を改善しよう!!というのがテーマです。別にこのパーツでなくてもJavaスクリプトを使って読み込んでいるパーツなどでは改善が期待できると思います。

同期のスクリプトを強制的に非同期にする方法

を参考に同期読み込みのScriptタグを非同期化してみました。

挿入するコードは

//javascriptの非同期
function remove_script_type($tag) {
return str_replace("type='text/javascript'" , "async='async'" , $tag);
}
add_filter('script_loader_tag' , 'remove_script_type');
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

これをテーマのfunctions.phpへ追記するだけです。
※参考サイトのコードはコピー不可(右クリック不可)だったためコピー用にコードを引用させていただいております。

このコードが行っていることは【同期で読み込みなさいとしている「type='text/javascript'」という文字列を非同期で読み込みなさいという「async='async'」という文字列へ変更する】というもの。

要するに同期コードしか提供されていないSctiptコードを強制的に非同期コードにしてしまうということをします。

これによって、アクセスされるたびにいちいち外部サイトとデータのやり取りをして結果が返ってくるまでじーーーっと待っていた(完全表示までに時間がかかっていた)ものをひとまず表示優先にしてくれ!!という動作になり、結果的に外部とのやりとりによる表示速度低下を防げるという方法です。

ただ懸念すべきは

  1. 非同期にしてしまっているので正確な情報が伝わらない(収集できない)可能性がある
  2. サイト内すべての同期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属性を加えることでランキング表示されない事態となってしまいました。

何でだろう・・・・ということでさらに研究を続けていこうと思います。また続報をさせていただきます。

【スポンサーリンク】