© 2010 GTUG Gaza All Rights Reserved
Agenda
• Introduction
• Developer Tools
• Page Speed
• Closure Library
• Discussion
Dev. Mohammed S Shurrab
www.orient.ps
...
Introduction
Web Money
Faster
More
Stable
Developer
Tools
Page
Speed
Closure
Library
Happy
Users
Tools
Google: 400 ms late...
Developer Tools
Developer Tools, Elements
Elements Panel
• Inspect HTML elements
• Show and modify HTML elements & CSS style
Developer Tools, Resources
Resources Panel
• Tracking All of your Resources
• Classify them and Sort them by (Size/Time)
Developer Tools, Script
Script Panel
• Tracking your Script
• Allow you to debug your Script using break points
• Handel X...
Developer Tools, Timeline
Timeline Panel
• Give you more information about resource loading
• Even about loading time or m...
Developer Tools, Profile
Profile Panel
• Recording the internal process in the CPU
• Allow you to get a head snapshots
Developer Tools, Storage
Storage Panel
• Allow you to easily manage any storage data
• DB, Local, Session, Cookies, Applic...
Developer Tools, Console
Console Panel
• Show you the Errors, Warnings, and Logs.
• Allow you to run any JavaScript code o...
Developer Tools, Console
Console Panel
• Show you the Errors, Warnings, and Logs.
• Allow you to run any JavaScript code o...
Page Speed
Page Speed, the surf story
Server
• Processing time
Transition
• Bandwidth
• Round-trip time
• Parse
• Resource fetches
• ...
Page Speed, What does it do ?
• Predefine rules from Google and Community
• A speed score (??/100)
– High priority
– Mediu...
Page Speed, the FAST surf story
• Google Five Golden Rules
– Optimizing caching
• keeping your application's data and logi...
Closure Library
Closure, it’s all about JS
Compiler
• Smaller
• Efficient
• Checked
Library
• Well-tested
• Modular
• Cross-browser
Templa...
Developer  Tools And  Page  Speed
Developer  Tools And  Page  Speed
Upcoming SlideShare
Loading in …5
×

Developer Tools And Page Speed

270 views
222 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
270
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Developer Tools And Page Speed

  1. 1. © 2010 GTUG Gaza All Rights Reserved
  2. 2. Agenda • Introduction • Developer Tools • Page Speed • Closure Library • Discussion Dev. Mohammed S Shurrab www.orient.ps 0599300163
  3. 3. 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
  4. 4. Developer Tools
  5. 5. Developer Tools, Elements Elements Panel • Inspect HTML elements • Show and modify HTML elements & CSS style
  6. 6. Developer Tools, Resources Resources Panel • Tracking All of your Resources • Classify them and Sort them by (Size/Time)
  7. 7. Developer Tools, Script Script Panel • Tracking your Script • Allow you to debug your Script using break points • Handel XHR, Events, and Workers
  8. 8. 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)
  9. 9. Developer Tools, Profile Profile Panel • Recording the internal process in the CPU • Allow you to get a head snapshots
  10. 10. Developer Tools, Storage Storage Panel • Allow you to easily manage any storage data • DB, Local, Session, Cookies, Application.
  11. 11. Developer Tools, Console Console Panel • Show you the Errors, Warnings, and Logs. • Allow you to run any JavaScript code on the page.
  12. 12. Developer Tools, Console Console Panel • Show you the Errors, Warnings, and Logs. • Allow you to run any JavaScript code on the page.
  13. 13. Page Speed
  14. 14. Page Speed, the surf story Server • Processing time Transition • Bandwidth • Round-trip time • Parse • Resource fetches • Layout and Render • JavaScript
  15. 15. 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++
  16. 16. 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
  17. 17. Closure Library
  18. 18. 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

×