learn-co-curriculum / tcg_performance_budgeting

Time to Interactive and Performance Budgeting

Learning Goals

• Explain how a performance budget helps teams manage page load times
• Use tools to analyze bundle size

Pre-check

Before reading, write down your best answer to the following questions:

• What makes a webpage feel slow?
• What contributes to page slowness, from an engineering perspective?

Intro to Page Performace - Time to Interactive

Page load performace is one of the key metrics that engineering teams manage in order to improve user experience in web applications. What do they measure? What steps can they take to improve when things are slow?

Time to Interactive - focusing on the human-centric metrics gives an introduction to performance metrics with historical context and a recent (Oct 2018) recommended best practice for measuring webpage performance.

Lighthouse

Built into chrome are advanced tools for measuring a range of important features of applications - not only load times, but accessibility, adherence to standards, and SEO. Try them out to see what you can discover.

• Choose three popular sites of different kinds (e.g blog, web app, splash page). If you don't have favorites of your own, try twitter, the calibreapp blog post above, and flatironschool.com. For each of the sites,
• Open the chrome dev console and navigate to the 'Audit' tab
• Run several audits, changing some of the checkboxes and toggles
• Read the details of the audit and the recommendations

Performance Budgets

Among the links at the bottom of the above blog post was this blog post on Real World Web Performance Budgets. It gives a detailed walkthrough of what contributes to webpage performance and why, and how you can manage page load times on an engineering team.

Post-check

• How long should it take to load a webpage?
• How are performance and accessibility related? How can you as an engineer make an effective business case for performance and accessibility?
• Say you are on a team and you hear that users are experiencing slow page load times. What are some of the steps that you'd follow to address this? Consider the steps you'd take from an engineering perspective, as well as from a teamwork and user-experience advocacy perspective.

Note: This will inevitably happen to you. All apps are slow, every team has some web presence.