Date post: | 21-Mar-2017 |
Category: |
Technology |
Upload: | e-commerce-capitals |
View: | 159 times |
Download: | 0 times |
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