This document provides an overview of developer tools, page speed optimization, and the Closure Library. It discusses how developer tools can help inspect pages, track resources and scripts, and profile performance. It outlines Google's page speed rules around caching, reducing round trips, minimizing overhead and payload size, and optimizing rendering. Finally, it introduces the Closure Library and how it provides modular and tested JavaScript as well as templates and linting to generate HTML and check code quality.

2. © 2010 GTUG Gaza All Rights Reserved

3. Agenda
• Introduction
• Developer Tools
• Page Speed
• Closure Library
• Discussion
Dev. Mohammed S Shurrab
www.orient.ps
0599300163

4. Introduction
Web Money
Faster
More
Stable
Developer
Tools
Page
Speed
Closure
Library
Happy
Users
Tools
Google: 400 ms latency increase a 0.6% search decrease
Yahoo!: 400 ms latency increase a 5-9% traffic decrease
Shopzilla: 5 sec latency decrease a 12% revenue increase

5. Developer Tools

6. Developer Tools, Elements
Elements Panel
• Inspect HTML elements
• Show and modify HTML elements & CSS style

7. Developer Tools, Resources
Resources Panel
• Tracking All of your Resources
• Classify them and Sort them by (Size/Time)

8. Developer Tools, Script
Script Panel
• Tracking your Script
• Allow you to debug your Script using break points
• Handel XHR, Events, and Workers

9. Developer Tools, Timeline
Timeline Panel
• Give you more information about resource loading
• Even about loading time or memory allocations
• Work even after the page loading (loading, Scripting, Rendering)

10. Developer Tools, Profile
Profile Panel
• Recording the internal process in the CPU
• Allow you to get a head snapshots

11. Developer Tools, Storage
Storage Panel
• Allow you to easily manage any storage data
• DB, Local, Session, Cookies, Application.

12. Developer Tools, Console
Console Panel
• Show you the Errors, Warnings, and Logs.
• Allow you to run any JavaScript code on the page.

13. Developer Tools, Console
Console Panel
• Show you the Errors, Warnings, and Logs.
• Allow you to run any JavaScript code on the page.

14. Page Speed

15. Page Speed, the surf story
Server
• Processing time
Transition
• Bandwidth
• Round-trip time
• Parse
• Resource fetches
• Layout and Render
• JavaScript

16. Page Speed, What does it do ?
• Predefine rules from Google and Community
• A speed score (??/100)
– High priority
– Medium priority
– Working fine or low priority
– Informational messages only
• every problem has a corresponding solution.
• Have a SDK written in C++

17. Page Speed, the FAST surf story
• Google Five Golden Rules
– Optimizing caching
• keeping your application's data and logic off the network
altogether
– Minimizing round-trip times
• reducing the number of serial request-response cycles
– Minimizing request overhead
• reducing upload size
– Minimizing payload size
• reducing the size of responses, downloads, and cached pages
– Optimizing browser rendering
• improving the browser's layout of a page

18. Closure Library

19. Closure, it’s all about JS
Compiler
• Smaller
• Efficient
• Checked
Library
• Well-tested
• Modular
• Cross-browser
Templates
• Dynamically
generating
HTML
Linter
• Checking
• Fixing
• Saves time