Google's Chrome browser has an amazing array of built in tools that allow us to both find problems in our websites and allow us to improve, all for free. This talk is for all front end developers working in JavaScript and/or CSS. I will show how to spot performance issues, find memory leaks and how to fix them both. And best of all I will present some easy to remember rules of thumb to prevent these issues from re-occurring.
2. Android Wear Talk
• Smart watches are hot!
• Google is getting into the game
• Get ahead of the curve
• Free talk April 24th in LA
• http://bit.ly/1g6RMf6
3. Beginning Android
Class
• Saturday, May 10th & 17th
• From installing the SDKs…
• to deploy to the Play Store
• Learn pro development tips and techniques
• http://bit.ly/1kqsqjP
4. Our Agenda
• The three pillars of page performance
• The Chrome Dev Tools
• Network tools
• Performance tools
• Rendering tools
5. The Three Pillars of Page
Performance
• Network - Connection Speed + Latency
• Compute - JavaScript
• Render - Layout + Paint
10. Network Panel
• Shows how long it takes for your site to
download
• latency - server processing time
• DOMContentLoaded - The whole
document has been loaded
• load - The document and its resources are
loaded
11. Images
• For most sites, images are the biggest
resource and the easiest win
• Be sure to use the right image type
• Be sure to use the right image size
• Use sprite maps instead individual images
12. Image Types
• JPG - is for photos
• Can usually get good quality down to
75%
• PNG - is for images
• Be sure to pngcrush or other
compression utility
13. Not Using
Compression?
• In one case we scaled a 640x480 image
down to 147x110
• This is 18 times more data than it should
be
16. Users don't care if an app is desktop or
browser based, they want it to be buttery-
smooth. Buttery-smooth is the opposite of
janky. It is defined as 60 frames a second, or
16.6 ms per frame
17. Performance Tools
• The performance tools measure the
amount of time it takes to render
• It can also tell you frames per second
• And even potential issues
24. Show potential scroll
bottlenecks
• Scrolling is a place for your site to shine
• Turning this feature on shows:
• Events hook up to scroll
• Areas of the page which are repainted