メディア パターン
優れた音声と動画を再生するために、ウェブで最新のメディア エクスペリエンスを実現します。
- 実際のユーザーデータを使用してベースラインを行動につながるものにする
- CSS コンテナ クエリのパワーを解き放つ: Netflix チームから学ぶ
- 東急がパスキーでログインのスピードを 12 倍にした方法
- Google スプレッドシートが計算ワーカーを JavaScript から WasmGC に移植した理由
- よりスムーズに、より細かい管理: Google Meet で音声と動画の権限が改善された仕組み
- BILIBILI、MediaPipe のオンデバイス ウェブ AI ソリューションを利用して動画ストリームの UX を改善し、セッション継続時間を 30% 拡大
- Disney+ Hotstar で INP を 61% 削減し、リビングルーム向けデバイスでの週単位のカード視聴回数を 100% 増加させた方法
- Google ハードウェアを使用したインタラクティブな 3D ウェブ アプリケーション: 次世代のプロダクト学習体験
- PubTech の同意管理プラットフォームが、顧客ウェブサイトの INP を最大 64% 削減し、広告の視認性を最大 1.5% 改善した方法
- どこでもグッドノート
- コンテンツ レコメンデーション プロバイダである Taboola は、LoAF を使用して、パブリッシャー パートナー ウェブサイトの INP を最大 36% 改善しました。
- CapCut: WebAssembly と WebCodecs を使用して完全に機能するウェブアプリを構築することで、オーガニック トラフィックを 83% 増加
- イラストレーターのためのウェブの力: ウェブ技術を活用した pixiv の描画アプリ
- Tokopedia: ML を使用して販売者のウェブアプリを改善し、運用コストを削減した方法
- Trendyol が INP を 50% 削減した結果、クリック率が 1% 上昇した方法
- Kiwix PWA でインターネットからギガバイト単位のデータをオフライン保存する方法
- Yahoo!JAPAN、パスキーの導入率を 11% に増やし、SMS OTP の費用を削減
- プリフェッチによって Terra の広告のクリック率が 30% 向上し、Largest Contentful Paint が高速化された仕組み。
- バックフォワード キャッシュが Yahoo!JAPAN ニュース、モバイルでの収益が 9% 増加
- INP の修正に関する Economic Times のクエスト
- redBus、ウェブサイトの Interaction to Next Paint（INP）を改善して売上を 7% 伸ばした方法
- ブラウザ用 3D の驚くべき機能にスポットライトを当て、ゲームユーザーとデベロッパーの双方を魅了する Slow Roads
- より快適なウェブを実現する: 高速な YouTube
- 楽天 24 がウェブに関する主な指標に投資したことで、訪問者あたりの収益が 53.37%、コンバージョン率が 33.13% 増加した理由
- GoDaddy のウェブサイト + マーケティング サービスでは、顧客のウェブに関する主な指標が 75% 向上した
- 高級品小売業者の Farfetch、ウェブに関する主な指標の改善によりコンバージョン率が向上
- Yahoo! JAPAN のパスワード不要の認証で問い合わせが 25% 減少し、ログイン時間が 2.6 倍に
- ウェブに関する主な指標を最適化してロイヤリティとエンゲージメントを高めた RebelMouse の事例
- WorkBox により Adobe Experience Manager で最新のウェブ環境を構築
- MishiPay の PWA により、トランザクションが 10 倍に増加し、キューイングを 2 年半削減
- ウェブに関する主な指標の基準を突破し、直帰率を全体で 43% 向上させた Economic Times の事例
- ダークモードでユーザー エンゲージメントを改善した Terra
- QuintoAndar の事例: ページのパフォーマンスを向上させてコンバージョン率とセッションあたりの閲覧ページ数を改善
- Kapwing: ウェブ向けの高度な動画編集
- SVGcode: ラスター画像を SVG ベクター グラフィックに変換する PWA
- Mail.ru のホームページで Core Web Vitals を改善した結果、コンバージョン率が平均 10% 向上
- Largest Contentful Paint を測定、最適化することで、直帰率とコンバージョン率を改善したルノーの事例
- Swappie、ウェブに関する主な指標に着目することでモバイルの収益を 42% 増加
- Core Web Vitals のビジネスへの影響
- ウェブに関する主な指標に取り組み、Netzwelt の広告収益が 18% 増加した方法
- Blibli の PWA により、ユーザーあたりの収益が従来のモバイルサイトの 10 倍に増加
- Telegraph Media Group の Cumulative Layout Shift の改善
- オレンジ: 新しい PWA により、モバイルでのコンバージョン率が 52% 向上
- Mainline Menswear の事例: PWA を導入した結果、コンバージョン率が 55% アップ
- Zalando が Lighthouse CI を使用してパフォーマンスのフィードバック時間を 1 日から 15 分に短縮した方法
- Lowe's のウェブサイトは、パフォーマンスが最速の e コマースサイトの 1 つです
- Vodafone: LCP を 31% 改善し、売上を 8% 増加
- Wix がインフラストラクチャを進化させることでウェブサイトのパフォーマンスを向上させた方法
- CLS の最適化によって Yahoo! トラベルが日本ニュースのセッションあたりのページビュー数が 15% 増加
- Agrofy: LCP の 70% の改善は、負荷の放棄が 76% 減少する相関関係にある
- Excalidraw Electron のサポート終了とウェブ版への移行
- PWA ユーザーが Gravit Designer PRO を購入する可能性は 2.5 倍
- Clipchamp の動画エディタ PWA のインストール数は月間 97% 増加
- JD.ID、キャッシュ戦略、インストール、プッシュ通知を活用してモバイル コンバージョン率を 53% 向上
- 楽天 24 は PWA への投資によりユーザー維持率を 450% 向上
- NDTV: Core Web Vitals の最適化により LCP を 55% 改善
- ウェブ パフォーマンスに重点を置くことで、Tokopedia のクリック率が 35% 向上した方法
- ZDF がオフライン モードとダークモードの動画 PWA を作成した方法
- Goibibo の PWA によりコンバージョン数が 60% 増加した方法
- Mercado Libre がウェブに関する指標に合わせて最適化した方法（TBT/FID）
- ミリ秒の差が数百万ドル
- Wake Lock API の事例紹介: BettyCrocker.com での購入意向インジケーターが 300% 増加
- Google が stale-while-revalidate で広告パフォーマンスを向上させた方法
- eBay.com でスピード商品を購入
- OYO Lite: 優れたウェブアプリと Android アプリを備えた TWA
- AirSHIFT が React アプリのランタイム パフォーマンスを改善した 5 つの方法
- Truebil がウェブを成長のチャネルにした方法
- ウェブへの投資でエンゲージメントを高めた OpenSooq
- Google Earth をウェブに展開する方法
- Service Worker を Google 検索に対応
- 日経がマルチページ PWA で新たな品質とパフォーマンスを実現
- George.com、新しいプログレッシブ ウェブアプリでモバイル カスタマー エクスペリエンスを強化
- BookMyShow の新しいプログレッシブ ウェブアプリでコンバージョン数が 80% 増加
- Ele.me、複数ページのプログレッシブ ウェブアプリで読み込み時間を改善
- WebVR でダンストナイト
- 0 時間 1 日
- Lancôme、モバイルサイトを PWA として再構築したことで、コンバージョン数が 17% 増加
- OLX、プログレッシブ ウェブアプリでモバイルウェブでの再エンゲージメントを 250% 増加
- Infobae: プログレッシブ ウェブアプリを利用してモバイルサイトの利用時間を 2 倍以上に増加
- Mynet の事例: AMP ベースの PWA により、モバイルウェブ エクスペリエンスを 4 倍高速化し、収益を 25% 増加
- Ola、プログレッシブ ウェブアプリで 10 億人の先住民のモビリティを促進
- Twitter Lite PWA でエンゲージメントを大幅に向上させ、データ使用量を削減
- MakeMyTrip.com の新しい PWA でコンバージョン率が 3 倍に向上
- Jumia ではコンバージョン率が 33% 増加し、PWA のユーザー数が 12 倍に増加
- Voot のプログレッシブ ウェブアプリ
- PWA としてのサンタ トラッカー
- WebVR ラボの主要なインタラクション
- WebVR でのテキストのレンダリング
- WebVR 向け Matterport VR
- Bear 71 と WebVR
- 固定線
- カーニバル クルーズライン
- The Weather Channel
- Smart Lock for the Guardian
- AliExpress 用 Smart Lock
- Housing.com、新しい PWA によりコンバージョン数を増やし、直帰率を 40% 削減
- Service Worker が実社会に与えるパフォーマンスへの影響を測定する
- The Washington Post
- Google I/O 2016 プログレッシブ ウェブアプリの構築
- エクストラエレクトロニクス
- ジュミア
- BaBe
- Konga
- 5 マイル
- Suumo
- バーチャル アート セッション
- Net-A-Porter
- Flipkart、プログレッシブ ウェブアプリでサイト滞在時間を 3 倍に
- Polymer を使ってライトセーバーを作成する
- Google+
- 幅広い用途
- AirHorner.com
- 本番環境の Service Worker
- Madeon アドベンチャー マシン
- ハミングバード図書館
- Adsy.me
- リトルアルケミー
- Hacker News Reader
- メリー ピクマス
- Chrome Dev Summit 2014
- SVGOMG
- ウェブフィルタ
- ホビット体験 2014
- Chrome でビルドする
- 中つ国のフロントエンド
- ホビットの冒険
- 事例紹介 - レーサーの構築
- ケーススタディ - The Sounds of Racer
- 事例紹介 - Inside World Wide Maze
- Roll It を作成しています
- 次世代のウェブ レイアウト - National Geographic Forest Giant
- 事例紹介 - Google I/O 2013 Experiment
- 事例紹介 - HTML5 ゲームの自動サイズ変更
- 事例紹介 - オズへの冒険: オズへの冒険
- 事例紹介 - Chrome での JAM
- 100,000 スターを獲得
- 事例紹介 - Chrome での JAM
- Movi Kanti Revo - パート 1 - 3D 世界の構築
- ケーススタディ - SONAR、HTML5 ゲーム開発
- 事例紹介 - Technitone.com の構築
- 事例紹介 - Bouncy Mouse
- ケーススタディ - HTML5 MathBoard
- 事例紹介 - Stanisław Lem Google Doodle の作成
- ケーススタディ - Stream Congress のリアルタイム更新
- 事例紹介 - Wordico を Flash から HTML5 に変換する
- ケーススタディ - Onslaught!アリーナ
- 事例紹介 - 20thingsilearned.com のページめくり効果
- ケーススタディ - HTML5 キャンバスの絡み合い
- ケーススタディ - deviantART muro での HTML5
- 事例紹介 - Chrome でのドラッグ&ドロップ ダウンロード
- How Ray-Ban doubled conversion rate and reduced exit rate by 13% through prerendering using the Speculation Rules API
- How QuintoAndar reduced INP by 80%, increasing conversions by 36%
- How YouTube improved video performance with the Media Capabilities API
- Forbes
- Wego
- Alibaba
- AliExpress