Javascriptを非同期化させてWordPressを高速化!

PAK86_codeing20140517

久しぶりのお仕事ブログ更新 (> <;) アメブロの方は、ほぼ毎日更新しとるんですが...トホホホ さて、先日、Facebookでひろった情報をこのブログで試してみとところ体感できるぐらいの効果を感じたので、記事にしてみました。

それは、Wordpressの高速化ネタです。
このブログでも、今まで、プラグインを使わずに高速化させること.htaccessでWordpressの圧縮、キャッシュ設定をやってみたりして、それなりに高速化にも取り組んできました。
で、今回は高速化に挑戦する時に、いつも課題としてあげられるJavascript関連での高速化の手法です。

Javascriptを非同期化させてWordpressを高速化


[M] WordPressでscript要素をまるっとサクッと非同期化する方法 | mbdb (モバデビ)

詳しい内容は、mbdbさんで確認して下さい(笑)

実際にこのブログで試してみたところ、ページの読み込みスピードが若干なりとも速くなった気がするんですよね。
今まで、グーーーーーーーッと読み込んでたところが、グーーーッスッって感じになった気がw

何秒とか、どの項目がとかいうのは、誰かやってみて記事にして下さい(笑)。

非同期化のやり方

簡単です。
サクッとできます。

以下のコードをfunctions.phpの一番下にでも、コピペして、サーバにアップロードするだけでOKです。

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 );
}

一部でJavascriptでの動作エラーが出る可能性があるとも書かれてましたので、これを試される方は必ずmbdbさんの元記事に目を通してからにしてください。
また、元記事では、async属性ではなくdefer属性での非同期化の方法も書かれてましたよ。

まとめ

WordPressの高速化は誰もがもっともっとと取り組んでいきたいと思っているネタですよね。(えっ、違う?)私自身も、今までいろんな高速化を試してみましたが、正直こうれは効果あり!ってのは少なかった気がします。
その中でも、今回のJavascriptを非同期化させる高速化は「おっ!」と思えるほど表示が速くなったように感じました。
ゴチャゴチャとたくさん高速化のプラグインを入れるよりも、今回のような方法で高速化していくのが良いのかなあと最近は考えておりますです。

【オススメ関連記事】
.htaccessでwordpressの圧縮、キャッシュ設定をやってみた!
プラグインを使わずWordPressを高速化させる3つのこと

コメントを残す

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