JakartaJS - Web Performance Budgeting

An insight about web performance optimitization on technical budget
https://www.meetup.com/JakartaJS/events/243384172/

Transcript

1. Disclaimer Presentations are intended for educational purposes only and not to replace independent professional judgment. Statements of facts and opinions expressed here are those of the participant’s personally and do not necessarily reflect those of Blibli.com. Blibli.com does not endorse nor approve, and assumes no responsibility for the content, accuracy or completeness of the information presented.
2. Web Performance Budget JakartaJS (Oktober 2017) (herwidodo@gdn-commerce.com)
3. Introduction • Herwidodo Kusumobroto • Sr. Software Developer Engineer at Blibli.com • Join Blibli on 2015 • Frontend engineer and web performance
4. Agenda - What is Perfbudget - Why - Measurement (metrics, tools, type) - How fast - Navigation timing - Speed index - Case Study
5. What is performance budgets
6. What is performance budgets Is it money budget = X
7. What is performance budgets - Enable Gzip compresion - Minify HTML, CSS, JS - Minimize Redirect - Combine JS Files - Use image sprites - Style in header, scripst in footer - Lazyload images - Optimized Images - Defer JS Parsing - Reduce DNS Lookups
8. What is performance budgets A clearly defined performance goal used to guide design & development Performance is a critical component of the user experience of any site or application. Making sure what we build is fast and lightweight requires more than just technical tweaks—we have to find ways to prioritize performance from start to finish. Setting and maintaining a performance budget is one of the most effective ways of keeping performance up front in center. Tim Kadlec @akamai
9. Why? Why should we care about web performance? Wondering the web is like this iceberg mountain Copyright - Brad Frost
10. Why? Reality Copyright - Brad Frost
11. Performance budgeting • Performance should never be sacrificed for the sake of presentation. In fact, studies have found that about 37% of users find site performance to be more important than its functionality, and, even more alarming, 57% of users will leave a site if it takes longer than 3 seconds to load. Thankfully aesthetic value doesn’t have to be sacrificed either—it just requires a little bit of thinking. • Paul Irish, a Google Chrome Developer Advocate, recommends a speed index of under 1000 and to deliver the above-the-fold content in the first 14kb of the page.
12. Measurement metrics Tools Synthetic Monitoring - Webpagetest.org - Google Pagespeed insight - Yslow RUM (Real User Monitoring) - New relic - Speedcurve - Soasta m-pulse
13. Metrics - Quantity Based - Rule Based - Milestone timings - Speedindex
14. Quantity Based - Total number of request - Overall page weight - Total image weight
15. Rule Based Literally like synthetic measurements - Pagespeed insight score - Yslow score - Gtmetrix score
16. Milestone timings - time to visually complete - Load time - domContentLoad - Time to render
17. SpeedIndex 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.
18. SpeedIndex The Speed Index is the "area above the curve" calculated in ms and using 0.0- 1.0 for the range of visually complete. The calculation looks at each 0.1s interval and calculates IntervalScore = Interval * (1.0 - (Completeness/100)) where Completeness is the % Visually complete for that frame and Interval is the elapsed time for that video frame in ms (100 in this case). The overall score is just a sum of the individual intervals: SUM(IntervalScore)
19. Perf study
20. How fast How Fast is Fast Enough?
21. How Fast is Fast Enough? • Instant (0.1-0.2 seconds) is when there is no perceptible "lag" in response. For example, when clicking a button on a website, the button should depress instantly to mirror the pressing of a button in real life. • Immediate (0.5-1s) is the time a user expects a reaction but not necessarily a response. A prime example would be the acknowledgement (a nod, perhaps) that you are hearing someone when they are talking to you. • User Flow (2-5s) is the time when the person is most likely to experience "concentration, absolute absorption in an activity and deep enjoyment." Delivering information within this time frame gives it the best chance of being consumed. • Attention Span (5-10s) is the time a user is increasingly likely to become distracted and disengaged.
22. How Fast is Fast Enough? Speed Index < 1000
23. How Fast is Fast Enough? 20% Optimize rules The Weber-Fechner Law can be simplified into a 20% rule for short time durations. (JND = Just Noticable difference)
24. Navigation API
25. Navigation
26. Quotes “Best Request is No request. Worst request is one that Block the parser.” - Illya Grigorik @ilyagrigorik
27. Perf budget calculator http://www.performancebudget.io
28. Perf budget https://codepen.io/bradfrost/full/EPQVBp/
29. Perf budget Web is Getting FATTER
30. Optimize deferring 3rd party script before after
31. Demo performance budget webpack
32. Perf budget (MOM) Measure Optimize Monitoring
33. Glossary • timkadlec.com/2014/11/performance-budget-metrics/ • http://bradfrost.com/blog/post/performance-budget-builder/ • https://www.performancebudget.io/ • https://medium.com/webpack/webpack-performance-budgets- 13d4880fbf6d • https://sites.google.com/a/webpagetest.org/docs/using- webpagetest/metrics/speed-index
34. THANK YOU
35. Join us https://www.blibli.com/page/karir/