Developer Tools And Page Speed

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

© 2010 GTUG Gaza All Rights Reserved

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

Dev. Mohammed S Shurrabwww.orient.ps0599300163

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

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 XHR, Events, and Workers

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)

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, Application.

Developer Tools, Console

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

Developer Tools, Console

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

Page Speed

Page Speed, the surf story

Server• Processing time

Transition• Bandwidth• Round-trip time

• Parse• Resource fetches• Layout and Render• JavaScript

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

Closure Library

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

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