Ryan Doll
Technical Architect at VML
Performance Budgets and Website Optimizations
https://slides.com/ryandoll/performance-budgets/
@ryandoll
You need a budget!
Why do you need a Performance Budget?
Average Page Weight = 2,219kB.
(That’s three 3.5 inch double-density floppy disks-worth of data.)
http://httparchive.org/interesting.php?a=All&l=Nov%2015%202015&s=All#bytesperpage
Slowness Costs $$$
Mobile
How do you set one up?
Budgets are only effective if they are used.
- Start your project with one
- Define what metrics will be used
- Every byte has a name
- Everyone is in agreement
Metrics
“Fast” is relative.
Quantitative
Example: 3 JavaScript files vs 1 JavaScript file
Rule Based
Google PageSpeed Insights or YSlow
Milestone Based
- Time to first Byte
- Time to first Paint
- Time to domContentLoaded
- Time to Load
Perceived
- Speed Index - Webpagetest.org
- Custom Metric
Real User Measurement (RUM)
How do you stick to the budget?
If a new feature is needed:
- Refactor/optimize existing functionality to allow room in the budget
- Remove something already in the budget to make space
- Don’t implement the feature
What causes slowness?
How an HTML page loads:
- Browser sends request
- Server receives request
- Server puts together a list of things to do (HTML file)
- Server sends back the list
- Browser reads the list, and then proceeds to retrieve all the items on the list
- Browser then processes the assets as they get loaded
80-90% of the end-user response time is spent on the frontend. Start there.
http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
It’s all about latency.
Bandwith = Capacity
Latency
vs
- Caching
- Gzip All the Things!
- Use CDNs
- Use Build Tools
- Optimize Images
- Minify CSS and JS
- Concat CSS and JS
- But...not always!
- Code Splitting
Tips
Sources
https://devchat.tv/js-jabber/184-jsj-web-performance-with-nik-molnar
http://httparchive.org/interesting.php?a=All&l=Nov%2015%202015&s=All#bytesperpage
https://timkadlec.com/2013/01/setting-a-performance-budget/
http://blog.gigaspaces.com/amazon-found-every-100ms-of-latency-cost-them-1-in-sales/
http://ubiquity.acm.org/article.cfm?id=1513451
https://timkadlec.com/2014/11/performance-budget-metrics/
http://blog.alexmaccaw.com/time-to-first-tweet
https://blog.kissmetrics.com/speed-is-a-killer/
http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
Thank you.
https://slides.com/ryandoll/performance-budgets
Performance Budgets and Website Optimizations
By Ryan Doll
Performance Budgets and Website Optimizations
Your website can be built with the most popular JavaScript framework, use amazing CSS naming conventions, and have the best build process out there. However, none of that matters if it loads slow for your users. Let's look at what performance budgets are, and how you can implement them and some other optimizations into your website.
