エンタメから役立つ情報まで!
※【PR】本ブログはプロモーションを含みます

「Flying Scripts」が効かない?JavaScriptを削減してページ表示速度を47から85に改善!

「Flying Scripts」が効かない?JavaScriptを削減してページ表示速度を47から85に改善!

プラグイン「Flying Scripts」が効かない場合の対処法です。

使用していないJavaScriptを削減して、モバイルのページ表示速度を47→85に改善した記録をまとめます。

ブログやサイトの表示速度が遅くて悩んでいる方は参考にしてみてください。

管理人

表示速度はSEOにおいても重要です。

ブログのモバイルで表示速度がスコア47!?PageSpeed Insightsで計測してみた結果

ブログやサイトを運営している人は、ページの表示速度もしっかり把握されているでしょうか。

まだ運営を始めたばかりの人は気にする必要はありませんが、100記事や200記事を超えてくるといろいろな要素で表示速度が遅くなっている可能性があります。

このブログもだいぶ記事数が増えてきたので、久しぶりに「PageSpeed Insights」で表示速度を計測してみると…

「Flying Scripts」が効かない?JavaScriptを削減してページ表示速度を47から85に改善!

管理人

47!?おっそ!

数字は赤く、パフォーマンスは最悪の状態でした。

この47はモバイル(スマホ)のスコアですが、パソコンのスコアはこちら。

「Flying Scripts」が効かない?JavaScriptを削減してページ表示速度を47から85に改善!

モバイルよりかは若干良いものの、ブログの訪問者の9割くらいはモバイルからなので、正直パソコンのスコアはどうでもいいですね。大事なのはモバイルの表示速度です。

表示速度が遅いと、それだけでブログを見に来てくれた人はページを離脱してしまいます。ちなみにページが表示されるまで3秒以上かかってしまうと大体の人がページを離れるという検証結果もあります。

このスコアはさすがに放置できないので、原因を調べて改善することにしました。

管理人

PageSpeed Insightsの計測は1回では正確なスコアは出ないので、3回くらいは試しましょう。

ページ表示速度が遅い原因は「使用していないJavaScriptの削減」

ページの表示速度が遅い原因は、そのままPageSpeed Insights内でわかります。

少し下にスクロールさせると、このようにいくつかの改善点を教えてくれます。

「Flying Scripts」が効かない?JavaScriptを削減してページ表示速度を47から85に改善!

私の場合は圧倒的に「使用していないJavaScriptの削減」が原因になっていることがわかりました。他は画像関係で少々容量が重くなっています。

JavaScriptの項目を改善するだけでおよそ4秒も早くなるようので、ページの表示速度は大幅に良くなるでしょう。

改善方法はJavaScriptの読み込みを遅らせるプラグイン「Flying Scripts」を使う

改善方法は主に2つありますが、今回は初心者にもっともおすすめな「プラグインを使った改善」をします。直接コードに何かを書くような方法は余計なトラブルの原因にもなるので、基本的にやめた方がいいでしょう。

使用するプラグインは「Flying Scripts」というものです。このキーワードで検索すれば1番目に表示されます。

「Flying Scripts」が効かない?JavaScriptを削減してページ表示速度を47から85に改善!

まずはこのプラグインをインストールして有効化させます。

次に、PageSpeed Insightsの「使用していないJavaScriptの削減」の項目をクリックすると、原因となる具体的なURLが表示されるので、これらをFlying Scriptsの設定画面へコピペしていきます。

「Flying Scripts」が効かない?JavaScriptを削減してページ表示速度を47から85に改善!

その際、「URLの最後の/以降からjsまで」をコピペします。

「Flying Scripts」が効かない?JavaScriptを削減してページ表示速度を47から85に改善!

例えば「https//gofae.gri/aer112/1083/0.4487319js」というURLだった場合、コピペするのは「0.4487319js」です。

注意点として、このコピペを行うことでページのレイアウトが崩れてしまうことがあります。

もし崩れてしまった場合は、コピペしたどれかしらのURLが原因になっているので、一度コピペしたものをすべて削除して一つずつコピペしなおしましょう。レイアウトに影響を与えてしまうURLは、必要なJavaScriptなのでコピペはしません。

「Flying Scripts」が効かない!?URLを追加しても反映しない原因とは

私も原因のURLをすべてFlying Scriptsへコピペして反映を保存したのですが、再度PageSpeed Insightsで計測しなおしてもスコアが変わりませんでした。

管理人

ちゃんと入力しているのになんで…?

コピペしたJavaScriptもなぜかまだ原因のままになっており、まったく反映されていません。

試しにURLを全文にして入力したり、改行を入れてみたり、いろいろやってみましたが、「使用していないJavaScriptの削減」を改善することができません。

同じような状況になった人は以下のことを試してみてください。

URLが正しく記載できていない

URLが正しくコピペできていなければJavaScriptの遅延は行えません。

例えば「◯◯◯◯.js」が「◯◯◯◯.j」になっていたりすると反映されないので、ちゃんとプラグインがJavaScriptとして認識できているか注意する必要があります。

ですが、前述したように私の場合はこれが原因ではありませんでした。

少し時間を置いてみる

コピペしたURLが反映されない場合は、少し時間を置いてみましょう。

他のブログでは「コピペしてすぐに計測しなおしたら改善されました!」と書いている人がほとんどでしたが、環境によっては反映されるのに多少時間がかかる可能性があります。

一旦コピペしたあとは、30分〜1時間程度は様子を見て、あらためて計測してみましょう。

時間を置く間にメディア(画像)を一括最適化

私の場合もURLは正しく記載できているので、少し時間を置いてからまた計測することにしました。その間は、他の原因となっている要素で改善できる部分を対応したいと思います。

JavaScriptの次に原因となっているのが画像関係で、あるのは「適切なサイズの画像」や「次世代フォーマットでの画像の配信」です。

これはプラグインの「EWWW Image Optimizer」で大体解決することができます。

私はすでに入れていたプラグインなので、メディア→一括最適化でアップロード済みの画像を最適化することにしました。

「Flying Scripts」が効かない?JavaScriptを削減してページ表示速度を47から85に改善!

画像の拡張子を「Webp」にすることで画像の容量は大幅に削減できます。

調査すると最適化可能な画像が約15,000点も見つかったので、これをおよそ2時間かけて最適化していきます。

管理人

2時間後に表示速度を再度計測します。

PageSpeed Insightsで再度計測するとスコアは85に改善!

画像の最適化も終わり、Flying Scriptsの設定も反映されているかもしれないので、もう一度スコアを計測してみます。

「Flying Scripts」が効かない?JavaScriptを削減してページ表示速度を47から85に改善!

管理人

・・・(ドキドキ)

「Flying Scripts」が効かない?JavaScriptを削減してページ表示速度を47から85に改善!

管理人

おお!めちゃくちゃ改善してる!

まさかの47→85と大幅改善!

改善できる項目もチェックしてみると。

「Flying Scripts」が効かない?JavaScriptを削減してページ表示速度を47から85に改善!

しっかり「使用していないJavaScriptの削減」の項目が消えていました。

ちなみにパソコンのスコアがこちら。

「Flying Scripts」が効かない?JavaScriptを削減してページ表示速度を47から85に改善!

管理人

99ww

ほぼ満点じゃないですか!素晴らしい!

まとめ

ページの表示速度を47から85に改善しましたが、プラグインの「Flying Scripts」が効かない現象が起きて困ったものの、時間を置くことでしっかり設定を反映させることができました。

Flying Scriptsが効かない原因としては主に「正しくコピペができていない」か「反映に時間がかかっている」のどちらかの可能性が高いので、同じ状況になっている方はこの2つを試してみてください。

ブログやサイト運営で収入を得ている人にとって表示速度は死活問題なので、記事が増えてきたら定期的に問題がないかチェックするようにしましょう。

管理人

いろいろ設定やプラグインを触るときはバックアップも忘れず!