プラグイン「Flying Scripts」が効かない場合の対処法です。
使用していないJavaScriptを削減して、モバイルのページ表示速度を47→85に改善した記録をまとめます。
ブログやサイトの表示速度が遅くて悩んでいる方は参考にしてみてください。
管理人
ブログのモバイルで表示速度がスコア47!?PageSpeed Insightsで計測してみた結果
ブログやサイトを運営している人は、ページの表示速度もしっかり把握されているでしょうか。
まだ運営を始めたばかりの人は気にする必要はありませんが、100記事や200記事を超えてくるといろいろな要素で表示速度が遅くなっている可能性があります。
このブログもだいぶ記事数が増えてきたので、久しぶりに「PageSpeed Insights」で表示速度を計測してみると…
管理人
数字は赤く、パフォーマンスは最悪の状態でした。
この47はモバイル(スマホ)のスコアですが、パソコンのスコアはこちら。
モバイルよりかは若干良いものの、ブログの訪問者の9割くらいはモバイルからなので、正直パソコンのスコアはどうでもいいですね。大事なのはモバイルの表示速度です。
表示速度が遅いと、それだけでブログを見に来てくれた人はページを離脱してしまいます。ちなみにページが表示されるまで3秒以上かかってしまうと大体の人がページを離れるという検証結果もあります。
このスコアはさすがに放置できないので、原因を調べて改善することにしました。
管理人
ページ表示速度が遅い原因は「使用していないJavaScriptの削減」
ページの表示速度が遅い原因は、そのままPageSpeed Insights内でわかります。
少し下にスクロールさせると、このようにいくつかの改善点を教えてくれます。
私の場合は圧倒的に「使用していないJavaScriptの削減」が原因になっていることがわかりました。他は画像関係で少々容量が重くなっています。
JavaScriptの項目を改善するだけでおよそ4秒も早くなるようので、ページの表示速度は大幅に良くなるでしょう。
改善方法はJavaScriptの読み込みを遅らせるプラグイン「Flying Scripts」を使う
改善方法は主に2つありますが、今回は初心者にもっともおすすめな「プラグインを使った改善」をします。直接コードに何かを書くような方法は余計なトラブルの原因にもなるので、基本的にやめた方がいいでしょう。
使用するプラグインは「Flying Scripts」というものです。このキーワードで検索すれば1番目に表示されます。
まずはこのプラグインをインストールして有効化させます。
次に、PageSpeed Insightsの「使用していないJavaScriptの削減」の項目をクリックすると、原因となる具体的なURLが表示されるので、これらをFlying Scriptsの設定画面へコピペしていきます。
その際、「URLの最後の/以降からjsまで」をコピペします。
例えば「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」で大体解決することができます。
私はすでに入れていたプラグインなので、メディア→一括最適化でアップロード済みの画像を最適化することにしました。
画像の拡張子を「Webp」にすることで画像の容量は大幅に削減できます。
調査すると最適化可能な画像が約15,000点も見つかったので、これをおよそ2時間かけて最適化していきます。
管理人
PageSpeed Insightsで再度計測するとスコアは85に改善!
画像の最適化も終わり、Flying Scriptsの設定も反映されているかもしれないので、もう一度スコアを計測してみます。
管理人
管理人
まさかの47→85と大幅改善!
改善できる項目もチェックしてみると。
しっかり「使用していないJavaScriptの削減」の項目が消えていました。
ちなみにパソコンのスコアがこちら。
管理人
ほぼ満点じゃないですか!素晴らしい!
まとめ
ページの表示速度を47から85に改善しましたが、プラグインの「Flying Scripts」が効かない現象が起きて困ったものの、時間を置くことでしっかり設定を反映させることができました。
Flying Scriptsが効かない原因としては主に「正しくコピペができていない」か「反映に時間がかかっている」のどちらかの可能性が高いので、同じ状況になっている方はこの2つを試してみてください。
ブログやサイト運営で収入を得ている人にとって表示速度は死活問題なので、記事が増えてきたら定期的に問題がないかチェックするようにしましょう。
管理人
1か月で3万円稼ぐ人も!還元率トップのポイ活! 公式サイトを見る | |
利用者100万以上の大人気ポイ活! 公式サイトを見る | |
1件8,000円の報酬も!簡単なアンケートで稼げるポイ活! 公式サイトを見る | |
宝くじやスゴロクなどゲーム感覚で稼げるポイ活! 公式サイトを見る | |
ソリティア好き必見!ゲームクリアでポイントGET! 公式サイトを見る | |
女性に大人気!ジグソーパズルで遊んで稼ぐポイ活! 公式サイトを見る ※Androidのみ | |
始めたその日に交換!初心者にも使いやすいポイ活! 公式サイトを見る ※Androidのみ | |
テレビ番組でも紹介!300円から交換できるポイ活! 公式サイトを見る ※Androidのみ |