Gareth Hughes @Brassic_lint | Michael Gooding @Michael_G_81 Intro Agenda 1. What is a PWA? 2. Measure performance of a PWA 3. Optimising App startup 4. Optimising within the App 5. Improve user experience
Gareth Hughes @Brassic_lint | Michael Gooding @Michael_G_81 Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Section 1: What is a PWA? Easy to launch Nice load screens Work offline (kind of) Can consume space BUT …
Gareth Hughes @Brassic_lint | Michael Gooding @Michael_G_81 Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Section 1: What is a PWA? Simple Searchable Sharable Adaptable
Gareth Hughes @Brassic_lint | Michael Gooding @Michael_G_81 Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Section 1: What is a PWA? PWA = Web + App Normal website +
Gareth Hughes @Brassic_lint | Michael Gooding @Michael_G_81 Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Section 1: What is a PWA? • A built in browser proxy • JavaScript based • Bonus of push notifications • Cache assets on start up • Use cache when no network • Error handle when no cache and no network • And more…..
Gareth Hughes @Brassic_lint | Michael Gooding @Michael_G_81 Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Section 1: What is a PWA? • Even in challenging network conditions • Standard page load timings important • As well as usability timings • 60fps rendering • No Jank • Responsive touch inputs
Gareth Hughes @Brassic_lint | Michael Gooding @Michael_G_81 Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Section 1: What is a PWA?
Gareth Hughes @Brassic_lint | Michael Gooding @Michael_G_81 Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Section 1: What is a PWA? TLS is a ranking index in it’s own right But TLS opens access to: • Service workers • Push notification API • H2 for performance • Other API’s • Web Background sync • Payment API
Gareth Hughes @Brassic_lint | Michael Gooding @Michael_G_81 Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Section 1: What is a PWA? • Adaptive is also OK • Applies to Tablets as well as mobile • Viewport tags • Correct sized content (think images) • Big enough buttons • Manual checks still useful
Gareth Hughes @Brassic_lint | Michael Gooding @Michael_G_81 Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Section 1: What is a PWA?
Gareth Hughes @Brassic_lint | Michael Gooding @Michael_G_81 Section 2: Measure performance of a PWA Agenda • Types of monitoring • Metrics and best practice • RUM lab
Gareth Hughes @Brassic_lint | Michael Gooding @Michael_G_81 Section 2: Measuring performance of a PWA Server 0.5s Total 10s Load 7s Render 2s Meaningful 4s
Gareth Hughes @Brassic_lint | Michael Gooding @Michael_G_81 Lab https://mpulselogin.soasta.com/ Username: [email address] Password: Fluent2018 Check data from your app Review dashboards Create a custom timing
Gareth Hughes @Brassic_lint | Michael Gooding @Michael_G_81 Be byte responsible • Cache the file • Compress the file • Consider renaming the images • Limit the number of images (2-5) • Cache those images • Optimise the images Section 3: Optimising App startup
Gareth Hughes @Brassic_lint | Michael Gooding @Michael_G_81 Reduce weight of images • Size * • Resize for device types • Resize for screen estate • Format • The basics (e.g. no png’s) • Browser specific formats • Quality • Baseline a good start • Intelligent automated solutions * See also responsive images Section 3: Optimising App startup
Gareth Hughes @Brassic_lint | Michael Gooding @Michael_G_81 Section 3: Optimising App startup Critical Path Faster rendering Smaller payload Improved app start-up time Only used once Maintenance overhead Monolith Reusable Increased offload Easy to maintain Can delay render Sending more bytes
Gareth Hughes @Brassic_lint | Michael Gooding @Michael_G_81 Lab Swap in critical path CSS on the homepage Configure Service Worker to serve the monolith
Gareth Hughes @Brassic_lint | Michael Gooding @Michael_G_81 Section 3: Optimising App startup PUSH! • Push critical resources • Use the “dead” time • https://shouldipush.com • https://canipush.com • Can be used with either strategy
Gareth Hughes @Brassic_lint | Michael Gooding @Michael_G_81 Lab Add Preload header for Google Font CSS Change CSS to self-hosted fonts Push Font Files Preload in Service Worker
Gareth Hughes @Brassic_lint | Michael Gooding @Michael_G_81 Section 4: Optimising within the App Agenda • Rendering with h2 • Image optimisation • Service worker for caching • Preload content
Gareth Hughes @Brassic_lint | Michael Gooding @Michael_G_81 Section 4: Optimising within the App H2 rendering best practice • Critical content from single domain • Defer non-critical content • Server push • Preload 3rd party content * * resource hints
Gareth Hughes @Brassic_lint | Michael Gooding @Michael_G_81 Section 4: Optimising within the App https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/
Gareth Hughes @Brassic_lint | Michael Gooding @Michael_G_81 Section 4: Optimising within the App https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/
Gareth Hughes @Brassic_lint | Michael Gooding @Michael_G_81 Section 4: Optimising within the App Let’s think about our native-like experience… • Browse the shop offline? • Add products to basket & purchase later
Gareth Hughes @Brassic_lint | Michael Gooding @Michael_G_81 Lab Add remaining pages to preload in Service Worker Discover & preload primary image and thumbs
Gareth Hughes @Brassic_lint | Michael Gooding @Michael_G_81 Section 5: Improving user experience 3rd Party best practice • Self host if possible • JS – async & defer where possible • Resource hints (preload & preconnect) • Measure performance • Measure impact • Impose SLA’s
Gareth Hughes @Brassic_lint | Michael Gooding @Michael_G_81 Section 5: Improving user experience • Google Analytics • https://garl.ink/offline-analytics • Collect & store offline • Replay when network available • We built a basic mPulse collector • Code Demo • Will be released • You can build your own!
Gareth Hughes @Brassic_lint | Michael Gooding @Michael_G_81 Section 5: Improving user experience • Not great for someone on limited bandwidth • Consider the cost… • https://whatdoesmysitecost.com/
Gareth Hughes @Brassic_lint | Michael Gooding @Michael_G_81 Section 5: Improving user experience What if we could know what type of connection or the user’s preference? • Act differently for desktop/mobile • Desktop more likely to be on a fixed (unmetered/fast) connection • Detect if user has Chrome Data Saver enabled • Intercept requests and rewrite them • Use the Network API to discover the type of connection • Currently Draft…
Gareth Hughes @Brassic_lint | Michael Gooding @Michael_G_81 Section 5: Improving user experience pwabuilder-sw.js self.addEventListener('install', function(event) { if(navigator.connection && navigator.connection.type !== false) { //Network API data available if(navigator.connection.type == "ethernet" || "wifi" || "wimax") { //Fast, likely unmentered... preload all the things event.waituntil(preLoad()); } else { //Cellular or unable to detect... just give basic offline support event.waituntil(minimalPreLoad()); } } else { //Network API data not supported event.waitUntil(preLoad()); } });
Gareth Hughes @Brassic_lint | Michael Gooding @Michael_G_81 Section 5: Improving user experience 4 Parts of RAIL Source: https://developers.google.com/web/fundamentals/performance/rail
Gareth Hughes @Brassic_lint | Michael Gooding @Michael_G_81 Section 5: Improving user experience Response • Respond in under 50ms • Don’t block the user, make sure response is within 100ms • Provide feedback for anything else Source: https://developers.google.com/web/fundamentals/performance/rail
Gareth Hughes @Brassic_lint | Michael Gooding @Michael_G_81 Section 5: Improving user experience Animation • Do nothing where you can, do the minimum where you can’t • Use the 100ms response to pre-calculate expensive work • Target 10ms/frame, 6ms to render • Consider all types • visual animation • scrolling • dragging Source: https://developers.google.com/web/fundamentals/performance/rail
Gareth Hughes @Brassic_lint | Michael Gooding @Michael_G_81 Section 5: Improving user experience Idle • Use to complete deferred work • Keep work blocks <50ms to avoid blocking user input • User takes priority Source: https://developers.google.com/web/fundamentals/performance/rail
Gareth Hughes @Brassic_lint | Michael Gooding @Michael_G_81 Section 5: Improving user experience Load Test in conditions that match your users • 4G doesn’t always mean 4G • Focus on critical rendering path • 5s doesn’t mean everything • Source: https://developers.google.com/web/fundamentals/performance/rail
Gareth Hughes @Brassic_lint | Michael Gooding @Michael_G_81 Section 5: Improving user experience Measuring RAIL in Dev Tools • Throttle your CPU • Throttle the network • View main thread activity • View main thread activities in a table to sort • Analyze frames per second (FPS) • Monitor CPU usage, JS heap size, DOM nodes, layouts per second, and more • Visualize network requests • Capture screenshots • View interactions • Find scroll performance issues • View paint events Source: https://developers.google.com/web/fundamentals/performance/rail
Gareth Hughes @Brassic_lint | Michael Gooding @Michael_G_81 Summary Summary PWA’s are 1. now mainstream Measure performance of a PWA 2. Optimise 3. App startup Optimise 4. within the App Consider 5. user experience
mgooding1981
abenben
soachr
oogfranz
safie_recruit
wadayusuke
asazutaiga
____rina____
shao1555
kako351
eliasnogueira
tomohisa
oracle4engineer
dougneiner
eileencodes
jensimmons
productmarketing
scottboms
zenorocha
moore
panda_program
chriscoyier
searls
swwweet
afnizarnur