SlideShare a Scribd company logo
1 of 11
Web performance 
Ran Wahle 
© Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com
Agenda 
Static analysis with pageSpeed 
The performance object 
Using developement tools 
Detecting memory leak
Load Analysis of a page 
Resources amount 
Resources footprint 
Caching 
Reduce load 
Defer loading
Page speed 
Demo
The performance object 
Navigation 
Timing 
Performance entries 
Memory 
Measurement with performance.now()
Working with performance object 
Demo
Using development tools 
Profiler 
Memory profiling
Let’s leak some memory 
Demo
So, What have we seen? 
Performance analysis tools 
Performance analysis using javascript API 
Using development tools for profiling 
Using timeline to find memory leaks
Questions
Thank you! 
ranw@sela.co.il 
http://blogs.Microsoft.co.il/ranw 
Twitter: @ranwahle 
© Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com

More Related Content

Viewers also liked

Realtime web experience with signal r
Realtime web experience with signal rRealtime web experience with signal r
Realtime web experience with signal rRan Wahle
 
Code migration from Angular 1.x to Angular 2.0
Code migration from Angular 1.x to Angular 2.0Code migration from Angular 1.x to Angular 2.0
Code migration from Angular 1.x to Angular 2.0Ran Wahle
 
Introduction to web compoents
Introduction to web compoentsIntroduction to web compoents
Introduction to web compoentsRan Wahle
 
Responsive ui
Responsive uiResponsive ui
Responsive uiRan Wahle
 
What's new in ECMAScript 6
What's new in ECMAScript 6What's new in ECMAScript 6
What's new in ECMAScript 6Ran Wahle
 
What’s new in angular 2 - From FrontEnd IL Meetup
What’s new in angular 2 - From FrontEnd IL MeetupWhat’s new in angular 2 - From FrontEnd IL Meetup
What’s new in angular 2 - From FrontEnd IL MeetupRan Wahle
 
Western Trust Smoke Free Service
Western Trust Smoke Free ServiceWestern Trust Smoke Free Service
Western Trust Smoke Free Servicewesterntrust
 
Realtime web experience with signalR
Realtime web experience with signalRRealtime web experience with signalR
Realtime web experience with signalRRan Wahle
 
angularJs Workshop
angularJs WorkshopangularJs Workshop
angularJs WorkshopRan Wahle
 
AngularJs Workshop SDP December 28th 2014
AngularJs Workshop SDP December 28th 2014AngularJs Workshop SDP December 28th 2014
AngularJs Workshop SDP December 28th 2014Ran Wahle
 
Realtime web open house
Realtime web open houseRealtime web open house
Realtime web open houseRan Wahle
 
Asyncawait in typescript
Asyncawait in typescriptAsyncawait in typescript
Asyncawait in typescriptRan Wahle
 
Async patterns in javascript
Async patterns in javascriptAsync patterns in javascript
Async patterns in javascriptRan Wahle
 
Occupational therapy helping children develop and thrive
Occupational therapy helping children develop and thriveOccupational therapy helping children develop and thrive
Occupational therapy helping children develop and thrivewesterntrust
 
Angular 2.0 change detection
Angular 2.0 change detectionAngular 2.0 change detection
Angular 2.0 change detectionRan Wahle
 
Angular%201%20to%20angular%202
Angular%201%20to%20angular%202Angular%201%20to%20angular%202
Angular%201%20to%20angular%202Ran Wahle
 
Scale your signalR realtime web application
Scale your signalR realtime web applicationScale your signalR realtime web application
Scale your signalR realtime web applicationRan Wahle
 
Western Trust Epilepsy Awareness Presentation 2013
Western Trust Epilepsy Awareness Presentation 2013Western Trust Epilepsy Awareness Presentation 2013
Western Trust Epilepsy Awareness Presentation 2013westerntrust
 
Angular js 2
Angular js 2Angular js 2
Angular js 2Ran Wahle
 

Viewers also liked (19)

Realtime web experience with signal r
Realtime web experience with signal rRealtime web experience with signal r
Realtime web experience with signal r
 
Code migration from Angular 1.x to Angular 2.0
Code migration from Angular 1.x to Angular 2.0Code migration from Angular 1.x to Angular 2.0
Code migration from Angular 1.x to Angular 2.0
 
Introduction to web compoents
Introduction to web compoentsIntroduction to web compoents
Introduction to web compoents
 
Responsive ui
Responsive uiResponsive ui
Responsive ui
 
What's new in ECMAScript 6
What's new in ECMAScript 6What's new in ECMAScript 6
What's new in ECMAScript 6
 
What’s new in angular 2 - From FrontEnd IL Meetup
What’s new in angular 2 - From FrontEnd IL MeetupWhat’s new in angular 2 - From FrontEnd IL Meetup
What’s new in angular 2 - From FrontEnd IL Meetup
 
Western Trust Smoke Free Service
Western Trust Smoke Free ServiceWestern Trust Smoke Free Service
Western Trust Smoke Free Service
 
Realtime web experience with signalR
Realtime web experience with signalRRealtime web experience with signalR
Realtime web experience with signalR
 
angularJs Workshop
angularJs WorkshopangularJs Workshop
angularJs Workshop
 
AngularJs Workshop SDP December 28th 2014
AngularJs Workshop SDP December 28th 2014AngularJs Workshop SDP December 28th 2014
AngularJs Workshop SDP December 28th 2014
 
Realtime web open house
Realtime web open houseRealtime web open house
Realtime web open house
 
Asyncawait in typescript
Asyncawait in typescriptAsyncawait in typescript
Asyncawait in typescript
 
Async patterns in javascript
Async patterns in javascriptAsync patterns in javascript
Async patterns in javascript
 
Occupational therapy helping children develop and thrive
Occupational therapy helping children develop and thriveOccupational therapy helping children develop and thrive
Occupational therapy helping children develop and thrive
 
Angular 2.0 change detection
Angular 2.0 change detectionAngular 2.0 change detection
Angular 2.0 change detection
 
Angular%201%20to%20angular%202
Angular%201%20to%20angular%202Angular%201%20to%20angular%202
Angular%201%20to%20angular%202
 
Scale your signalR realtime web application
Scale your signalR realtime web applicationScale your signalR realtime web application
Scale your signalR realtime web application
 
Western Trust Epilepsy Awareness Presentation 2013
Western Trust Epilepsy Awareness Presentation 2013Western Trust Epilepsy Awareness Presentation 2013
Western Trust Epilepsy Awareness Presentation 2013
 
Angular js 2
Angular js 2Angular js 2
Angular js 2
 

Similar to Web performance

Web Application Performance Audit and Optimization
Web Application Performance Audit and OptimizationWeb Application Performance Audit and Optimization
Web Application Performance Audit and OptimizationZyxware Technologies
 
Website redesign & seo Anand Saini
Website redesign & seo Anand SainiWebsite redesign & seo Anand Saini
Website redesign & seo Anand SainiDr,Saini Anand
 
A "lofiAPI": Using open source applications and simple XML to build a library...
A "lofiAPI": Using open source applications and simple XML to build a library...A "lofiAPI": Using open source applications and simple XML to build a library...
A "lofiAPI": Using open source applications and simple XML to build a library...jason clark
 
SEO and WordPress: The Basics and Beyond
SEO and WordPress: The Basics and BeyondSEO and WordPress: The Basics and Beyond
SEO and WordPress: The Basics and BeyondMarketing Refresh
 
Build Your Own Search Engine
Build Your Own Search EngineBuild Your Own Search Engine
Build Your Own Search Enginegoodfriday
 
Ajax Abuse Todcon2008
Ajax Abuse Todcon2008Ajax Abuse Todcon2008
Ajax Abuse Todcon2008Jesse Rodgers
 
Cost Effective Web Application Testing
Cost Effective Web Application TestingCost Effective Web Application Testing
Cost Effective Web Application TestingHari Pudipeddi
 
Cost effective web application testing
Cost effective web application testingCost effective web application testing
Cost effective web application testingHarinath Pudipeddi
 
Cost effective web application testing
Cost effective web application testingCost effective web application testing
Cost effective web application testingHarinath Pudipeddi
 
Sahi - Effective Web Testing
Sahi - Effective Web TestingSahi - Effective Web Testing
Sahi - Effective Web TestingTyto Software
 
Sahi presentation on BOJUG
Sahi presentation on BOJUGSahi presentation on BOJUG
Sahi presentation on BOJUGnarayanraman
 
Web Performance Optimization
Web Performance OptimizationWeb Performance Optimization
Web Performance OptimizationPatrick Meenan
 
Instagram Scraping Using Selenium.docx
Instagram Scraping Using Selenium.docxInstagram Scraping Using Selenium.docx
Instagram Scraping Using Selenium.docxRohitBatta4
 
Search Engine Optimization
Search Engine OptimizationSearch Engine Optimization
Search Engine OptimizationComputing Cage
 
Common Site Crawl issue with Javascript
Common Site Crawl issue with JavascriptCommon Site Crawl issue with Javascript
Common Site Crawl issue with JavascriptNetElixir University
 
Web Application Optimization Techniques
Web Application Optimization TechniquesWeb Application Optimization Techniques
Web Application Optimization Techniquestakinbo
 
TahaHassan_IT
TahaHassan_ITTahaHassan_IT
TahaHassan_ITUbit11
 
Frontend 'vs' Backend Getting the Right Mix
Frontend 'vs' Backend   Getting the Right MixFrontend 'vs' Backend   Getting the Right Mix
Frontend 'vs' Backend Getting the Right MixBob Paulin
 

Similar to Web performance (20)

Web Application Performance Audit and Optimization
Web Application Performance Audit and OptimizationWeb Application Performance Audit and Optimization
Web Application Performance Audit and Optimization
 
Website redesign & seo Anand Saini
Website redesign & seo Anand SainiWebsite redesign & seo Anand Saini
Website redesign & seo Anand Saini
 
A "lofiAPI": Using open source applications and simple XML to build a library...
A "lofiAPI": Using open source applications and simple XML to build a library...A "lofiAPI": Using open source applications and simple XML to build a library...
A "lofiAPI": Using open source applications and simple XML to build a library...
 
SEO and WordPress: The Basics and Beyond
SEO and WordPress: The Basics and BeyondSEO and WordPress: The Basics and Beyond
SEO and WordPress: The Basics and Beyond
 
Build Your Own Search Engine
Build Your Own Search EngineBuild Your Own Search Engine
Build Your Own Search Engine
 
Ajax Abuse Todcon2008
Ajax Abuse Todcon2008Ajax Abuse Todcon2008
Ajax Abuse Todcon2008
 
Cost Effective Web Application Testing
Cost Effective Web Application TestingCost Effective Web Application Testing
Cost Effective Web Application Testing
 
Cost effective web application testing
Cost effective web application testingCost effective web application testing
Cost effective web application testing
 
Cost effective web application testing
Cost effective web application testingCost effective web application testing
Cost effective web application testing
 
Sahi - Effective Web Testing
Sahi - Effective Web TestingSahi - Effective Web Testing
Sahi - Effective Web Testing
 
Sahi presentation on BOJUG
Sahi presentation on BOJUGSahi presentation on BOJUG
Sahi presentation on BOJUG
 
Web Performance Optimization
Web Performance OptimizationWeb Performance Optimization
Web Performance Optimization
 
Instagram Scraping Using Selenium.docx
Instagram Scraping Using Selenium.docxInstagram Scraping Using Selenium.docx
Instagram Scraping Using Selenium.docx
 
SEO
SEOSEO
SEO
 
Search Engine Optimization
Search Engine OptimizationSearch Engine Optimization
Search Engine Optimization
 
SEO
SEOSEO
SEO
 
Common Site Crawl issue with Javascript
Common Site Crawl issue with JavascriptCommon Site Crawl issue with Javascript
Common Site Crawl issue with Javascript
 
Web Application Optimization Techniques
Web Application Optimization TechniquesWeb Application Optimization Techniques
Web Application Optimization Techniques
 
TahaHassan_IT
TahaHassan_ITTahaHassan_IT
TahaHassan_IT
 
Frontend 'vs' Backend Getting the Right Mix
Frontend 'vs' Backend   Getting the Right MixFrontend 'vs' Backend   Getting the Right Mix
Frontend 'vs' Backend Getting the Right Mix
 

More from Ran Wahle

MicroFrontend With Iframes, dirty laundry that can be cleaned
MicroFrontend With Iframes, dirty laundry that can be cleanedMicroFrontend With Iframes, dirty laundry that can be cleaned
MicroFrontend With Iframes, dirty laundry that can be cleanedRan Wahle
 
Into React-DOM.pptx
Into React-DOM.pptxInto React-DOM.pptx
Into React-DOM.pptxRan Wahle
 
Lets go to the background
Lets go to the backgroundLets go to the background
Lets go to the backgroundRan Wahle
 
Permissions api
Permissions apiPermissions api
Permissions apiRan Wahle
 
Lets go vanilla
Lets go vanillaLets go vanilla
Lets go vanillaRan Wahle
 
Custom elements
Custom elements Custom elements
Custom elements Ran Wahle
 
Web workers
Web workers Web workers
Web workers Ran Wahle
 
Using legacy code with micro frontends
Using legacy code with micro frontendsUsing legacy code with micro frontends
Using legacy code with micro frontendsRan Wahle
 
Ngrx one-effect
Ngrx one-effectNgrx one-effect
Ngrx one-effectRan Wahle
 
Angular migration
Angular migrationAngular migration
Angular migrationRan Wahle
 
Javascript async / await Frontend-IL
Javascript async / await Frontend-ILJavascript async / await Frontend-IL
Javascript async / await Frontend-ILRan Wahle
 
Boost js state management
Boost js state managementBoost js state management
Boost js state managementRan Wahle
 
What’s new in angular 2
What’s new in angular 2What’s new in angular 2
What’s new in angular 2Ran Wahle
 

More from Ran Wahle (13)

MicroFrontend With Iframes, dirty laundry that can be cleaned
MicroFrontend With Iframes, dirty laundry that can be cleanedMicroFrontend With Iframes, dirty laundry that can be cleaned
MicroFrontend With Iframes, dirty laundry that can be cleaned
 
Into React-DOM.pptx
Into React-DOM.pptxInto React-DOM.pptx
Into React-DOM.pptx
 
Lets go to the background
Lets go to the backgroundLets go to the background
Lets go to the background
 
Permissions api
Permissions apiPermissions api
Permissions api
 
Lets go vanilla
Lets go vanillaLets go vanilla
Lets go vanilla
 
Custom elements
Custom elements Custom elements
Custom elements
 
Web workers
Web workers Web workers
Web workers
 
Using legacy code with micro frontends
Using legacy code with micro frontendsUsing legacy code with micro frontends
Using legacy code with micro frontends
 
Ngrx one-effect
Ngrx one-effectNgrx one-effect
Ngrx one-effect
 
Angular migration
Angular migrationAngular migration
Angular migration
 
Javascript async / await Frontend-IL
Javascript async / await Frontend-ILJavascript async / await Frontend-IL
Javascript async / await Frontend-IL
 
Boost js state management
Boost js state managementBoost js state management
Boost js state management
 
What’s new in angular 2
What’s new in angular 2What’s new in angular 2
What’s new in angular 2
 

Web performance