@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}

https://perceptiontoolkit.dev/

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を段階的に公開（予定）標準化と並行して実際にデベロッパーに利用してもらう環境を提供

http://www.youtube.com/watch?v=OpXrSc3Yie0

Web PackagingAMP Packager または Cloudflare

bit.ly/amp-script-trial

2019~2000

Webの進化

~2000 2019

その間、Eメールは変わらず...

Reply to comments

Google Docs

Browse ideas

Pinterest

旅行のレコメンデーション

CTR改善

+57%

+60%コンバージョン増加

旅行のレコメンデーション

配信 テスト クライアント

Coming soon!

Coming soon!

@uskayYusuke UtsunomiyaMobile Solutions Consultant, gVelocity

What’s new in Chrome,AMP and the WebWebフロントエンド最新情報Thank yo

u!