- Google Chrome Developers
- The Mobile Web: State of the Union - Google I/O 2016
Click on text below to jump to specific point in the video
Rahul from the Chrome team. Welcome to the mobile web state of the union.
Web features: Easy discovery. Low friction. Broad reach. Open and decentralized. Our mission is to move the web platform forward.Chrome grew to 1 billion active users on mobile last month.We had to go back to first principles to figure out what would make the mobile web awesome.
We believe this mobile experience depends on 4 pillars:
1. Accelerate the experience
2. Provide an engaging experience
3.Convert visitors into loyal users
4. Once you have users, retain and reengage them
This required many changes to mobile browsers, but this transformation is now largely complete.
These experiences are known as progressive web apps. Speed is the killer feature. If the page does not respond to your finger press, it is a painful experience.
We recently launched passive event listeners. This lets you give hints to the browser about why you are listening for touch events. Using this API, the browser can do a better job of responding to scroll.
Two phones - comparison. There is a huge difference in responsiveness.
40% of users will abandon a website that takes more than 3 seconds to load. We created AMP - accelerated mobile pages - AMP pages load 4 times faster and use 10x less data. There are over 125 millions AMP documents out there, from 600+ thousand unique domains.
The second pillar is to deepen the engagement by creating polished app experiences. Service workers provide full client side control over fetching and caching.
Jalan Tikus - tech review site in Indonesia example.
Progressive web apps and service workers also enable your app to work well offline. Example - Flipkart.
Washington Post has created a cool integration as well.
David Merrell - senior product manager from Washington PostWe are making some new investments in the mobile web space. AMP has lived up to its name - on average the pages load in 400ms, which is a huge gain over the traditional mobile web. Users love the speed.
The question facing publishers today: how can we build engaging and fast experiences that will build relationships with users beyond the search carousel.
We will go to a Washington post story from web search. It loads really fast. We are using a service worker to install a very small piece of web app behind the scenes. This will upgrade the user to a richer mobile experience. Load times under a second when coming from AMP page. The scrolling experience feels very smooth. We used ideas and principles of AMP to make the pages very light and we added caching ability of service workers to precache pieces of the article before you even get there. Thanks to that, we have brought load times down to 80ms for each article. The precaching also lets us tackle an important issue everyone with a smartphone faces - what happens when you go offline?The DC metro goes in and out of cell service.Because of the pre-caching, I can keep reading new articles even if I go offline. I invite all of you to check it out.
Rahul: I hope you are convinced that you can create a mobile web experience which is fast and engaging. Third pillar: converting the visitors into loyal users.
Typing on mobile is hard. Asking users to sign in is hard. 92% of users give up rather than retype credentials again. We have the password manager feature to help. What if we could do it better?
Introducing Credential Management API which does just that. Kayak is a travel company using this API. A user who goes to Kayak and taps the sign in button, will see a prompt for which credential they want to use, and they are signed in. One tap sign in. Kayak can also remember and sign the user in automatically.
We also want to help users complete transactions on the web. 66% of mobile commerce happens on the web. On the other hand, conversions are at a rate 66% lower than desktop web. We have autofill to help with this. 25% more form submissions on Android using Chrome's autofill feature. But what if we could do it better?
Introducing the Web
Shopify is using this. One tap check out process with Shopify. When the user hits Pay, the transaction is done. This API also works with Android Pay. The flow is exactly the same.
Let us look at the fourth
pillar - retain and reengage. Push based interactions is an important thing which happened because of mobile. Push notifications - once a user opts in, websites can send notifications, even if browser isn't open.Jumia has seen success with push notifications. They used them to reengage users who abandoned shopping carts. Jumia reports 9x increase in conversions on previously abandoned carts.
We send out 10 billion push notifications every single day.
Hannes Schwager - head of mobile at airberlinairberlin is Germany's second largest airline.We served over 30 million passengers in 2015.We have been building a progressive web app to improve the customer check-in experience. Not all customers will download the app.A lot of people check in via mobile web. Push notification from airberlin.Tapping on push notification takes me directly to a page with access to flight details, and we can check in with one click. It is not just a convenient experience with push notifications - its about being there for the customer for the whole journey. The internet is often poor at airports.All critical details are available in offline mode. Including access to the boarding pass. Thanks to progressive web apps and service workers, we have been able to improve the journey for our customers.We are already thinking of rolling out this technology to other critical parts of the travel journey.
Rahul: Suumo delivering faster speed and better re-engagement. They were able to improve page load times by 75%. Push notifications saw a 31% open rate on the notifications.
AliExpress is seeing increased engagement across browsers. The time spent in their app went up by 74%. They saw an 82% increase conversions on iOS.
Looking aheadTwo examples:
web - nearby objects and places broadcast sites
Assembly - define a new low level language runs at native speed, but securely and on the webVideo outline created using VideoJots