- WordPressサイトを高速化したい
- WordPressサイトの読み込みが遅い
- PageSpeed Insights の点数が低い
この疑問に回答します。
WordPressのサイトで PageSpeed Insights の点数がモバイルだけ低い。どうやって高速化させて解決するか分からない。プラグインを利用して手軽に高速化する方法を探している方に向けて解説します。
ウェブサイトの高速化対策しても PageSpeed Insights の点数が低い理由は、JavaScriptが原因です。
JavaScriptはGoogle Adsenseに利用されているので削除することが出来ない。原因がはっきりしているのに対策が出来ないのは、歯がゆくて仕方ないです。
今回紹介するプラグインを導入すると劇的に PageSpeed Insights の点数改善が出来ます。プラグインを利用するのでミスすることもありませんので手軽に試してみてください。
このウェブサイトの PageSpeed Insights は、モバイル表示で90-95ぐらいが平均です。
WordPress プラグイン Flying Scripts by WP Speed Matters とは
Flying Scripts は、JavaScriptを読み飛ばすプラグインです。ユーザーによる操作（マウスホバー、スクロールなど）が無くなるまでJavaScriptを実行しません。
JavaScriptは非常に大量のリソースを消費します。
最初のレンダリングに必要ないJavaScriptの実行を遅らせることでレンダリング時間、インタラクティブまでの時間、最初のCPUアイドルなどを削減します。
JavaScriptは重要な役割を果たしているので制御はとても重要です。
JavaScriptの読込みには、非同期化（async）や遅延（defer）など様々な手法があります。様々な手法でアプローチされていますが、JavaScriptがコアな部分の役割を果たしているので、ユーザーが思っているような劇的な改善が出来ずに苦労しているのが現実です。
- 非同期化（async）は、言葉の通りHTMLとJavaScriptを非同期で処理します
- 遅延（defer）は、HTML解析後にJavaScriptを実行します
- Flying Scripts は、JavaScriptを読み飛ばします
Flying Scripts は、JavaScriptを読み飛ばします。ユーザーが何らかのアクションを起こすまでJavaScriptが実行されません。ユーザーが何もしなくても指定した時間が経過するとJavaScriptが実行されるので画面表示が崩れるようなことはありません。
Flyng Scriptsを利用するとJavaScriptを読み飛ばします。PageSpeed Insightsでは、劇的な点数アップができるようになります。
Flying Pages のメリット
WordPressで構築された、どのサイトでも利用することが出来ます。プラグインを導入するだけで劇的に高速化することが手軽にできます。
- 手軽に高速化することができる
- 劇的に高速化することができる
- 設定がシンプルで簡単
他のプラグインに影響を受けることなく手軽に利用することが可能です。
Flying Pages のデメリット
JavaScriptは重要な役割を果たしているので Flying Pages を導入することで画面表示が崩れてしまう可能性があります。Flying Pages で遅延時間をサイト毎に調整する必要があります。
ギリギリのしきい値にすると、管理者には正常でも、閲覧ユーザーには影響がでたり、今回は正常だけど、次回はエラーが表示されたりするなどが発生するので調整が安全値にすることが重要ですが、低くするPageSpeed Insightsの改善が出来ない可能性があります。
- 管理者には正常でも、閲覧ユーザーには影響が出ている
- 正しく表示されない場合がある
ウェブサイトの高速化は、1つの方法で改善できるものではありません。キャッシュなどの最適化処理を複数実施する必要があります。複数の高速化を実行すると機能が重複します。どこで、何を実施するかを管理する必要があり複雑化します。
とりあえず、なんでも有効化という考えは辞めてください。かならず想定外の動きが発生し解決するのが難しくなります。
- しきい値設定が難しい
- 高速化は1つの対策で解決できない
- 複数の高速化対策だと複雑化する
- 複雑化すると想定外の挙動が発生する
対策の目的と役割を認識できれば、WordPressの高速化対策は比較的簡単です。
Flying Scripts のインストール手順
Flying Scripts のインストール手順を説明します。WordPress のプラグイン導入はとても簡単です。
ダッシュボードから「プラグイン」 > 「新規追加」に進みます。
右上の検索窓から「Flying Scripts」と入力すると、プラグインが表示されます。
あとは、「今すぐインストール」 と「有効化」を実行するだけです。
Flying Scripts のインストール手順はこれで終了です。
Flying Scripts の設定
Flying Scripts は、JavaScriptをユーザーが操作するまで実行を遅延させるプラグインです。ユーザーがウェブページのリンクをホバーしたり、画面をスクロールさせたり、何かしらのアクションした時にJavaScriptを読み込ませることができます。
ユーザーがアクションを起こさなくても、設定したタイムアウト値の時間がすぎれば自動で読み込まれるようになります。この動作のおかげで画面表示に大きく影響するJavaScriptを遅らせ、ページを瞬時に読み込ませることができます。
ダッシュボードの「設定」 > 「Flying Scripts」から設定を行います。
Include Keywords | 遅延スクリプトの指定
遅延させるJavaScriptと「Include Keywords」に指定します。
GoogleAdSenseが利用する「adsbygoogle.js」を遅延対象のJavaScriptに指定することでページ表示速度が上がります。PageSpeed Insightsのスコアが一気に改善します。
Include Keywordsに指定するJavaScriptは、PageSpeed Insights でアドバイスされるものを指定すると効果が絶大です。
- 使用していない JavaScript の削減
基本的に外部スクリプトをすべて設定して構いません。
WordPressのテーマが利用しているJavaScriptは、「テーマの機能」や「プラグイン」で遅延させることができます。
GoogleAdSenseやアフィリエイトで利用される外部のJavaScriptは、「Flying Scripts」で遅延させます。
さらにPageSpeed Insightsでスコアを高評価にするには、ウェブサイトの隅々までチェックして外部のJavaScriptを見つけ出す必要があります。
Chromeの場合は、「デベロッパーツール」を利用して見つけ出します。対象のウェブサイトを表示させて右クリックし「検証」を選択します。「Network」タブに切り替えてください。もし、リストが表示されていなければページの再読み込みを実施してください。
読み込まれたファイルの中で「.js」というファイルを見つけてください。Typeが「script」になっているものを確認すると見つけやすいです。
確認できたJavaScriptのファイル名を「Flying Scripts」に登録すれば遅延読み込みさせることができます。
Timeout | 遅延時間の指定
ユーザーが何もしなくても指定した時間が経過するとJavaScriptが実行されるための設定値です。
デフォルト値の「5」で構いません。
値を小さくすれば遅延時間が少なくなるのでユーザーに影響が少なく、逆に値を大きくすると、遅延時間が長くなるのでユーザーに影響が出やすくなります。
Disable on pages | 除外ページ
Flying Scriptsによる遅延を無効にするページを記入することができます。通常であれば指定する必要はありません。
まとめ
Flying Scripts はJavaScriptの読み飛ばしによりウェブページの高速化を実施します。
JavaScriptのほとんどは、最初のレンダリングに必要ありません。JavaScriptの実行を遅らせることでレンダリング時間、インタラクティブまでの時間を劇的に改善させることができます。
GoogleAdSenseやアフィリエイトで利用される外部のJavaScriptを遅らせることで、PageSpeed Insightsのスコアを高評価に改善することが出来ます。
つまり、ウェブページ自身を高速化するものではありません。理解して利用するとユーザービリティが向上します。
- JavaScriptの読み飛ばしによりウェブページの高速化
- PageSpeed Insights の点数アップに直接結びつきます
- 有効化するだけで使用できる
ウェブサイトの高速化は、このプラグインだけでなくPageSpeed Insights に直接関係する「キャッシュ」や「Lazy Load」など他の技術も併用することを検討してください。
