Chrome Dev Tools
How to ImproveYour Site’s Performance
Android Wear Talk
• Smart watches are hot!	

• Google is getting into the game	

• Get ahead of the curve	

• Free talk Ap...
Beginning Android
Class
• Saturday, May 10th & 17th	

• From installing the SDKs…	

• to deploy to the Play Store	

• Lear...
Our Agenda	

• The three pillars of page performance	

• The Chrome Dev Tools	

• Network tools	

• Performance tools	

• ...
The Three Pillars of Page
Performance
• Network - Connection Speed + Latency	

• Compute - JavaScript	

• Render - Layout ...
GradeYour Site
• Google’s PageSpeed Insights	

• https://developers.google.com/speed/
pagespeed/insights	

• Yahoo’sYSlow	...
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	

• DOMContentLoade...
Images
• For most sites, images are the biggest
resource and the easiest win	

• Be sure to use the right image type	

• B...
Image Types
• JPG - is for photos	

• Can usually get good quality down to
75%	

• PNG - is for images	

• Be sure to pngc...
Not Using
Compression?
• In one case we scaled a 640x480 image
down to 147x110	

• This is 18 times more data than it shou...
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...
Performance Tools
• The performance tools measure the
amount of time it takes to render	

• It can also tell you frames pe...
Performance Tool
Demo #1
Rendering Options
• Show paint rectangles	

• Show composite layer borders	

• Show FPS meter	

• Enable continuous page r...
Show Paint Rectangles
• Shows the area of the screen being
repainted	

• Watch rectangles, the paint will union small
rect...
Show composite layer
borders
• Layering is a bit complicated	

• Layering requires CSS3	

• It uses CSS Transform	

• Not ...
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:	

• Eve...
Performance Demo #2
Resources
• Chrome Dev Tools

https://developers.google.com/chrome-
developer-tools/	

• Yahoo! Smush It

http://www.smushit.com/ysm...
• PNGCRUSH

http://pmt.sourceforge.net/pngcrush/	

• Making Layers

http://aerotwist.com/blog/on-translate3d-
and-layer-cr...
Upcoming SlideShare
Loading in...5
×

Chrome Dev Tools

1,417

Published on

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.

Published in: Software, Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,417
On Slideshare
0
From Embeds
0
Number of Embeds
47
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Chrome Dev Tools

  1. 1. Chrome Dev Tools How to ImproveYour Site’s Performance
  2. 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. 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. 4. Our Agenda • The three pillars of page performance • The Chrome Dev Tools • Network tools • Performance tools • Rendering tools
  5. 5. The Three Pillars of Page Performance • Network - Connection Speed + Latency • Compute - JavaScript • Render - Layout + Paint
  6. 6. GradeYour Site • Google’s PageSpeed Insights • https://developers.google.com/speed/ pagespeed/insights • Yahoo’sYSlow • https://developer.yahoo.com/yslow/
  7. 7. PageSpeed Insights Demo
  8. 8. Chrome Dev Tools • Elements • Network • Sources • Timeline • Profiles • Resources • Audits • Console
  9. 9. Chrome Dev Tools • Elements • Network • Sources • Timeline
  10. 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. 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. 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. 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
  14. 14. Yahoo! Smush It Demo
  15. 15. Performance Tools
  16. 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. 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
  18. 18. Performance Tool Demo #1
  19. 19. Rendering Options • Show paint rectangles • Show composite layer borders • Show FPS meter • Enable continuous page repainting • Show potential scroll bottlenecks
  20. 20. Show Paint Rectangles • Shows the area of the screen being repainted • Watch rectangles, the paint will union small rectangles together
  21. 21. Show composite layer borders • Layering is a bit complicated • Layering requires CSS3 • It uses CSS Transform • Not 100% kosher
  22. 22. Show FPS meter • Running clock of the FPS • And your min and max frame rate • Graph of your sites performance
  23. 23. Enable continuous page repainting • Repaints continuously to show problems • Best when used with Show Paint Rects.
  24. 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
  25. 25. Performance Demo #2
  26. 26. Resources
  27. 27. • Chrome Dev Tools
 https://developers.google.com/chrome- developer-tools/ • Yahoo! Smush It
 http://www.smushit.com/ysmush.it/ • PageSpeed Insights
 http://developers.google.com/speed/ pagespeed/insights/
  28. 28. • PNGCRUSH
 http://pmt.sourceforge.net/pngcrush/ • Making Layers
 http://aerotwist.com/blog/on-translate3d- and-layer-creation-hacks/ • How Browsers Work
 http://www.html5rocks.com/en/tutorials/ internals/howbrowserswork/

  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×