サーバーも変えてサクサクなんですがスコアがそこまで良くないのはなぜ？
PageSpeed Insightsとは
PageSpeed Insights は、ウェブページのコンテンツを解析し、ページの読み込み時間を短くするための方法を提案します。
とのこと。
Googleがサイトの表示速度についてスコアを出してくれます。
MFI（Mobile First Indexing）ということでモバイルページを中心にコンテンツの内容や利便性などをGoogleが判断して検索結果に反映しているといわれています。つまり利便性の一つとして表示速度も重要な指標のうちの一つでありGoogleから見たときの速度の指標の一つとしてこのPageSpeed Insightsのスコアも重要と考えられています。
サーバーを変えて体感速度は上がったが
ここのスコアは今ひとつでした。
目標はもちろんモバイル100：パソコン100を目指すべきですが、WordPressを使っているのであまりゴリゴリとコーディングレベルまで手を入れたくはありません。プラグインなどで出来る範囲でやったことをまとめておきます。
対策をやってみて現在のスコアはトップページで、モバイル72：パソコン99くらいになりました。モバイルはもう一歩。画像の軽量化をもう一段すると上がるかなぁ、と思っています。
どうやって改善していく？
Googleが提案してくれるのでそれを一つずつ潰していくというのが基本です。以下のページがとても参考になりました。
やっていること
いろんなプラグインなどを試しましたが最終的に残したことをまとめました。
画像の軽量化
を使ってオリジナルを軽量化したのちにサムネイルの再生成をしました。
【追記：2018/12/24】
以前少し使っていたこっちにしました。わざわざアカウント使ってサーバーでの圧縮する必要まではないですし、こちらの方がインターフェースがわかりやすいので。軽量化した時の画像の質の比較までは検証してません笑
JavaScriptの非同期化
Googleがしつこく提案してきます。不具合が発生する可能性もあるのですが
で、jQuery以外を全て非同期化しました。jQueryはよく使われるのでとりあえずちゃんとロードしてみます。結構大きいのでGoogleからの提案としてなんとかしろと表示されてはいます。
非同期にしたらいま使っているテーマにも不具合が出ました。プリロードのアニメーションがあるのですがその動きが不安定になり、ちゃんと調べてそれを非同期の対象から外してもいいのですがテーマの設定でアニメーションをオフにするのを選びました。
あと、このプラグインの注意事項としてはログインしてる時は動作しないような初期設定になっています。その場合の動作確認はログインしていないブラウザで行いましょう。
【追記：2018/12/24】
やはり、jQueryもなんとかしたいと思い設定を見直しました。jQueryも含めて全てに対して「非同期」ではなく「遅延」の設定にしました。そちらの方が動作の確実性は増すようです。そのおかげもあってプリロードのアニメーションも復活できました。
【追記：2018/12/25】
結局、iPhoneでの動作が確実じゃないのでプリロードのアニメはオフにしました泣
HTML、CSSの最適化
で、HTMLとCSSの最適化、およびGoogleフォントの非同期化をしました。JavaScriptの最適化は上記のプラグインで非同期にしてしまったのでオフにしています。高度な設定は使っていません。
また、画像の圧縮およびCDN対応などもできるのですがすでに軽量化してるのとあとで書くサーバーのキャッシュの設定などで高速化されることを期待して使っていません。
画像の遅延読み込み
を使いました。ほかのものもいくつか試しましたが表示に不具合が出る場合がありました。上記のJavaScriptの非同期化も関係しているかもです。
【追記：2018/12/24】
色々試してこっちにしました。
外出先でAndroidの動作確認をしてみたらヘッダー画像が表示されない現象が多く発生したので見直してみました。YouTubeやiframeの遅延も設定できましたので投稿ページのスコアは上がりました。また、ページ種類単位でのオン、オフなど設定も豊富です。
遅延読み込みを設定するとどうしても
などの画像にライトボックスを自動で適用するプラグインが動作しなくなります。なんか別の方法がないか探し中です。
エックスサーバーの高速化の設定
をオンにしました。Xアクセラレータとブラウザキャッシュは初めからオンになっていました。
まとめ
とうとうサクサクからパキッパキッといった動きになったこのブログ。別次元のスピードになりました。めでたし。