FrontIn BH - Web performance in large scale applications

Transcript

2. Team members
3. Web Performance in Large-Scale Applications.
4. Why perceived performance matters?
5. Per Jakob Nielsen “The 3 Important Limits of Response Time”. Impacto direto em “user engagement and revenue”. Pode determinar seu ranking em social media e search. Internet para celular custa caro. Sobretudo em países emergentes ou em desenvolvimento. Why perceived performance matters?
9. User-centric metrics.
10. The old way
12. TTI
13. TCI
15. What metrics better describes the UX?
16. FP & FCP via Performance Observer Interface let observer = new PerformanceObserver((list) => { let perfEntries = list.getEntries(); for (let i = 0; i < perfEntries.length; i++) { // report back for analytics and monitoring } }); // register observer for long task notifications observer.observe({entryTypes: [“paint]});
17. FMP – User Timing and Custom metrics performance.mark("hero-start"); //load hero <hero /> performance.mark("hero-end"); performance.measure("hero-timing", "hero-start", "hero-end"); //report data to analytics let measures = performance.getEntriesByName("hero-timing"); let measure = measures[0]; sendToAnalytics(measure.duration);
19. Calculating FCI based on long tasks
20. Consistently Interactive via Google Polyfill //Head of your document <script> !function(){if('PerformanceLongTaskTiming' in window){var g=window.__tti={e:[]}; g.o=new PerformanceObserver(function(l) {g.e=g.e.concat(l.getEntries())}); g.o.observe({entryTypes:['longtask']})}}(); </script> //import google polyfill https://github.com/GoogleChrome/tti- polyfill import ttiPolyfill from './path/to/tti-polyfill.js'; ttiPolyfill.getFirstConsistentlyInteractive(opts).then((tti) => { // report back for analytics and monitoring
 });
21. Synthetic Monitoring Vs. Real User Metrics.
22. Improving the perceived performance.
23. First Paint & First Contentful Paint Server-Side Rendering Inline critical CSS Evite render blocking scripts no <head>
24. First Meaningful Paint & TTI Code Splitting The PRPL pattern
25. The PRPL performance pattern.
26. The PRPL Performance Pattern A PRPL visualization by Jimmy Moon
27. Third parties.
28. Third parties SOASTA Research 1. 93% long tasks from Ads 2. 62% from Ads e Social widgets No Times, reduzimos o número de trackers pela metade.
29. Recap Perceived performance is good for business, tell your boss. User-centric metrics Synthetic metric + RUM = <3 Third parties are hard PRPL
30. Thanks. #foratemer
 Slides available in my twitter account: @fs