約１年前に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やフレームワークの速度スコアを見ることが多い
しかし、大事なのはユーザエクスペリエンスだ
それは広告タグやクロスブラウザを横断しての結果である
ぜひとも、上記のツールを使い、今を見てもらいたい