今のウェブアプリケーションのパフォーマンスを知ろう

約１年前に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やフレームワークの速度スコアを見ることが多い

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

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