Progressive Web Apps - Intro and State of Market in Australia
1 like650 views
The document discusses the benefits of Progressive Web Apps (PWAs), emphasizing their ability to enhance user experience and retention through faster load times and app-like features. Despite high mobile internet usage, many Australian retail sites fail to meet key PWA criteria such as HTTPS and service worker registration. The document highlights the importance of performance optimization and presents findings from an audit of Australia’s top retail sites, revealing a significant lack of compliance with PWA standards.
Progressive Web Apps - Intro and State of Market in Australia
- 1. PROGRESSIVE WEB APPS Nichola Stott SLIDESHARE/NICHOLASTOTT Next- Level Mobile Performance
- 2. PWAs help you keep your visitors for longer, delivering a faster user experience which drives greater profit. @NicholaStott
- 3. SESSIONS 2015 2016 2017 2018 Mobile: Desktop: DEVICE MIGRATION @NicholaStott
- 4. mobile internet usage crosses 50% for the first time in all 63 countries covered by the Consumer Barometer Study… Source: Think With Google @NicholaStott
- 5. SMARTPHONE USE AUSTRALIA Source: Consumer Barometer @NicholaStott 87% of consumers accessing the internet regularly on a smartphone. 84% on computer.
- 6. NOT ABOUT COST OF INVESTMENT, COST OF NOT INVESTING @NicholaStott
- 7. LOST POTENTIAL PAGE LOAD 3G 19 Seconds Average Load Time >3 Seconds 53% Abandonment Rate Source: Google /DoubleClick 2015 @NicholaStott
- 8. Source: Think with Google @NicholaStott
- 11. Not a product, but more a set of features designed to make the experience faster, smoother, always- on. @NicholaStott
- 12. APP-LIKE FEELS Add to home screen Push notifications Offline content @NicholaStott
- 14. WHAT’S WRONG WITH ‘NORMAL’ APPS? @NicholaStott
- 15. MOBILE APP DRAWBACKS Fiddly, resource- intensive, web- to-app deep linking Tracking referrals and web vs. app attribution 2X budget, systems, effort, spend @NicholaStott
- 16. We’re going to look at the baseline spec, how PWAs take speed to next level and practical take-aways… @NicholaStott
- 17. H/2 reduce latency minimise protocol overhead request prioritisation HTML5 local storage motion/react native-like SECURE/MOBILE DEVICE @NicholaStott
- 18. LIGHTER JS LIBRARY Preact Polymer Vue Lower parse and compile times. Developers: see HNPWA for list of live examples frameworks/libraries. Addy Osmani : Google I/O 17 @NicholaStott
- 19. BASELINE PWA CRITERIA PWA Baseline Checklist: Google Developers Audit Item Pass Does it run on HTTPS? Migrate to HTTPS Do all pages size to mobile viewport? Single domain responsive Load all URLs offline Use a Service Worker to serve offline content, responding 200 Add to Homescreen Meta data in Web App Manifest Fast TTFI <10 second TTFI on 3G Works Cross Browser Chrome Edge, Firefox, Safari Page Transitions Must respond immediately URL per Page Client-side router can re-construct app state from a given URL @NicholaStott
- 20. Lighthouse Chrome Dev Tools LIGHTHOUSE TOOL @NicholaStott
- 21. LIGHTHOUSE CHROME EXTENSION Still Alpha and ‘buggy’. On occasion data fails. Close tabs, clear cache. Clear cache or run clean browser profile. @NicholaStott
- 23. IS THE CHROME DEV AUDIT TOOL @NicholaStott
- 24. APP MANIFEST FOR NAME & ICONS
- 25. SERVICE WORKERS Jake Archibald – Trained to Thrill/Github “MITM” (hence HTTPS) Manage offline content Send push notification @NicholaStott
- 28. @NicholaStott Thinking about Performance Optimisation less in terms of developer metrics and more about delivering on experience and improving perception… Speed, Perception & Lighthouse – Weyl and Ahammad MINDSET SHIFT
- 29. METRICS THAT MATTER? Server Response Time TLS Round Trip Time To First Byte Time to First Paint @NicholaStott
- 30. HAPPENING? USEFUL? USABLE? @NicholaStottCREDIT: Addy Osmani– FluentConf Deck
- 31. @NicholaStott METRICS THAT MATTER? Lighthouse: More on PSI Measures Results- focused
- 32. Perceptual Speed Index is a page load performance metric that shows you how quickly the contents of a page are visibly populated. The lower the score, the better.. GOOGLE
- 33. 2VISIT THE STUDY Mobile Readiness & Progressive Web Apps in the UK Are Digital Leaders Adapting to Mobile Audiences?
- 34. 5 LIGHTHOUSE AUDIT CRITERIA 1. HTTPS – is the site served over HTTPS? 2. Service Worker – does the site register a Service Worker? 3. Speed – <10,000 TTFI/CI 4. Add to Home Screen – user prompt ‘‘Add to Home Screen’’? 5. Content Sized for Mobile Viewport – responsively or adaptively? @NicholaStott
- 41. HTTPS 94% 6% With HTTPS Without HTTPS @NicholaStott 94% of Australia’s top 100 retail sites are on HTTPS
- 42. SERVICE WORKER @NicholaStott 7% 93% With Service Worker Without Service Worker Only 7% of Australia’s Top 100 retail sites register a service worker.
- 43. 0% 100% With Add to Home screen Without Add to Home screen ADD TO HOMESCREEN @NicholaStott None of Australia’s Top 100 retail sites prompts users to add-to-home screen
- 44. 92% 8% With Content Sized to Mobile Devices Without Content Sized to Mobile Devices Respond to Mobile Viewport @NicholaStott 8 of Top 100 Australian retail sites still cannot service to mobile viewport.
- 45. 4% 96% Under 10s on 3G Above 10s on 3G SUB 10 SECOND TTFI @NicholaStott 96% of Top 100 Retail sites in Australia failed the Lighthouse PWA speed criterion.
- 46. SUB 10 SECOND TTFI @NicholaStott 16.9 27.05 21.7 0 5 10 15 20 25 30 35 40 45 50 0 20 40 60 80 100 Seconds Number of analyzed URLs TTFI for Top 100 Retail Sites in Australia TTFI (sec) Quartile 1 (25%) Quartile 3 (75%) Median
- 47. TAKE-AWAYS
- 48. H/2 reduce latency minimise protocol overhead request prioritisation @NicholaStott HTML5 local storage motion/react native-like SECURE/MOBILE DEVICE ALMOST ALL SITES ON THIS SPEC CAN BE PWAS!
- 49. There are no Australian retail sites that are full PWAs.
- 51. ERUDITE WORDPRESS PWA Service worker Manifest.json in root Speed Handles push notices Set and configure
- 52. Using Node CLI/Raspberry PI to Automate at Scale… run: lighthouse <url>
- 53. SUB 10 SECOND TTFI @NicholaStott 16.9 27.05 21.7 0 5 10 15 20 25 30 35 40 45 50 0 20 40 60 80 100 Seconds Number of analyzed URLs TTFI for Top 100 Retail Sites in Australia TTFI (sec) Quartile 1 (25%) Quartile 3 (75%) Median Fastest is hard… Faster than this bunch is easy…
- 54. THANKS FOR LISTENING GET THE SLIDES: SLIDESHARE/NICHOLASTOTT