Posted at
LIFULLDay 24

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

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

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

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


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

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

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

ここで、次の2つのパフォーマンスを調べることができます


  • 速度スコア

  • 最適化スコア

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


  • Good: 80~ 問題ないよ

  • Medium: 60~79 改善の余地あり

  • Low: 0~59 見直せ


クロスブラウザには注意

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


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

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


  • 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>

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


広告タグは棚卸ししよう

ウェブアプリケーションには、集客の観点からリマーケティング(リターゲティング)タグを埋め込む事が多い

しかし、それらの広告タグは、次の問題も一緒に埋め込むことになる


  • 非圧縮によるネットワークコストの問題

  • メインスレッド上での実行

  • キャッシュのTTLが None が多い

GTMを使って埋め込むことが多いので、ぜひ「タグ配信スケジュール」を使って管理してもらいたい

難しい場合でも、半年に1度は棚卸しを


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

より詳細なウェブアプリケーションのパフォーマンスを調べたい場合は Lighthouse を使おう

上記に上げた PageSpeed Insights は、Lighthouseをデータ元としているためだ

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


  • Best Practices

  • SEO

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


おわりに

ウェブアプリケーションを開発するにおいて、速度スコアは大事だ、それはみんなも重々承知していると思う

そのため使っているWeb APIやフレームワークの速度スコアを見ることが多い

しかし、大事なのはユーザエクスペリエンスだ

それは広告タグやクロスブラウザを横断しての結果である

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