e-commerce berlin expo 2017 - amp and progressive web apps – start fast, stay engaged

Today’s users moved to a mobile world. Why hasn’t the web?

Laurence KozeraKonstantin GuratzschChristian Schlüter

Next Generation

Web

3.4 BN(2016)

0.034 BN(1996)

Source: ITU, 2016

Who has …?

September 2010

REACH

CAPA

BILI

TIES

REACH

CAPA

BILI

TIES

Accelerated Mobile Pages4x faster and <1s median load time of landing pages

Accelerated Mobile Pages &

Progressive Web Appsfor XING Jobsxing.com/jobs

11 million users80.000 groups

12.000 yearly events

250.000 businesses

60.000 active HR employees1 million

jobs

AMP

Desktop to mobile

Web can’t keep up

❖ page loads slowly

❖ scrolling is non responsive

❖ content shifts around

Why AMP?

Source: Chrome Dev Summit, 2016

of users bounce from sites that take longer than 3 seconds to load53%

Performance as a feature

Content Delivery Network

Why is AMP so fast

HTML compressio

n

JavaScriptlimitation &compressio

n

adjust image size to display

+ +

Reduction

Website with content reduced to a minimum is

cached on a proxy server in the Content Delivery

Network

explore options

• Content Delivery Network

• marketing and menotization

• fast page speed

• higher mobile user satisfaction

• tracking possibilities

• Google carousel as a prominent feature

Pros Cons

homepageno implementation yet

SERPAMP ready

job detail pageno implementation

planned

More info on AMP & implementation● AMP Project Website and getting started guide

● Learn about extensions, ads and analytics

● Get help on StackOverflow

● Videos: NewsLab Hangouts, AMP with Paul Bakaus & AMP Anatomy with Malte Ubl

● Get help in the Webmaster Central Forums

● Learn more about AMP in Google Search

● Read about Structured Data for Top Stories

● Check for errors in the Search Console

AMP Result

Error Reports and Bug Fixing

Performance Assessment

Learnings

• converted 300k sites to AMP with one FTE in three weeks

• look out for errors and bug fixing

• not yet completely established in Germany

• not a quick win but long term vision

The Future of AMP

Progressive Web App

Accelerated Mobile Pages

Push NotificationsAdd to Home Screen

Acquisition Engagement

Conversion Retention

lebenslauf.comanschreiben.combewerbung.comgehaltsindex.com

xing.com/jobs

Small Screen History

mobileweb

browsing

mobilemodule system

native apps

CMS enter market

hybrid apps

one page application

s

instant application

s

PWA

So why exactly PWA? ● From a user & product perspective

○ Radically improve web user experience

● Reliable / Fast / Engaging○ Reliable, show jobs immediately regardless of network○ Fast, respond quickly to to user interactions, every action

should feel fast○ Engaging, behave like a native app and provide features

known from native apps

● End-to-end performance ○ Slow slide/page load -> bounce rate goes up○ Combine great user experiences with small load time○ Overall time spend comprises of response, animate, idle &

load

XING Jobs approach on implementing PWA?

build on top new/beta

XING Jobs● AMP for SERPs● Service Worker on xing.com/jobs● Caching of common assets● Web App Manifest● A2HS

Possible next steps... ● Offline support● Push Notifications● Seamless log-in

Opportunity● One version● No legacy features● Less maintenance● Unlikely to be possible

with established product

● Chance to try dedicated single-purpose use-case

Service Worker

● preloading

● offline mobile web

● push notifications

● background sync

Service Worker

● preloading

● offline mobile web

● push notifications

● background sync

Web app manifest

Add to Home Screen

Provide web app information, describe how to install/configure the app & where to find it in the app stores.

Add to Home Screen● Aka A2HS or Web

App Install Banners● offline experience● app-like feeling

without the download

● full screen experience

● faster page load● no app stores

Location detection

● Retrieve location information from users device

● Allow user to overwrite and remember this information

What else? Depends on product use-

cases!● Push notifications○ (re-) engage users in the right moment, keep updated, customized

content● Offline support

○ allow users to use your product while being offline or not on a reliable network

● Seamless log-in○ reduce the hassle of remembering & entering data on mobile

● Hardware-based○ e.g. click-to-call, take audio/video/image

Advantages

● no app download required / instead small increments of content

● web technology stack● app features available, like

offline support● significantly faster page

load● increase of conversions and

active users

Conclusion

● a better, faster mobile web ● great user experience

● a technology combination that is relevant for product & will matter long term