布局模式
使用新型 CSS API 构建的布局模式，可帮助您构建卡片、动态网格区域和整页布局等常见界面。
- 利用真实用户数据让基准数据更具实用价值
- 充分发挥 CSS 容器查询的强大功能：Netflix 团队的经验教训
- 东急店如何利用通行密钥使登录速度提升到原来的 12 倍
- Google 表格为何将其计算工作器从 JavaScript 移植到 WasmGC
- 减少摩擦，提升控制力：Google Meet 如何改进音频和视频权限
- BILIBILI 利用 MediaPipe 的设备端 Web AI 解决方案，改善视频流用户体验并将会话时长增加 30%
- Disney+ Hotstar 将 INP 降低 61% 后，客厅设备上的每周卡片观看次数增加了 100%
- 利用 Google 硬件在 Web 上使用交互式 3D 模型：新一代产品培训体验
- PubTech 的意见征求管理平台如何将客户网站上的 INP 降低多达 64%，同时将广告可见度提高多达 1.5%
- 随时随地使用 Goodnotes
- CapCut 使用 WebAssembly 和 WebCodecs 构建功能齐全的 Web 应用，将自然流量提高了 83%
- 内容推荐服务提供商 Taboola 如何利用 LoAF 将其发布商合作伙伴网站的 INP 提升高达 36%。
- 插画师必备网络的力量：pixiv 如何利用网络技术打造他们的绘图应用
- Tokopedia 如何利用机器学习技术改进其卖家 Web 应用，从而降低运营成本
- Trendyol 如何将 INP 降低 50%，使点击率提高 1%
- Kiwix PWA 如何允许用户存储来自互联网的 GB 级数据以供离线使用
- Yahoo!Japan 将通行密钥的采用率提高到了 11%，并降低了短信动态密码费用
- 预提取如何帮助 Terra 将广告点击率提高 30% 并加快 Largest Contentful Paint。
- 往返缓存如何帮助 Yahoo!JAPAN News 将移动广告收入提高 9%
- 《经济时报》挑战 INP 问题
- redBus 如何改进其网站的 Interaction to Next Paint (INP) 并将销售额提高 7%
- “慢路”如何吸引玩家和开发者，并聚焦于浏览器中的 3D 令人惊讶的功能
- 打造更出色的网络：更快的 YouTube
- Rakuten 24 如何投资于核心网页指标，将每位访问者带来的收入提高了 53.37%，将转化率提高了 33.13%
- GoDaddy's “网站 + 营销”服务如何将客户的核心网页指标提升了 75%
- 奢侈品零售商 Farfetch 实现了更高的转化率，提升了核心网页指标
- Yahoo! JAPAN 的免密码身份验证技术将咨询量减少了 25%，将登录时间缩短了 2.6 倍
- RebelMouse 如何通过优化核心网页指标来提高忠诚度和互动度
- 使用 WorkBox 在 Adobe Experience Manager 上实现现代网络体验
- MishiPay 的 PWA 将交易次数提高了 10 倍，并节省了 2.5 年的排队时间
- 《经济时报》如何超越核心网页指标阈值，并使跳出率总体提高了 43%
- Terra 如何借助深色模式提升用户互动度
- QuintoAndar 如何通过改善网页性能来提高转化率和每次会话浏览页数
- Kapwing：强大的 Web 视频编辑工具
- SVGcode：用于将光栅图片转换为 SVG 矢量图形的 PWA
- 通过改进 Mail.ru 首页上的核心网页指标，转化率平均提高了 10%
- 雷诺如何通过衡量和优化 Largest Contentful Paint 提高了跳出率和转化率
- Swappie 如何通过专注于核心网页指标将移动收入提高 42%
- 核心网页指标的业务影响
- 通过承诺使用核心网页指标，Netzwelt 的广告收入如何增长了 18%
- Blibli 的 PWA 创造的每用户收入是其之前的移动网站的 10 倍
- 改进 Telegraph Media Group 的 Cumulative Layout Shift
- Orange：新版 PWA 在移动设备上的转化率提高了 52%
- Mainline 男装实施了 PWA，转化率提高了 55%
- Zalando 如何利用 Lighthouse CI 将性能反馈时间从 1 天缩短到了 15 分钟
- Lowe's 网站是效果最快的电子商务网站之一
- Vodafone：LCP 提升 31%，销售额增加了 8%
- Wix 如何通过改进基础架构来提高网站性能
- CLS 优化功能如何使 Yahoo!JAPAN News 的每次会话网页浏览量增加了 15%
- Agrofy：LCP 提升 70% 后，加载放弃率降低了 76%
- 弃用 Excalidraw Electron，改为使用网页版
- Clipchamp 的视频编辑器 PWA 安装量每月增长了 97%
- PWA 用户购买 Gravit Designer PRO 的可能性提高 2.5 倍
- 通过缓存策略、安装和推送通知，JD.ID 将移动转化率提高了 53%
- Rakuten 24 在 PWA 方面的投资将用户留存率提高了 450%
- 通过针对核心网页指标进行优化，NDTV 将 LCP 提升 55%
- 关注网站性能的策略如何让 Tokopedia 的点击率提高 35%
- ZDF 如何利用离线模式和深色模式创建视频 PWA
- Goibibo 的 PWA 将转化次数提高了 60%
- Mercado Libre 如何针对网页指标进行优化 (TBT/FID)
- 毫秒提升，百万收益
- Wake Lock API 案例研究：BettyCrocker.com 上的购买意愿指标增长了 300%
- Google 如何利用“在重新验证时过时”功能提升广告效果
- 在 eBay.com 上选购快速商品
- OYO Lite：集最佳 Web 和 Android 应用于一体的 TWA
- AirSHIFT 通过五种方式提升其 React 应用运行时性能
- Truebil 如何让网络成为增长渠道
- OpenSooq 如何通过投资网站来提高互动度
- 我们如何将 Google 地球带入网络
- 将 Service Worker 引入 Google 搜索
- Nikkei 借助多页 PWA 将质量和性能提升到新的水平
- George.com 利用新的渐进式 Web 应用提升移动客户体验
- BookMyShow 新推出的渐进式 Web 应用将转化量提升 80%
- Ele.me 利用多页渐进式 Web 应用缩短性能加载时间
- WebVR 中的《Dance Tonite》
- 0 小时 1 小时
- Ola 利用渐进式 Web 应用为 10 亿印度人提供移动办公服务
- 借助基于 AMP 的 PWA，Mynet 将移动网站体验速度提升至原来的 4 倍，收入增长了 25%
- MakeMyTrip.com 的新 PWA 将转化率提高至原来的 3 倍
- 兰蔻将其移动网站改造成 PWA，将转化次数提高了 17%
- Infobae 利用渐进式 Web 应用使用户在移动网站上停留的时间增加了一倍以上
- Twitter Lite PWA 显著提高了互动度并减少了流量消耗
- OLX 利用渐进式 Web 应用将用户在移动网站上的再互动率提高了 250%
- Jumia 时，转化率提高了 33%，使用 PWA 的用户数增加了 12 倍
- Voot 中的渐进式 Web 应用
- 以 PWA 形式呈现“追踪圣诞老人”
- WebVR 实验室中的核心交互
- 适用于 WebVR 的 Matterport VR
- Bear 71 和 WebVR
- 在 WebVR 中呈现文本
- 地线
- 天气频道
- 嘉年华邮轮
- Smart Lock（监护人）
- 适用于 AliExpress 的 Smart Lock
- Housing.com 利用新的 PWA 提高了转化次数并将跳出率降低了 40%
- 衡量 Service Worker 对实际性能的影响
- 华盛顿邮报
- 构建 2016 年 Google I/O 大会渐进式 Web 应用
- eXtra Electronics
- 朱米亚
- BaBe
- Konga
- 5 英里
- Suumo
- 虚拟 Art Session
- Net-A-Porter
- Flipkart 通过渐进式 Web 应用将网站停留时间提高至原来的 3 倍
- 使用 Polymer 制作光剑
- Google+
- 超越机架
- AirHorner.com
- 生产环境中的 Service Worker
- 马顿探险机
- 蜂鸟图书馆
- Adsy.me
- 《小炼金术》
- Hacker News Reader
- 2014 年 Chrome 开发者峰会
- 梅利皮克斯马斯
- 网络过滤器
- 天哪
- 2014 年霍比特人经历
- 使用 Chrome 构建
- 中土世界前端
- 霍比特人体验
- 案例研究 -《The Sounds of Racer》
- 案例研究 - 构建赛车手
- 案例研究 - Inside World Wide Maze
- 正在创建 Roll It
- 下一代网页布局 - 国家地理森林巨人组织
- 案例研究 - 自动调整 HTML5 游戏大小
- 案例研究 - 2013 年 Google I/O 大会实验
- 案例研究 - 走进奥兹国
- 案例研究 - JAM with Chrome
- 赚取 10 万颗星星
- 案例研究 - JAM with Chrome
- Movi Kanti Revo - 第 1 部分 - 构建 3D 世界
- 案例研究 - SONAR，HTML5 游戏开发
- 案例研究 - 构建 Technitone.com
- 案例研究 - Bouncy Mouse
- 案例研究 - HTML5 MathBoard
- 案例研究 - 制作史坦尼斯劳·莱姆的 Google 涂鸦
- 案例研究 - 视频流会议中的实时动态
- 案例研究 - 将 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