[wp]WEBページ読み込み高速化の試み「Flying Scripts」

高速化のためにプラグインを追加するというね。

これの話

Flying Scripts
Download and execute JavaScript on user interaction.

どういうアレか

WEBサイト、ページの評価基準に読み込み速度があって、チェッカーとしてGoogleが提供する「PageSpeed Insights」がある。検索エンジンが提供してるから指標として間違いないんでしょう、という感じのもの。

PageSpeed Insights

この中の項目に「レンダリングを妨げるリソースの除外」「使用していない JavaScript の削減」とかでjsファイルがピックアップされる。各種CDNの他、自鯖内のものもやり玉に挙げられる。「第三者コードの影響を抑えてください」でも分かる。

読み込み負荷の多くを占める割に手作業で逃がせない、逃しづらいものが多いので、「Flying Scripts」でやっていく。

初期設定、使い方

まずプラグイン「Flying Scripts」をインストールする。有効化して、設定ページに行って、「Include Keywords」に邪魔くさいjsを放り込んでいく。

ここを読めば大体が分かる。

One moment, please...
使用していない JavaScript の削減の改善で高速化!
サイトのページスピードを図ってみたら「使用していない JavaScript の削減」が表示された場合の改善方法について説明します。結論、ワードプレスのプラグイン「Flying Scripts by WP Speed Matters」を使用し...

具体的な話

GTM

アナリティクス等はGoogle Tag Managerで管理してるんだけど、これが結構重い。貼り付けるのは1つだけどこれから派生して色々と読み込むので、速度改善的に結構な癌になる。Googleが提供してるからGoogle側が改善してくれよって思うんだけどね。

読み込むjsは.jsじゃないけど、以下の記述で問題なく対応する。

https://www.googletagmanager.com/gtag/js

パラメータを省略した指定になるけど、「記述内容を含むやつ」が対象になるっぽい。

ということで、フルパスじゃなくてもやっていけるという話。複数を設定する場合は改行で分ける。

jQuery周り

jQueryライブラリも結構きつくて、高速化を考えるならたしかに脱jQueryは考えられるよなって思う。実際、結構しんどい。

で、これにも手を付けたいんだけどちょっと危ない。

jQueryを放り込むとjQueryプラグインが発火しない、jQueryプラグインごと指定しても同様に発火しないケースがある

slick.jsがそうだった。オプション周りを<head>にベタ打ちしてるので、処理が前後してぶっ壊れたのかもしれない。ちょっと手を入れられなくて試してないけど。

そんな感じでリスクがあるので、ライブラリ関係は考えなしに放り込むのはよくない。

Flying Scriptsを使わずに高速化する手段としては、ライブラリをDLして自鯖に上げて読ませる。これで結構変わる。あと、WP標準で読むjQueryライブラリもあるので重複がないように気をつける。functions.phpに書き込めば自動挿入分の削除が可能なんで、任意のバージョンを指定することができる。

//WPデフォルトjQueryライブラリを読み込ませない
function delete_jquery() {
  if (!is_admin()) {
    wp_deregister_script('jquery');
  }
}
add_action('init', 'delete_jquery');

効果の実感について

かなり変わる。点数が結構伸びる。

計測やら埋め込みやら、Google関連は便利だけどかなり重いので対策すべきですね。

やっといて損はないので、そういうことをやらないといけない場合は当然ながら、時間があるなら着手してあげる優しさがあってもいいともう。

コメント

タイトルとURLをコピーしました