![](https://web.dev/static/images/case-studies-header.png?authuser=8&%3Bhl=ru&hl=ru)
Истории успеха
Making Baseline actionable with real user data
How RUMvision incorporated Baseline information with their RUM data.
How Ray-Ban doubled conversion rate and reduced exit rate by 13% through prerendering using the Speculation Rules API
Learn how Ray-Ban improved LCP by using the Speculation Rules API, and how it improved Ray-Ban's ecommerce platform's business performance.
How QuintoAndar reduced INP by 80%, increasing conversions by 36%
QuintoAndar significantly improved its web performance by reducing its Interaction to Next Paint (INP) by 80%, leading to a 36% increase in conversions year-over-year.
Unlocking the power of CSS container queries: lessons from the Netflix team
This case study explains the benefits of adopting container queries at Netflix.
How Tokyu achieved 12 times faster sign-in with passkeys
Find out how Tokyu, a railway company in Japan, achieved 12 times faster sign-in with passkeys, helping thousands of commuters daily.
Why Google Sheets ported its calculation worker from JavaScript to WasmGC
Calculations in Google Sheets were initially done on the server, then on the client in JavaScript, and now on the client in WebAssembly Garbage Collection. This case study explains how and why.
Less friction, more control: How Google Meet improved audio and video permissions
This case study describes how the Google Meet team improved permissions and the impact it had on users' meeting satisfaction.
BILIBILI taps MediaPipe's on-device web AI solution to improve video stream UX and boost session duration by +30%
Learn how the web enabled immersive 3D experiences to help customers understand and explore physical products.
How Disney+ Hotstar increased weekly card views by 100% on living room devices by reducing INP by 61%
Discover how Disney+ Hotstar, an app for smart TV and set-top box devices, significantly increased viewer engagement through their efforts to reduce it's INP.
Interactive 3D on the web with Google hardware: Next-gen product education experiences
Learn how the web enabled immersive 3D experiences to help customers understand and explore physical products.
How PubTech's Consent Management Platform reduced INP on their customers' websites by up to 64%, while also improving ad viewability by up to 1.5%
How PubTech's Consent Management Platform reduced INP on their customers' websites by up to 64%, while also improving ad viewability by up to 1.5%
Goodnotes everywhere
For the last two years, the Goodnotes engineering team has been working on a project to bring the successful iPad notetaking app to other platforms. This case study covers how the 2022 iPad app of the year got to web, ChromeOS, Android, and Windows powered by web technologies and WebAssembly reusing the same Swift code the team has been working on for more than ten years.
CapCut boosts organic traffic by 83% by building a fully-functional web app using WebAssembly and WebCodecs
How one of the most popular video editing apps available for mobile created a fully functional web version.
How content recommendation provider Taboola used LoAF to improve INP up to 36% for its publisher partner websites.
How content recommendation provider Taboola used LoAF to improve INP up to 36% for its publisher partner websites.
The power of the web for illustrators: How pixiv uses web technologies for their drawing app
pixiv is an online community service for illustrators and illustration enthusiasts to communicate with each other through their content. It lets people post their own illustrations. They have over 84 million users across the globe, and more than 120
How Tokopedia reduced operational costs by improving their seller web app using Machine Learning
This post describes how Mitra Tokopedia reduced operational costs by improving their seller web app by using Machine Learning.
How Trendyol reduced INP by 50%, resulting in a 1% uplift on click-through rate
This case study describes a step by step workflow of debugging and improving INP in React used by Trendyol by leveraging Google tools such as PageSpeed Insights (PSI), Chrome DevTools, and the scheduler.yield API.
How the Kiwix PWA allows users to store Gigabytes of data from the Internet for offline use
This case study explores how Kiwix, a non-profit organization, uses Progressive Web App technology and the File System Access API to enable users to download and store large Internet archives for offline use.
How Yahoo! JAPAN increased passkeys adoption to 11% and reduced SMS OTP costs
Learn about Yahoo! JAPAN's approach to improving passkeys adoption and user experience.
How prefetching helped Terra increase ads click-through rate by 30% and speed up Largest Contentful Paint.
Prefetching is a technique used to speed up page loading by downloading resources—or even entire pages—which are likely to be needed in the near future. Research has shown that faster load times result in higher conversion rates and better user experiences.
How Back/forward Cache Helped Yahoo! JAPAN News Increase Revenue by 9% on Mobile
Yahoo! JAPAN News, one of the most popular news platforms in Japan, drove a concerted effort to improve their bfcache hit rate and saw significant user experience and business improvements as a result. Specifically, the results of the A/B test they conducted showed that pages that use bfcache had a 9% increase in ads revenue.
How redBus improved their website's Interaction to Next Paint (INP) and increased sales by 7%
INP optimizations helped redBus increase sales by about 7%
Economic Times quest for fixing INP
Bringing down TBT by 30 times and migrating to Next.js helped The Ecomonic Times reduce INP nearly four times, leading to a 50% decrease in bounce rate and 43% uplift in pageviews.
How Slow Roads intrigues gamers and developers alike, spotlighting the surprising capabilities of 3D in the browser
Discover the potential of WebGL with the infinite, procedurally-generated scenery of this casual driving game. Slow Roads is a casual driving game with an emphasis on endlessly procedurally generated scenery, all hosted in the browser as a WebGL
Building a better web: A faster YouTube
This is Part 1 of our new series on Building a Better YouTube Web.
How Rakuten 24's investment in Core Web Vitals increased revenue per visitor by 53.37% and conversion rate by 33.13%
By measuring real users' Web Vitals, Rakuten 24 also found that a good Largest Contentful Paint (LCP) can lead to a conversion rate increase of 61.13%.
How GoDaddy's Websites + Marketing service improved customer Core Web Vitals by 75%
A case study of changes GoDaddy implemented to improve website performance for millions of sites, helping them to achieve good PageSpeed Insights and Core Web Vitals scores.
Luxury retailer Farfetch sees higher conversion rates for better Core Web Vitals
How luxury retailer Farfetch's investment in improving Core Web Vitals led to better business outcomes.
Yahoo! JAPAN's password-free authentication reduced inquiries by 25%, sped up sign-in time by 2.6x
Yahoo! JAPAN achieved a passwordless identity system. Learn their approach and the consequences of the effort.
How RebelMouse grew loyalty and engagement by optimizing Core Web Vitals
A case study measuring the full impact and benefits of high performance scores on Core Web Vitals.
A modern web experience on Adobe Experience Manager with WorkBox
Progressive Web Apps leverage what the modern web can do. Adobe used Workbox to bring those capabilities to Adobe Experience Manager.
MishiPay's PWA increases transactions 10 times and saves 2.5 years of queuing
Learn how MishiPay's PWA increases transactions 10 times and saves 2.5 years of queuing.
How The Economic Times passed Core Web Vitals thresholds and achieved an overall 43% better bounce rate
Optimizing Core Web Vitals on The Economic Times website significantly improved the user experience and substantially reduced bounce rate across the entire website.
How Terra improved user engagement thanks to Dark Mode
In this article, we'll analyze Terra's journey from identifying the size of the "dark mode" cohort, to applying a custom dark theme, and finally measuring the impact of this implementation on their main KPIs.
How QuintoAndar increased conversion rates and pages per session by improving page performance
A project focused on optimizing Core Web Vitals and migrating to Next.js resulted in a 5% increase in conversion rates and a 87% increase in pages per session.
Kapwing: Powerful video editing for the web
Companies like Kapwing make it possible to create all this video content right on the web, by using powerful APIs (like IndexedDB and WebCodecs) and performance tools.
SVGcode: a PWA to convert raster images to SVG vector graphics
Convert color or monochrome bitmap images (PNG, JPG, JPEG, WEBP, AVIF, GIF,…) to color or monochrome vector images (SVG).
Improving Core Web Vitals on the Mail.ru home page resulted in an average 10% increase in conversion rates
Several months of work to improve Core Web Vitals on the home page of Mail.ru resulted in a 60% increase in the 75th percentile in Cumulative Layout Shift (CLS), boosting average session time by 2.7% and conversion rates of core sections by more than 10%.
How Renault improved its bounce and conversion rates by measuring and optimizing Largest Contentful Paint
This post explains how Renault and its global data partner fifty-five approached measuring and optimizing the Core Web Vitals. The team analyzed data from 10 million visits on its landing pages, found a strong correlation between Largest Contentful Paint and conversions, and doubled up on its optimization effort. We will look at these data points and understand how the teams have organized for optimizations.
How Swappie increased mobile revenue by 42% by focusing on Core Web Vitals
This case study explains how Swappie team increased conversions and revenue by optimizing their web app for Core Web Vitals.
The business impact of Core Web Vitals
This article will help you understand how Core Web Vitals correlate with key business metrics by exploring examples of companies which have already seen positive impact for their users and business.
How committing to Core Web Vitals increased Netzwelt's advertising revenues by 18%
Learn how German news publisher Netzwelt optimized Core Web Vitals to improve user experience and ad revenues.
Blibli's PWA generates 10x more revenue per user than their previous mobile website
How Blibli achieved a 42% reduction in bounce rate, an 8x improvement in mobile conversion rate, and 2.5x more pages per session.
Improving Cumulative Layout Shift at Telegraph Media Group
How Telegraph, the leading UK news website managed to improve their 75th percentile CLS by 250% from 0.25 to 0.1 in a couple of months.
Orange: New PWA converts 52% better on mobile
The new PWA also has an average loading time 30% faster than the old site and has improved bounce rate 12% and session depth 18%.
Mainline Menswear implements PWA and sees a 55% conversion rate uplift
Mainline Menswear implements a Progressive Web App (PWA) and sees a 55% conversion rate uplift for users that installed the app with caching and offline capabilities.
How Zalando reduced performance feedback time from 1 day to 15 minutes with Lighthouse CI
The web team at Zalando found that integrating Lighthouse CI enabled a proactive approach to performance, with automated status checks able to compare the current commit to the main branch to prevent performance regressions.
Lowe's website is among fastest performing e-commerce websites
By building an automated performance testing and monitoring system, the Lowe's Site Speed Team test pull requests against performance budgets, and prevent performance regressions going into production.
Vodafone: A 31% improvement in LCP increased sales by 8%
By running an A/B test specifically focused on optimizing Web Vitals, Vodafone found that a 31% improvement in LCP led to 8% more sales, a 15% improvement in their lead to visit rate, and a 11% improvement in their cart to visit rate.
How Wix improved website performance by evolving their infrastructure
A case study of some major changes introduced at Wix to improve website loading performance for millions of sites, clearing the path for them to receive good PageSpeed Insights and Core Web Vitals scores.
How CLS optimizations increased Yahoo! JAPAN News's page views per session by 15%
Using Search Console and Lighthouse to monitor Core Web Vitals, they discovered opportunities for optimizing CLS score by 0.2 which led to 15% increase in page views per session, 13% longer session duration, and 1.72 percentage point decrease in bounce rate.
Agrofy: A 70% improvement in LCP correlated to a 76% reduction in load abandonment
Read how Agrofy improved their load abandoment rate by focusing on Core Web Vitals.
Deprecating Excalidraw Electron in favor of the web version
Excalidraw is a virtual collaborative whiteboard that lets you easily sketch diagrams that feel hand-drawn. On the Excalidraw project, we decided to deprecate Excalidraw Desktop, an Electron wrapper for Excalidraw, in favor of the web version that you can—and always could—find at excalidraw.com. After a careful analysis, we decided that Progressive Web App (PWA) is the future we want to build upon.
Clipchamp's video editor PWA installs see a 97% monthly growth
How PWAs, WebAssembly, and ChromeOS are helping a web-based video editor deliver better performance and a more engaging experience to 12M users.
PWA users are 2.5x more likely to purchase Gravit Designer PRO
PWA users are also 24% more active than all other install types, become repeat users 31% more than all other platforms, and more.
JD.ID improves their mobile conversion rate by 53% with caching strategies, installation, and push notifications
How JD.ID increased its overall mobile conversion rate (mCVR) by 53%, mCVR for installed users by 200%, and daily active users by 26%.
Rakuten 24’s investment in PWA increases user retention by 450%
Making their web app installable resulted in increased traffic, visitor retention, sales per customer, and conversions.
NDTV achieved a 55% improvement in LCP by optimizing for Core Web Vitals
Using tools like PageSpeed Insights , web.dev/measure, and WebPageTest, the NDTV team analyzed potential improvement areas and invested in Core Web Vitals to achieve business success.
How focusing on web performance improved Tokopedia's click-through rate by 35%
Creating a web performance dashboard and optimizing JavaScript, resources, and the homepage to achieve business success.
How ZDF created a video PWA with offline and dark mode
Learn how ZDF created a progressive web app (PWA) with modern features like offline support, installability, and dark mode.
How Goibibo's PWA improved conversions by 60%
Learn how Goibibo, India’s top online travel company, achieved a 60% increase in conversions by building reliable user experiences between their PWA and iOS/Android apps.
How Mercado Libre optimized for Web Vitals (TBT/FID)
Summary of the work done by Mercado Libre's frontend architecture team to optimize FID, using TBT as a proxy metric.
Milliseconds make millions
A 0.1 second improvement in 4 speed metrics can improve progression rates across the full purchase funnel.
Wake Lock API case study: 300% increase in purchase intent indicators on BettyCrocker.com
Case study of cooking site BettyCrocker.com's experiences with implementing the Wake Lock API.
How Google improved ads performance with stale-while-revalidate
This case study explains how Google increased key ads business metrics by optimizing the performance of their third-party ads script with stale-while-revalidate.
Shopping for speed on eBay.com
This case study explains how eBay increased key business metrics by optimizing the performance of their web and app experiences.
OYO Lite: a TWA with the best of web and Android apps
How a hospitality startup built an Android app that relies on web content to dramatically increase user engagement and keep file size low.
Five ways AirSHIFT improved their React app's runtime performance
How the AirSHIFT team used table virtualization, RUM data, lazy loading, web workers, performance budgets, and hackathons to optimize their React app's runtime performance.
How Truebil made the web its channel of growth
This case study explains how the Truebil team increased conversions and engagement by optimizing their web app for speed and reliability.
How OpenSooq increased engagement by investing in the web
Learn how the OpenSooq team used best practices to create a reliable, compelling marketplace progressive web app.
Bringing service workers to Google Search
Search for just about any topic on Google, and you're presented with a page of meaningful, relevant results. What you probably didn't realize is that this search results page may be served by a powerful piece of web technology called a service worker.
How we're bringing Google Earth to the web
Improving cross-browser access to Google Earth with WebAssembly
How YouTube improved video performance with the Media Capabilities API
Using the Media Capabilities API lets you better target video codecs, frame rates, and resolutions based on the capabilities of your users' devices.
Nikkei achieves a new level of quality and performance with their multi-page PWA
With a publishing history of more than 140 years, Nikkei is one of the most authoritative media businesses in Japan. To provide a better user experience and accelerate their business on the web, Nikkei successfully launched a Progressive Web App in November 2017, and they’re seeing amazing results from the new platform.
George.com enhances the mobile customer experience with new Progressive Web App
George.com is a leading UK clothing brand, part of ASDA Walmart. After upgrading their site to a Progressive Web App (PWA), the brand saw a 31 percent increase in mobile conversion. With consumer expectations around the mobile shopping experience at
BookMyShow’s new Progressive Web App drives an 80% increase in conversions
BookMyShow is India’s largest ticketing firm, with 50+ million monthly visitors. They developed an improved version of their mobile website using a Progressive Web App (PWA), optimizing speed and removing data constraints, which resulted in an 80+% increase in conversions.
Ele.me improves performance load times with a multi-page Progressive Web App
Ele.me is the biggest food ordering and delivery company in mainland China. They built their Progressive Web App (PWA) as a multi-page app to improve its mobile web experience, making it faster and more reliable in flaky connections, while accommodating their operational needs to best serve their customers.
Dance Tonite in WebVR
Dance Tonite is an ever-changing VR collaboration with the band LCD Soundsystem and their fans. Built in WebVR, the project works across platforms–with and without VR–giving users a different role into the experience depending on their device. Project creators Jonathan Puckey, Moniker and Google’s Data Arts Team’s creative decisions and advanced optimization techniques enabled high-quality performance–close to 60FPS for 3DoF and 90FPS for 6DoF–and a compelling user experience across all platforms using a single codebase.
Twitter Lite PWA Significantly Increases Engagement and Reduces Data Usage
The Twitter Lite Progressive Web App combines the best of the modern web and native features to deliver a more robust experience, with explicit goals for instant loading, user engagement and lower data consumption
0h h1
0h h1 is a fun (and addictive) game that just feels right on mobile. I have always loved the endless possibilities of web technology, and I consider myself lucky for having embraced it so many years ago, because these past years have seen amazing
Infobae more than doubles time spent on mobile site with a Progressive Web App
Infobae took advantage of service worker to deliver reliable performance on unreliable networks. Their best-in-class PWA achieved a performance score of 93/100 on Lighthouse, an automated tool for measuring web-page quality.
MakeMyTrip.com’s new PWA delivers 3X improvement in conversion rates
After launching a Progressive Web App, MakeMyTrip.com's conversion rate on the mobile web tripled, while their page-load speed improved by 38%.
OLX boosts re-engagement on the mobile web by 250% with a Progressive Web App
For OLX, creating a Progressive Web App increased engagement by 250% and reduced page time to interactive by 23%
Jumia sees 33% increase in conversion rate, 12X more users on PWA
Traffic to Jumia's PWA has eclipsed that of their native app by more than 12 times and is still growing. Jumia also saw a 50% bounce-rate decrease
Ola drives mobility for a billion Indians with Progressive Web App
Ola is the leading cab aggregator in India, with a relentless mission to drive mobility for a billion Indians. The company reaches over 100 Indian cities with a network of about 600K driver-partners. As one of India’s most highly valued startups, Ola
Lancôme rebuilds their mobile website as a PWA, increases conversions 17%
To drive both traffic and re-engagement, luxury cosmetics brand Lancôme launched a Progressive Web App (PWA) to deliver a fast, app-like experience on the mobile web
Forbes
Forbes is re-defining modern web development with Progressive Web App technology.
Mynet speeds up their mobile web experience by 4X, increasing revenue by 25% with AMP-based PWA
Every month Mynet provides more than 34 million visitors to their site with news, video, gaming, financial, informational and entertainment content and services. After launching a Progressive Web App (PWA) that uses Accelerated Mobile Pages (AMP) for
Wego
There's a new way to deliver amazing user experiences on the web. Travel company Wego has built a successful AMP based Progressive Web App (PWA).
Progressive Web App at Voot
Voot.com launches their media Progressive Web App in India. Within days of implementation, session time per user increased by 39% and daily views per user by 15%. Voot is one of India's top video-on-demand products, available as both a native app and
Santa Tracker as a PWA
View the site Santa Tracker was rapidly upgraded to an offline Progressive Web App for the 2016 holiday season, thanks in part to our existing scene design. Santa Tracker is a holiday tradition here at Google. Every year, you can celebrate the season
Matterport VR for WebVR
View the site Matterport VR lets you experience thousands of real-world places in interactive virtual reality. Using a combination of automated 3D interior mapping technology and robust vision processing algorithms, Matterport's 3D media system
Rendering Text in WebVR
Within is a platform for storytelling in virtual reality and is available everywhere VR is. This includes the web. Leveraging WebVR, viewers are able to go to a website, click a link, and immediately watch Within’s films in immersive VR - including high end head-mounted displays. During the development process the team discovered rendering text is difficult in this new environment, and they created an example using shaders to make it a smoother process.
Bear 71 and WebVR
View the documentary WebVR is an API built into browsers that combines stereo rendering with real-time head tracking, enabling a quick and easy way to enjoy VR content online. With WebVR, content creators can create immersive VR content that lives
Core Interactions in the WebVR Lab
View the Lab Website designers are familiar with the idea of responsive design, building a website to work across different devices, such as mobile phones, tablets and computers and different screen resolutions and pixel ratios. WebVR introduces new
Land Lines
Land Lines is an experiment that lets you explore Google Earth satellite images through gesture. Using a combination of machine learning, optimized algorithms,and graphics card power, the experiment is able to run efficiently on your phone's web browser without a need for backend servers. This is a look into our development process and the various approaches we tried leading us to the final result.
The Weather Channel
The Weather Company, an IBM Business, serves an average of 40 billion forecast requests every day, helping people plan their daily lives and make better decisions based on weather.
Carnival Cruise Line
Carnival Cruise Line provides personalized, engaging communication service for its customers with push notifications. Download PDF Case study Carnival Cruise Line, one of the world’s largest leisure-travel companies, wanted to enhance how it
Alibaba
Alibaba.com is the world’s largest online business-to-business (B2B) trading platform, serving 200+ countries and regions. After upgrading their site to a Progressive Web App (PWA), they saw a 76 percent increase in total conversions across browsers.
Smart Lock for the Guardian
Download PDF Case study Guardian News & Media (GNM) publishes theguardian.com, one of the largest English-speaking quality newswebsites in the world. Since launching its US and Australia digital editions in 2011 and 2013 respectively, traffic
Smart Lock for AliExpress
Download PDF Case study Launched in April 2010, AliExpress is a global retail marketplace targeted at consumers worldwide. The platform enables consumers from around the world to buy directly from wholesalers and manufacturers in China through access
Housing.com increases conversions and lowers bounce rate by 40% with new PWA
Download PDF Case study Housing.com is one of India’s top startups. On track to receive 50 million visits this year, it has become one of the leading online real estate platforms in India. After building Housing Go, a Progressive Web App (PWA), they
Measuring the Real-world Performance Impact of Service Workers
Measuring the Real-world Performance Impact of Service Workers
The Washington Post
AMP helps the Washington Post increase returning users from mobile search by 23% Download PDF Case study With nearly 55% of their traffic coming from mobile devices, The Washington Post knows that providing a great reading experience on mobile
Building the Google I/O 2016 Progressive Web App
Building the Google I/O 2016 PWA using web components
AliExpress
AliExpress increases conversion rate for new users by 104% with new Progressive Web App Download PDF Case study "Smarter shopping, better living!" is the motto of AliExpress, a website where shoppers can buy everything from baby clothes to
eXtra Electronics
United eXtra Electronics grows eCommerce sales by 100% with Web Push Notifications Download PDF Case study eXtra is Saudi Arabia’s leading and fastest-growing consumer electronics and home appliance retailer. They serve over 12 million shoppers at
Jumia
Push Notifications help Jumia reverse cart abandonment and increase conversions by 9X Download PDF Case study Jumia is a leading e-commerce website in Africa. Most of their customers use mobile devices, which also provide the largest source of
BaBe
BaBe’s cross-browser Progressive Web App rivals performance of native app. Download PDF Case study Launched in 2013, BaBe is the largest news-aggregator app in Indonesia. It has been downloaded by more than a million people. This app-only
Konga
Konga cuts data usage 92% with new Progressive Web App Download PDF Case study Launched in 2012, Konga is a leading e-commerce website in Nigeria, selling everything from books to fridges to mobile phones. Mobile devices provide the largest source of
5miles
5miles decreases bounce rate by 50% and increases conversions by 60% with new Progressive Web App Download PDF Case study “Sell what you got and buy what you want!” is the motto of 5miles, a mobile marketplace where shoppers can buy everything from
Suumo
Japan's top real estate site supercharges new listings with web Push Notifications and sees a 31% open rate for notifications. Download PDF Case study SUUMO is Japan’s top real estate site, serving nearly 11% of the country’s population. Fourteen
Virtual Art Sessions
Six artists were invited to paint, design, and sculpt in VR.
Net-A-Porter
Net-A-Porter saves development time with Google's Polymer Library NET-A-PORTER implemented a component-based design on their online properties using Google's Polymer library. The result was a large saving in development time, standarized code across
Flipkart triples time-on-site with Progressive Web App
In 2015, Flipkart, India’s largest e-commerce site, adopted an app-only strategy and temporarily shut down their mobile website. The company found it harder and harder to provide a user experience that was as fast and engaging as that of their mobile app. But then, Flipkart decided to rethink their development approach. They were drawn back to the mobile web by the introduction of features that made the mobile web run instantly, work offline, and re-engage users.
Creating a Lightsaber with Polymer
How to set up a high FPS WebGL project with Polymer.
Google+
We hit our goal of never downloading more than 60k of HTML, 60k of JavaScript and 60k of CSS at any one time!
Beyond the Rack
Beyond the Rack re-engages users on the mobile web, increasing revenue per visit by 26% with push notifications.
AirHorner.com
AirHorner is a simple but powerful Progressive Web App that shows the power of Service Workers and the Web Audio API to give you your very own air horn. Use it to annoy your friends or co-workers, no matter whether you're online, offline or on a flaky 2G network
Service Workers in Production
Learn how we used service worker libraries to make the Google I/O 2015 web app fast, and offline-first. This year’s Google I/O 2015 web app was written by Google’s Developer Relations team, based on designs by our friends at Instrument, who wrote the
Madeon Adventure Machine
Madeon Adventure Machine is a clever promotion for Madeon's new album that is a fun drum machine. The load time (see WebPageTest score) on mobile 3G could be significantly improved if the precaching of all beats and loops was removed or done in a
Hummingbird Library
Hummingbird Library: A refreshingly new frontend to Hummingbird, a popular anime watch-tracker and discovery site. Anime fans (like me – that view count on the screenshot is real!) have long been obsessed with keeping track of what they watched.
Adsy.me
Adsy.me is a super quick and easy way to build mobile microsites. Adsy.me is a tool that allows anyone to create a mobile (micro-) website, and they immediately gained my trust by eating their own dogfood: The whole tool is a fantastic mobile web app
Little Alchemy
Little Alchem: A fun, mobile-friendly combination game inspired by its bigger brother Alchemy. Little Alchemy is a prime example of using all of the web platform's latest abilities to its full advantage. It uses the web app manifest to launch
Hacker News Reader
Hacker News Reader: An amazing optimized reader for Hacker News. A beautiful and highly optimized reading experience for Hacker News, this app works well and looks great across mobile, tablet and desktop. It's fast and testing it on mobile you will
Merry Pixmas
Merry Pixmas: Christmas fun with 3D CSS Transforms. A nice Christmas-themed demo that works well across desktop and mobile. It even comes with brand new theme color support, and a web manifest for a home screen experience that launches full screen.
Chrome Dev Summit 2014
The Chrome Dev Summit 2014 website was built in-house by our own Paul Lewis, the CDS website showed how to build a great mobile web experience for conference visitors.
SVGOMG
SVGOMG: A beautiful, material, responsive frontend for SVGO. Built by our own Jake Archibald, SVGOMG is an almost perfect example of a fully responsive and capable tool written with web technologies. It features a beautiful Material Design look,
Web Filter
Web Filters: Fast, quick and dirty camera filters. A rather awesome web based camera app that lets you apply filters in real time. It automatically saves the image to your local device, which means it usually gets synchronized to your cloud storage
The Hobbit Experience 2014
Adding WebRTC gameplay to the Hobbit Experience In time for the new Hobbit movie “The Hobbit: The Battle of the Five Armies” we have worked on extending last year’s Chrome Experiment, A Journey through Middle-earth with some new content. The main
Build with Chrome
Bringing LEGO® bricks to the Multi-Device Web Build with Chrome, a fun experiment for desktop Chrome users originally launched in Australia, was re-released in 2014 featuring global availability, tie-ins with THE LEGO® MOVIE™, and newly added support
The Front-end of Middle-earth
A walkthrough of multi-device development In our first article about the development of the Chrome Experiment A Journey Through Middle-earth we focused on WebGL development for mobile devices. In this article we discuss the challenges, problems and
The Hobbit Experience
Bringing Middle-Earth to Life with Mobile WebGL Historically, bringing interactive, web-based, multimedia-heavy experiences to mobiles and tablets has been a challenge. The main constraints have been performance, API availability, limitations in
Case Study - The Sounds of Racer
Racer is a multi-player, multi-device Chrome Experiment. A retro-style slot car game played across screens. On phones or tablets, Android or iOS. Anyone can join. No apps. No downloads. Just the mobile web. Plan8 together with our friends at
Case Study - Building Racer
Racer is a web-based mobile Chrome Experiment developed by Active Theory. Up to 5 friends can connect their phones or tablets to race across every screen. Armed with the concept, design and prototype from Google Creative Lab and sound from Plan8 we
Case Study - Inside World Wide Maze
World Wide Maze is a game in which you use your smartphone to navigate a rolling ball through 3D mazes created from websites in order to try to reach their goal points. The game features abundant use of HTML5 features. For example, the
Creating Roll It
Roll It is a Chrome Experiment that reimagines a classic boardwalk game using only the browser on your phone and computer. The browser on your phone lets you aim and roll the ball with a flick of your wrist, while the browser on your computer renders
Next Generation Web Layout - National Geographic Forest Giant
Wielding the tools from CSS and browser layout can enable stunning visualizations for web content. Using web features like CSS filters, WebGL, HTML5 video, SVG, canvas and evolving future tech like CSS Regions, CSS Shapes and CSS Custom Filters
Case Study - Auto-Resizing HTML5 Games
In the summer of 2010, we created Sand Trap, a game that we entered in a competition on HTML5 games for mobile phones. But most mobile phones either displayed only part of the game or made the game too small—making it completely unplayable. So we
Case Study - Google I/O 2013 Experiment
To build developer interest on the Google I/O 2013 website before conference registration opened, we developed a series of mobile-first experiments and games focusing on touch interactions, generative audio and the joy of discovery. Inspired by the
Case Study - Find Your Way to Oz
“Find Your Way to Oz” is a new Google Chrome Experiment brought to the web by Disney. It allows you to take an interactive journey through a Kansas circus, which leads you to the land of Oz after you are swept up by a massive storm. Our goal was to
Case-study - JAM with Chrome
How we made the UI rock JAM with Chrome is a web based musical project created by Google. JAM with Chrome lets people from all over the world form a band and JAM in real time inside the browser. DinahMoe pushed the boundaries of what was possible
Making 100,000 Stars
Hello! My name is Michael Chang and I work with the Data Arts Team at Google. Recently, we completed 100,000 Stars, a Chrome Experiment visualizing nearby stars. The project was built with THREE.js and CSS3D. In this case study I will outline the
Case-study - JAM with Chrome
How we made the audio rock JAM with Chrome is a web based musical project created by Google. JAM with Chrome lets people from all over the world form a band and jam in real time inside the browser. We at DinahMoe had the great pleasure to be a part
Movi Kanti Revo - Part 1 - Building the 3D World
Movi.Kanti.Revo is a new sensory Chrome experiment crafted by Cirque du Soleil and developed by Subatomic Systems that brings the wonder of Cirque du Soleil to the web through modern web technologies. The experiment was created using just HTML5, and
Case Study - SONAR, HTML5 Game Development
Last summer I worked as the technical lead on a commercial WebGL game called SONAR. The project took around three months to complete, and was done completely from scratch in JavaScript. During the development of SONAR, we had to find innovative
Case Study - Building Technitone.com
Technitone.com is a fusion of WebGL, Canvas, Web Sockets, CSS3, Javascript, Flash, and the new Web Audio API in Chrome. This article will touch base on every aspect of production: the plan, the server, the sounds, the visuals, and some of the
Case Study - Bouncy Mouse
After publishing Bouncy Mouse on iOS and Android at the end of last year, I learned a few very important lessons. Key among them was that breaking into an established market is hard. On the thoroughly saturated iPhone market, gaining traction was
Case Study - HTML5 MathBoard
MathBoard on iPad, a PalaSoftware application, is a highly polished application with many subtle but natural animations and a unique realistic look and feel. The goal was to do the highest fidelity port of the iPad application to HTML5. N2N-Apps is a
Case Study - Building the Stanisław Lem Google doodle
The Google homepage is a fascinating environment to code within. It comes with many challenging restrictions: particular focus on speed and latency, having to cater to all sorts of browsers and work under various circumstances, and… yes, surprise and
Case Study - Real-time Updates in Stream Congress
Through WebSockets and EventSource, HTML5 enables developers to build web apps that communicate in real time with a server. Stream Congress (available in the Chrome Web Store ) provides live updates about the workings of the United States Congress.
Case Study - Converting Wordico from Flash to HTML5
When we converted our Wordico crossword game from Flash to HTML5, our first task was to unlearn everything we knew about creating a rich user experience in the browser. While Flash offered a single, comprehensive API for all aspects of application
Case Study - Onslaught! Arena
In June of 2010, it came to our attention that local publishing "zine" Boing Boing was having a game development competition. We saw this as a perfectly good excuse to make a quick, simple game in JavaScript and <canvas>, so we set to work.
Case Study - Page Flip Effect from 20thingsilearned.com
In 2010, F-i.com and the Google Chrome team collaborated on an HTML5-based educational web app called 20 Things I Learned about Browsers and the Web ( www.20thingsilearned.com ). One of the key ideas behind this project was that it would best be
Case Study - Getting Entangled with HTML5 Canvas
This past spring (2010) I took interest in the rapidly increasing support for HTML5 and related technologies. At the time, a friend and I had been challenging each other in two-week game development competitions to hone our programming and
Case Study - HTML5 in deviantART muro
On August 7, 2010, deviantART celebrated its 10th birthday. We celebrated our birthday by launching an HTML5 drawing tool called deviantART muro. The tool can be used as a stand-alone web application as well as a lightweight drawing tool for adding
Case Study - Drag and Drop Download in Chrome
Drag and Drop (DnD) is one of the many great features of HTML 5, and it is supported in Firefox 3.5, Safari, Chrome and IE. Google recently rolled out a new feature that allows Google Chrome users to drag and drop files from the browser to the