使用していない JavaScript の削減の改善で高速化!

使用していない JavaScript の削減の改善で高速化!

サイトのページスピードを図ってみたら「使用していない JavaScript の削減」が表示された場合の改善方法について説明します。

結論、ワードプレスのプラグイン「Flying Scripts by WP Speed Matters」を使用します。

まずは、現状の確認とプラグインの導入、設定方法について説明します。

現状のページスピードを確認する

まずは「pagespeed insights」で現状のパフォーマンスを確認します。

サイトを開いたら調べたいサイトのURLを入力して「分析」ボタンをクリックして少し待ちます。

これが改善前の携帯電話のパフォーマンスです。

ちなみにPCは98くらいでしたが100に近づけたいです。

パフォーマンスに対して一番影響がでかい改善できる項目が、「使用していない JavaScript の削減」です。

今回はこれを解消します。

最初に説明した、「Flying Scripts by WP Speed Matters」を使ってパフォーマンスをあげます。

このプラグインはJavascriptの実行を遅らせることができるプラグインです。

最初にすべて読み込むと遅くなってしまうので指定したjsファイルを遅らせて読み込みスピードを上げることができます。

それでは、使い方の説明に入ります。

Flying Scripts by WP Speed Mattersの使い方

まずはメニュー画面から「プラグイン」を選択し、プラグインの画面の上にある「新規追加」ボタンを選択します。

検索画面で「Flying Scripts」と入力するとプラグインが表示されます。

「今すぐインストール」をクリックしてインストールします。

インストールが完了したら「有効化」をクリック。

プラグイン一覧の画面でFlying Scriptsが追加されていると思うので「Settings」をクリック。

設定画面が表示されます。

今回はgoogleのタグマネージャーやgoogleのタグが原因でした。

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

を赤枠の「Include Keywords」に入力します。

もし他のjsがある場合は表示されたURLを右クリックして「リンクのアドレスをコピー」してInclude Keywordsに入力します。

jsを入力したら「Save Changes」をクリックして設定完了です。

再度、pagespeed insigtsで確認してみます。

スマホでのパフォーマンス
パソコンでのパフォーマンス

いずれも100点とれました!

使っているワードプレスのテーマやプラグインによって改善度は変わると思います。

とはいえ、体感的にも早くなったので「使用していない JavaScript の削減」で困っているならFlying Scriptsの導入がおすすめです。

この記事では設定していませんが、Jqueryを遅延読み込みする場合、バージョンによってはFlying Scriptsで設定すると動かなくなるものもありました。Jqueryを遅延読み込みにした場合はサイトを確認して動作してるかどうかの確認しておきましょう。

使用していない JavaScript の削減の改善まとめ

100点は 正直出来すぎでしたが、スピードが早くなりよかったです。

このサイトで使っているワードプレステーマ「NOMAD」がもとから高速なのも大きかったです。

SEO対策でページのスピードを上げるのも重要ですが、記事を読んでくれるユーザーのためにも読み込みスピードを改善するのが大事です。