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:

  1. Browser sends request
  2. Server receives request
  3. Server puts together a list of things to do (HTML file)
  4. Server sends back the list
  5. Browser reads the list, and then proceeds to retrieve all the items on the list
  6. 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

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.

  • 1,145
Loading comments...

More from Ryan Doll