Download - Chrome Dev Tools
Chrome Dev ToolsHow to Improve Your Site’s Performance
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
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
Our Agenda
• The three pillars of page performance
• The Chrome Dev Tools
• Network tools
• Performance tools
• Rendering tools
The Three Pillars of Page Performance
• Network - Connection Speed + Latency
• Compute - JavaScript
• Render - Layout + Paint
Grade Your Site
• Google’s PageSpeed Insights
• https://developers.google.com/speed/pagespeed/insights
• Yahoo’s YSlow
• https://developer.yahoo.com/yslow/
PageSpeed Insights Demo
Chrome Dev Tools• Elements
• Network
• Sources
• Timeline
• Profiles
• Resources
• Audits
• Console
Chrome Dev Tools
• Elements
• Network
• Sources
• Timeline
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
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
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
Not Using Compression?
• In one case we scaled a 640x480 image down to 147x110
• This is 18 times more data than it should be
Yahoo! Smush It Demo
Performance Tools
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
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
Performance Tool Demo #1
Rendering Options
• Show paint rectangles
• Show composite layer borders
• Show FPS meter
• Enable continuous page repainting
• Show potential scroll bottlenecks
Show Paint Rectangles
• Shows the area of the screen being repainted
• Watch rectangles, the paint will union small rectangles together
Show composite layer borders
• Layering is a bit complicated
• Layering requires CSS3
• It uses CSS Transform
• Not 100% kosher
Show FPS meter
• Running clock of the FPS
• And your min and max frame rate
• Graph of your sites performance
Enable continuous page repainting
• Repaints continuously to show problems
• Best when used with Show Paint Rects.
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
Performance Demo #2
Resources
• Chrome Dev Toolshttps://developers.google.com/chrome-developer-tools/
• Yahoo! Smush Ithttp://www.smushit.com/ysmush.it/
• PageSpeed Insightshttp://developers.google.com/speed/pagespeed/insights/
• PNGCRUSH http://pmt.sourceforge.net/pngcrush/
• Making Layershttp://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/
• How Browsers Work http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/