20
Welcome اَ لْ هَ س وً ا

Developer Tools And Page Speed

Embed Size (px)

Citation preview

Page 1: Developer  Tools And  Page  Speed

Welcome هاَْل� س� و ً اهاَْل

Page 2: Developer  Tools And  Page  Speed

© 2010 GTUG Gaza All Rights Reserved

Page 3: Developer  Tools And  Page  Speed

Agenda• Introduction• Developer Tools• Page Speed• Closure Library• Discussion

Dev. Mohammed S Shurrabwww.orient.ps0599300163

Page 4: Developer  Tools And  Page  Speed

Introduction

Web Money

Faster More Stable

Developer Tools

Page Speed

Closure Library

Happy Users

Tools

Google: 400 ms latency increase a 0.6% search decreaseYahoo!: 400 ms latency increase a 5-9% traffic decreaseShopzilla: 5 sec latency decrease a 12% revenue increase

Page 5: Developer  Tools And  Page  Speed

Developer Tools

Page 6: Developer  Tools And  Page  Speed

Developer Tools, Elements

Elements Panel• Inspect HTML elements• Show and modify HTML elements & CSS style

Page 7: Developer  Tools And  Page  Speed

Developer Tools, Resources

Resources Panel• Tracking All of your Resources• Classify them and Sort them by (Size/Time)

Page 8: Developer  Tools And  Page  Speed

Developer Tools, Script

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

Page 9: Developer  Tools And  Page  Speed

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)

Page 10: Developer  Tools And  Page  Speed

Developer Tools, Profile

Profile Panel• Recording the internal process in the CPU• Allow you to get a head snapshots

Page 11: Developer  Tools And  Page  Speed

Developer Tools, Storage

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

Page 12: Developer  Tools And  Page  Speed

Developer Tools, Console

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

Page 13: Developer  Tools And  Page  Speed

Developer Tools, Console

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

Page 14: Developer  Tools And  Page  Speed

Page Speed

Page 15: Developer  Tools And  Page  Speed

Page Speed, the surf story

Server• Processing time

Transition• Bandwidth• Round-trip time

• Parse• Resource fetches• Layout and Render• JavaScript

Page 16: Developer  Tools And  Page  Speed

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++

Page 17: Developer  Tools And  Page  Speed

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

Page 18: Developer  Tools And  Page  Speed

Closure Library

Page 19: Developer  Tools And  Page  Speed

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

Page 20: Developer  Tools And  Page  Speed

Thanks for Comingج�زِياَْل ً ا ُشكْر�