Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

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

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

Sam
すまほあぷりえんじにーあ
http://d.hatena.ne.jp/samril/
lifull
日本最大級の不動産・住宅情報サイト「LIFULL HOME'S」を始め、人々の生活に寄り添う様々な情報サービス事業を展開しています。
https://lifull.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away