VMT TECH BLOG
PWA Night vol.18 ～パフォーマンス～アフターレポート
どうも、Monacaソムリエです
今回は先日のPWA Night vol.18 ～パフォーマンス～での
レポートです。
PWA Nightとは？
技術に関する話はもちろん、実際にどんな場面で適用できるのか、
その時の留意点、顧客への提案方法や、事業への導入方法など、
PWAを技術やビジネス面から捉えてコミュニケーションをしたいと考えています。
Web Vitalsについて by 宍戸さん@Google
スライドは公開されていないので、気になったキーワードご紹介いたします。
2020年5月28日にGoogleが検索ランキングの指標を
「Core Web Vitals（コアウェブバイタル）」と既存のシグナルを
組み合わせと発表がありました。
3つの指標として、LCP・FID・CLSと言うものがあります。
https://developers-jp.googleblog.com/2020/05/web-vitals.html
Core Web Vitalsとは？
Web VitalsはGoogleがWeb上で優れたユーザー体験を提供するために不可欠
であると考えており、ユーザー体験を向上させるためのガイダンスを
提供するための取り組みとあります。
その中でも重要な3つのことをCore Web Vitalsとしています。
LCP（Largest Contentful Paint）＝ ページの表示速度を測る指標
読み込みパフォーマンスを測定で、ページが読み込みを開始してから
2.5秒以内に表示する必要がある。
FID（First Input Delay）＝ ユーザーの応答性を測る指標
インタラクティブ性を測定。
ユーザーがアクション（クリックやタップ）をしてから反応するまでの
時間を100ミリ秒以下になるようにする必要がある。
CLS（Cumulative Layout Shift）＝ 視覚の安定性を測る指標
視覚的な安定性を測定。
予期せぬレイアウトのズレや崩れを独自に指標化し評価している。
簡潔に言うと。。。
ページは2.5秒以内に表示して、予期せぬレイアウト崩れがなく
（ページを表示する時にガタガタなるやつ）メニューやボタンを押したら
100ミリ秒以下でイベントが実行しましょう。
と言う指標です。
Core Web Vitalsを測定するには？
ツールを使って測定することができます。
下記に代表的なツールを記載しておきます。
・Lighthouse
（https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk/related?hl=ja）
・Chrome UX Report
（https://developers.google.com/web/tools/chrome-user-experience-report）
・PageSpeed Insights
（https://developers.google.com/speed/pagespeed/insights/）
・Lighthouse CI
(https://github.com/GoogleChrome/lighthouse-ci)
ここで、興味を引いたのはLighthouse CIです。
これはGitHub（GitLab）と連携して、ソースコードをプッシュしたら
自動でLighthouseが動いて、パフォーマンスを検証してくれます。
要するに開発しながら、GitHub（GitLab）にコードをpushする度にCI上
でLighthouseのチェックが行われ、スコアリングや改善可能な箇所を事前に
知らせてくれます。
これはかなり便利ですね。作ってから、計測して遅いとか言われても
今更改修しても。。。っと言うことにもなりかねないので、実装段階で
確認しながら、改善できるという点では良いと思いました。
Jamstack × PWA におけるキャッシュ戦略 by 柴田さん@ウォンタ
スライドはこちら
Jamstackを使ったPWAシステムのキャッシュ戦略についてでした。
Jamstackとは？
「JavaScript」「APIs」「Markup」という3つの技術を組み合わせた、
新しいWebアプリケーションアーキテクチャと言うものです。
パフォーマンスの改善、セキュリティの担保、スケーラビリティの確保
が特徴です。
簡単言うと、Jamstackは早くて、安全で、しかも軽い。
この構成で作っているヘッドレスCMSのサイトが早いのなんの。。。
こちらです。（https://microcms.io/blog/）
WordPressでPWA by 岡本さん@デジタルキューブ
スライドはこちら
PWA＝SPAと思ってしまうのですが、厳密には違います。
PWAと言うのは
先進的で、信頼性のある、インストール可能なWebアプリケーション
技術的に言えばHTTPSで動き、Service Workerとマニフェストファイルが
あれば良いというものでした。
実はWordPressにPWAのプラグインがあるようで、それを使えば
WordPressでPWAが作れます。
意外と知らない人が多かった様です。私も知らなかった。。。。
オフラインキャッシュ パフォーマンス選手権
キャッシュの仕方にもいろいろ方法があり、何を優先するかによって
結果が変わってきます。
キャッシュの情報を優先するか、ネットワーク（サーバー）の情報を
優先するか？です。
Cache First・・・パフォーマンスがめちゃ良い、情報鮮度がめちゃ低い
Pre Cache ・・・パフォーマンスが良い、情報鮮度が低い
Stale While Revalidate・・・パフォーマンスが低い、情報鮮度が高い
Network First・・・パフォーマンスがめちゃ低い、情報鮮度がめちゃ高い
キャッシュを優先すると速度は速いが、情報鮮度が落ちる。
最新情報かどうかはわからない。
ネットワークを優先すると、情報鮮度は上がるが、
その分パフォーマンスが落ちる。
つまり、パフォーマンスと情報鮮度はトレードオフ。
何が正解というのは無かったですが、システムによって
何を優先するかを決めて、選んでくださいというものでした。
Webページが早い。これほどいいことは無いですね。
PWA化、Core Web Vitalsの測定、キャッシュ戦略で
早くすることが重要だと言うことですね。非常に勉強になりました。
【3D開発エンジニアを募集中】
当社で開発している3D・VR・ARアプリケーションの開発エンジニアを募集中です。
詳しい求人内容はバルテスグループ採用サイトをご覧ください。
画像をクリックいただきますと詳しい求人内容をご覧いただけます。
VMTのInstagramでは社内xR, 3D技術勉強会のコンテンツを配信中です！
是非フォローや「いいね！」をお願いいたします！
公式アカウントはこちら
新着ブログ
