約１年前にGoogleは「Using page speed in mobile search ranking」と題して、ウェブアプリケーションにおけるパフォーマンスがユーザーエクスペリエンスに影響すると考えていることを発表しました。

それから先日、Googleは2018/12/19に公式ブログで、検索結果に表示されるページの半分以上でモバイル・ファースト・インデックス (以下、MFI) がすでに使われていると発表しました。

つまり今後もMFIがSEOにより影響していく、そしてパフォーマンスが求められていきます。

いまのパフォーマンスをまずは知ろう

てっとり早く調べたい場合は PageSpeed Insights を使おう

PageSpeed Insights とは、CrUX（Chrome User Experience）に基づいて、モバイル端末やパソコン向けのページパフォーマンスに関するレポートと、ページの改善方法を確認することができるウェブアプリケーションです
ここで、次の２つのパフォーマンスを調べることができます

速度スコア
最適化スコア

ここでのページスコアは 80以上を目指してください

Good: 80~ 問題ないよ
Medium: 60~79 改善の余地あり
Low: 0~59 見直せ

クロスブラウザには注意

改善できる項目において、特に次に気をつけてもらいたい

次世代フォーマットでの画像の配信

次世代フォーマットは次の３つが挙げられる

JPEG 2000: Apple推し
JPEG XR: MS推し
WebP: Google推し

すべてのブラウザを満たそうと思ったら、次のようになる

<picture>
  <source type="image/webp" srcset="pathto/image.webp">
  <source type="image/jp2" srcset="pathto/image.jp2">
  <source type="image/jxr" srcset="pathto/image.jxr">
  <img src="pathto/image.jpg" alt="alt description">
</picture>

４つのフォーマットを満たすのはなかなか大変（テスト量も増えるし）

広告タグは棚卸ししよう

ウェブアプリケーションには、集客の観点からリマーケティング（リターゲティング）タグを埋め込む事が多い
しかし、それらの広告タグは、次の問題も一緒に埋め込むことになる

非圧縮によるネットワークコストの問題
メインスレッド上での実行
キャッシュのTTLが None が多い

GTMを使って埋め込むことが多いので、ぜひ「タグ配信スケジュール」を使って管理してもらいたい
難しい場合でも、半年に１度は棚卸しを

詳細なパフォーマンスを知ろう

より詳細なウェブアプリケーションのパフォーマンスを調べたい場合は Lighthouse を使おう
上記に上げた PageSpeed Insights は、Lighthouseをデータ元としているためだ

Lighthouse ではパフォーマンスの他に、

Best Practices
SEO

なども測定することができる

おわりに

ウェブアプリケーションを開発するにおいて、速度スコアは大事だ、それはみんなも重々承知していると思う
そのため使っているWeb APIやフレームワークの速度スコアを見ることが多い

しかし、大事なのはユーザエクスペリエンスだ
それは広告タグやクロスブラウザを横断しての結果である

ぜひとも、上記のツールを使い、今を見てもらいたい