amp and the web what’s new in chrome, · 2020-04-30 · pwaをandroid アプリに簡単 ... amp...
TRANSCRIPT
@uskayYusuke UtsunomiyaMobile Solutions Consultant, gVelocity
What’s new in Chrome,AMP and the WebWebフロントエンド最新動向
10
10 20
10 20 30
9 sec.使えるまで
（TTI）
6 sec.最初の描画まで
（FCP）
Source: HTTPArchive(5M Popular URLs)
上質な ユーザー体験 をWebで
Wayfair
10% CVR改善
Times Internet
31% 平均セッション時間
HTTP 2Resize ObserverPreconnectPreload DNS Prefetch Intersection Observer Async and Defer Script LoadingNetInfoFont Loading Strategies
● 品質最適化
● 自動クロッピング
● WebP● カラーチャネル調整
画像サイズ削減
80%
画像最適化 CDNCDNを利用して画像を自動で最適化する
画像最適化 CDN 利用後の成果
40%
50%
40-60%
71%
80%
画像サイズ削減率
でも 半年後 には...
Performance Budgetパフォーマンスも 予算管理 を
Budget
スクリプトは 200KB 以下
Result
3G回線でも 6秒 で利用可能に
+44% 収益アップ
Budget
各スクリプトは 80KB 以下
全体で 200KB に抑える
Result
-14% 離脱率改善
+25% ページ/セッション
Chrome UX Report600万ものオリジンを集計
Speed report
Firebaseパフォーマンスモニタリング
Lighthouse
Light WalletLighthouse で簡単に予算管理
Web Workers
ワーカースレッドを活用して
メインスレッドの負荷を解消
Performant
初回ロードは 25KB 以下
3G回線でも 5秒以下 で利用可
60fps アニメーション
proxx.app
画面遷移が遅い...ユーザーが気持ちよくサイト内回遊するためには？
ナビゲーションからトランジションあらかじめ次ページを読み込み、シームレスなトランジションを実現
© ONE・Yusuke Murata/SHUEISHA
Portals
Audio & Video Capture
Advanced Camera Controls
Recording Media
Real-Time Communication
USB CredentialsPayments
Network Type & Speed
Online State
VibrationBattery Status
Local Notifications
Push Messages
Home Screen Installation
Foreground Detection
Permissions
File Reading
Touch Settings
Speech RecognitionPointing Device Adaptation Offline Mode
Background Sync
Geolocation
Device PositionDevice Motion
Virtual & Augmented RealityFullscreen
Screen Orientation & Lock
Vibration
Device Memory
Real-Time Communication
Touch Gestures
Storage Quotas
Presentation FeaturesBluetooth
Trusted Web ActivitiesPWAをAndroidアプリに簡単に埋め込む
Desktop PWAデスクトップ アプリをWebの技術で
再訪問率の改善
+27%
Yahoo! JAPANログインにかかる時間を 37.5% も削減
アクションの補助 商品比較
Shape Detection APIQRコードなどオフラインの世界を認識
if ('FaceDetector' in window) { const faces = await new FaceDetector().detect(img);} else { // Use fallback}
if ('BarcodeDetector' in window) { const codes = await new BarcodeDetector().detect(img);} else { // Use fallback}
M73M72 M74 M75 M79M76 M77 M78 Q1 Q2 Q3 Q4
Image Clipboard Support
Shape Detection
App Icon Badging
Wake Lock
Contacts Picker
Native File System Access
Phone Number Sign Up
Unlimited Quota
Scheduled Notifications
Web Serial / Web HID
Local Font Access
File Handling
M75
M76
M77
M78
M79
2019
新たなAPIを段階的に公開（予定）標準化と並行して実際にデベロッパーに利用してもらう環境を提供
Web PackagingAMP Packager または Cloudflare
bit.ly/amp-script-trial
2019~2000
Webの進化
~2000 2019
その間、Eメールは変わらず...
Reply to comments
Google Docs
Browse ideas
旅行のレコメンデーション
CTR改善
+57%
+60%コンバージョン増加
旅行のレコメンデーション
配信 テスト クライアント
Coming soon!
Coming soon!
@uskayYusuke UtsunomiyaMobile Solutions Consultant, gVelocity
What’s new in Chrome,AMP and the WebWebフロントエンド最新情報Thank yo
u!