Performance
Google Developers Logo
Github logo View Source
feedback icon Submit Feedback

Progressive Web App Road Show 2016

Stopping in New York, Chicago, Austin, Toronto, Mountain View and Seattle. Learn more and sign up now.

Optimizing content efficiency

The amount of data downloaded by apps continues to increase over time. To deliver great performance you must optimize data delivery as much as possible.

  1. Optimizing content efficiency
  2. Eliminating unnecessary downloads
  3. Optimizing encoding and transfer size of text-based assets
  4. Image optimization
  5. Web font optimization
  6. HTTP caching

Critical rendering path

Optimizing the critical rendering path refers to prioritizing the display of content that relates to the current user action.

  1. Critical rendering path
  2. Constructing the Object Model
  3. Render-tree construction, layout, and paint
  4. Render blocking CSS
  5. Adding interactivity with JavaScript
  6. Measuring the critical rendering path with Navigation Timing
  7. Analyzing critical rendering path performance
  8. Optimizing the critical rendering path
  9. PageSpeed rules and recommendations

Rendering performance

Users notice if sites and apps don't run well, so optimizing rendering performance is crucial!

  1. Rendering performance
  2. Optimize JavaScript execution
  3. Reduce the scope and complexity of style calculations
  4. Avoid large, complex layouts and layout thrashing
  5. Simplify paint complexity and reduce paint areas
  6. Stick to compositor-only properties and manage layer count
  7. Debounce your input handlers

Performance codelab

In this codelab, you will learn how to identify and fix web app performance bottlenecks.

  1. Performance codelab
  2. About the project app
  3. Improve list scrolling performance
  4. Story concatenation
  5. Story slide-in/out (part 1)
  6. Memory waste
  7. Story slide-in/out (part 2)
  8. Congratulations

Understand low bandwidth and high latency

It's important to understand what your app or site feels like when connectivity is poor or unreliable, and build accordingly. A range of tools can help you.

  1. Understand low bandwidth and high latency
  2. Test with low bandwidth and high latency
  3. Handle unreliable connectivity and 'lie-fi'

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Terms of Service.