Overview:

KIG-30th

How to measure
your web app
Chang W. Doh,
DaVinci S/W Lab
In this talking, we'll discuss
"Measuring"
and some "Optimization"
Why we should do that?
There are many Optimization
Checklists on the web.
You already know or Just check them.
But, "You can’t optimize what
you can’t measure."
Rendering Performance 
60 FPS 

= 1000ms / 60 frames
= 16.666ms per frame
Simplify: 60FPS means
"We have only 16.7ms for each
frame."
Check: "Rendering time >
16ms"
e.g. Chrome DevTools
Timeline
cog > rendering
What makes '> 16ms'
Repaint Issues
Heavy CSS3 Effects
Animation or Transition using heavy property
Manipulating DOM dynami...
Example
vrsyeah =dcmn.oysye
a tlCce
ouetbd.tl;
syeah.adn ="0x;/ cueo lyu,rpit
tlCcepdig
2p" / as f aot ean
syeah.odr="0xsl...
Further Readings
1.
2.
3.
4.
5.
6.
7.
8.
9.

How Browsers Works
Accelerated Rendering in Chrome: The Layer Model
CSS Paint...
Loading Performance 
Fast-loading means
"Make everything less and
smaller"
Minimize HTTP/HTTPS Requests
Minify Assets: HTML, CSS, Script, Image, ...
Make HTML wit...
"and avoid blocking..."
Put CSS at the Top
Script at the Bottom
...
Check: Page Loading Overhead
PageSpeed Insight
http://goo.gl/cr6YzA

Web: http://developers.google.com/speed/pagespeed/insights/
Extension: https://developers.google.com...
 
YSlow
http://yslow.org
Optimization Tools
CSS Minifier
CleanCSS
CSSMin
YUI
CSSTidy
Slimmer
CSS Compressor
JavaScript Minifier
UglifyJS
JSMin
YUI
rJSMin
Dojo ShrinkSafe
Ajax Minifier
Closure
Image Optimizer
SmushIt.com
PunyPNG.com
PNGGauntlet for Windows
Image Optim for Mac
Generate multi-resolution images for s...
Further Readings
1.
2.
3.
4.
5.

Google Developer: Page Speed Tools
YSlow.org (en)
Text Compression for Web Developers
Ima...
Script Performance
Chrome DevTools: Profiler
Catch Peaks:
Bottleneck Functions?
Up to you!
Memory Usage

A way to Garbage Collection :)

GC friendly code
When you're using Canvas,
Canvas Profile will rescue you.
Further Readings
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

Profiling JavaScript Performance (en)
ECMA-262-3 in detail [huns.me]
...
Sometimes we need to
measure programatically.
Scripting Profiler & Timeline
Starting Profiling & Timeline Recording
fnto satrfln( {
ucin trPoiig)
cnoetmln(;
osl.ieie)
c...
Navigation Timing APIs
High Resolution Time
!msec

1/1000ms!!!
DOMHighResTimeStamp
PerformanceTiming

Representing the moment, in miliseconds !
window.performance.now()
High Resolution Timestamp from 'NavigationStart'

(ucin){
fnto(

<pnsye"otfml:mnsae fn-ie 1.23275...
User Timing
performance.mark()
Setting marks

wno.efrac.ak'jxlae';
idwpromnemr(aa_odd)
performance.measure()
Calculating measurements between marks

wno.efrac.esr(
idwpromnemaue
'jxLaig,
Aa_odn'
'jxtr'
aaSat,
...
removing Marks &
Measurements
Clearing marks & measurements

wno.eomnecerak('aefak)
idwpfrac.laMrs nmOMr';
wno.efrac.laMau...
Retrieving Marks &
Measurements
Getting entries

/ gt'ak etis
/ e mr' nre
wno.efrac.eEtisyye'ak)
idwpromnegtnreBTp(mr';
/ ...
Sample Code
XMLHttpRequest
Basic code:

vrmRq=nwXLtpeus(;
a ye
e MHtRqet)
<r
b>
mRqoe(GT,ul tu)
ye.pn'E' r, re;
<pnsye"otfml:mnsae"mRq...
Adding User-timing
vrrqon =0
a eCut
;

vrmRq=nwXLtpeus(;
a ye
e MHtRqet)
mRqoe(GT,ul tu)
ye.pn'E' r, re;
mRqola =fnto(){
y...
Dump
vries=wno.efrac.eEtisyye'esr';
a tm
idwpromnegtnreBTp(maue)
fr(a i=0 i<ieslnt(;+i {
o vr
;
tm.egh) +)
vrrq=iesi;
a e
...
Further Readings
1. W3C Spec.: Navigation Timing (en)
2. W3C Spec.: User Timing (en)
3. User Timing API: Understanding you...
Q&A
Thank you!
Upcoming SlideShare
Loading in …5
×

Overview: How to Measure your WebApp

752 views
604 views

Published on

This slides's talking about basics of "measuring webapp" for optimization.
- Rendering, Page Loading, Script Performance and Scripting Timeline/Profiling with Chrome DevTools.
- Scripting for measuring performance using 'Navigation Timing' & 'User Timing'.

Published in: Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
752
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
18
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Overview: How to Measure your WebApp

  1. 1. Overview: KIG-30th How to measure your web app Chang W. Doh, DaVinci S/W Lab
  2. 2. In this talking, we'll discuss "Measuring" and some "Optimization"
  3. 3. Why we should do that?
  4. 4. There are many Optimization Checklists on the web. You already know or Just check them.
  5. 5. But, "You can’t optimize what you can’t measure."
  6. 6. Rendering Performance 
  7. 7. 60 FPS  = 1000ms / 60 frames = 16.666ms per frame
  8. 8. Simplify: 60FPS means "We have only 16.7ms for each frame."
  9. 9. Check: "Rendering time > 16ms"
  10. 10. e.g. Chrome DevTools Timeline cog > rendering
  11. 11. What makes '> 16ms' Repaint Issues Heavy CSS3 Effects Animation or Transition using heavy property Manipulating DOM dynamically Insertion / Deletion or Too much hack! translateZ(0); ...
  12. 12. Example vrsyeah =dcmn.oysye a tlCce ouetbd.tl; syeah.adn ="0x;/ cueo lyu,rpit tlCcepdig 2p" / as f aot ean syeah.odr="0xsldrd;/ cueo lyu,rpit tlCcebre 1p oi e" / as f aot ean syeah.oo ="le;/ cueo rpit tlCceclr bu" / as f ean syeah.akrudoo ="fd;/ cueo rpit tlCcebcgonClr #a" / as f ean syeah.otie="e" / cueo lyu,rpit tlCcefnSz 2m; / as f aot ean / nwDMeeet-cueo lyu,rpit / e O lmn as f aot ean dcmn.oyapnCiddcmn.raeetoe'eIG!); ouetbd.pedhl(ouetcetTxNd(Ltto') Finally, <body> triggers layout & repaint.
  13. 13. Further Readings 1. 2. 3. 4. 5. 6. 7. 8. 9. How Browsers Works Accelerated Rendering in Chrome: The Layer Model CSS Paint Time and Page Render Weight Avoiding Unnecessary Paints Avoiding Unnecessary Paints: Animated GIF Edition High Performance Animation Antialiasing 101 HTML5 Techniques for Optimizing Mobile Performance (en) Performance profiling with the Timeline (en)
  14. 14. Loading Performance 
  15. 15. Fast-loading means
  16. 16. "Make everything less and smaller" Minimize HTTP/HTTPS Requests Minify Assets: HTML, CSS, Script, Image, ... Make HTML within ~14KB Reducing Cookie size Make AJAX Cacheable and Using GET Gzipped ...
  17. 17. "and avoid blocking..." Put CSS at the Top Script at the Bottom ...
  18. 18. Check: Page Loading Overhead
  19. 19. PageSpeed Insight
  20. 20. http://goo.gl/cr6YzA Web: http://developers.google.com/speed/pagespeed/insights/ Extension: https://developers.google.com/speed/pagespeed/insights_extensions
  21. 21.   YSlow
  22. 22. http://yslow.org
  23. 23. Optimization Tools
  24. 24. CSS Minifier CleanCSS CSSMin YUI CSSTidy Slimmer CSS Compressor
  25. 25. JavaScript Minifier UglifyJS JSMin YUI rJSMin Dojo ShrinkSafe Ajax Minifier Closure
  26. 26. Image Optimizer SmushIt.com PunyPNG.com PNGGauntlet for Windows Image Optim for Mac Generate multi-resolution images for srcset with Grunt
  27. 27. Further Readings 1. 2. 3. 4. 5. Google Developer: Page Speed Tools YSlow.org (en) Text Compression for Web Developers Image Compression for Web Developers Deep dive into the murky waters of script loading (en)
  28. 28. Script Performance
  29. 29. Chrome DevTools: Profiler
  30. 30. Catch Peaks: Bottleneck Functions? Up to you! Memory Usage A way to Garbage Collection :) GC friendly code
  31. 31. When you're using Canvas, Canvas Profile will rescue you.
  32. 32. Further Readings 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. Profiling JavaScript Performance (en) ECMA-262-3 in detail [huns.me] Static Memory Javascript with Object Pools Performance Tips for JavaScript in V8 Writing Fast, Memory-Efficient JavaScript (en) Faster JavaScript Memoization For Improved App. Perf. (en) 10 Javascript Performance Boosting Tips (OLD!, en) Make the Web Faster Articles (en) Optimizing JavaScript code Canvas Inspection using Chrome DevTools JavaScript Memory Profiling (en)
  33. 33. Sometimes we need to measure programatically.
  34. 34. Scripting Profiler & Timeline Starting Profiling & Timeline Recording fnto satrfln( { ucin trPoiig) cnoetmln(; osl.ieie) cnoepoie) osl.rfl(; } Finishing fnto fnsPoiig){ ucin iihrfln( cnoetmlnEd) osl.ieien(; cnoepoien(; osl.rflEd) }
  35. 35. Navigation Timing APIs
  36. 36. High Resolution Time
  37. 37. !msec 1/1000ms!!!
  38. 38. DOMHighResTimeStamp
  39. 39. PerformanceTiming Representing the moment, in miliseconds !
  40. 40. window.performance.now() High Resolution Timestamp from 'NavigationStart' (ucin){ fnto( <pnsye"otfml:mnsae fn-ie 1.2327548x fn-tl:nra; sa tl=fn-aiy oopc; otsz: 64064231p; otsye oml <pnsye"otfml:mnsae fn-ie 1.2327548x fn-tl:nra; sa tl=fn-aiy oopc; otsz: 64064231p; otsye oml cnoelg "oesat a "+sat) osl.o( Cd trs t tr ; <pnsye"otfml:mnsae fn-ie 1.2327548x fn-tl:nra; sa tl=fn-aiy oopc; otsz: 64064231p; otsye oml <pnsye"otfml:mnsae fn-ie 1.2327548x fn-tl:nra; sa tl=fn-aiy oopc; otsz: 64064231p; otsye oml <pnsye"otfml:mnsae fn-ie 1.2327548x fn-tl:nra; sa tl=fn-aiy oopc; otsz: 64064231p; otsye oml <pnsye"otfml:mnsae fn-ie 1.2327548x fn-tl:nra; sa tl=fn-aiy oopc; otsz: 64064231p; otsye oml <pnsye"otfml:mnsae fn-ie 1.2327548x fn-tl:nra; sa tl=fn-aiy oopc; otsz: 64064231p; otsye oml }(; ))
  41. 41. User Timing
  42. 42. performance.mark() Setting marks wno.efrac.ak'jxlae'; idwpromnemr(aa_odd)
  43. 43. performance.measure() Calculating measurements between marks wno.efrac.esr( idwpromnemaue 'jxLaig, Aa_odn' 'jxtr' aaSat, 'jxn' aaEd ) ;
  44. 44. removing Marks & Measurements Clearing marks & measurements wno.eomnecerak('aefak) idwpfrac.laMrs nmOMr'; wno.efrac.laMaue(nmOMaueet) idwpromneceresrs'aefesrmn'; <pnsye"otfml:mnsae fn-ie 1p;fn-tl:nra;fn-ain:n sa tl=fn-aiy oopc; otsz: 7x otsye oml otvrat wno.efrac.laMaue(; / ceral/pn<r idwpromneceresrs) / la l<sa>b>
  45. 45. Retrieving Marks & Measurements Getting entries / gt'ak etis / e mr' nre wno.efrac.eEtisyye'ak) idwpromnegtnreBTp(mr'; / gt'esr'etis / e maue nre wno.efrac.eEtisyye'esr'; idwpromnegtnreBTp(maue) / gtetisb nm / e nre y ae wno.efrac.eEtisyae'ae) idwpromnegtnreBNm(nm';
  46. 46. Sample Code
  47. 47. XMLHttpRequest Basic code: vrmRq=nwXLtpeus(; a ye e MHtRqet) <r b> mRqoe(GT,ul tu) ye.pn'E' r, re; <pnsye"otfml:mnsae"mRqola =fnto(){/pn sa tl=fn-aiy oopc;>ye.nod ucine <sa> d_oehn(.epneet; osmtigersosTx) } <pnsye"otfml:mnsae"mRqsn(;/pn sa tl=fn-aiy oopc;>ye.ed)<sa>
  48. 48. Adding User-timing vrrqon =0 a eCut ; vrmRq=nwXLtpeus(; a ye e MHtRqet) mRqoe(GT,ul tu) ye.pn'E' r, re; mRqola =fnto(){ ye.nod ucine wno.efrac.ak'akedxr) idwpromnemr(mr_n_h'; rqn+; eCt+ wno.efrac.esr(mauexr'+rqn,'aksatxr,'akedxr) idwpromnemaue'esr_h_ eCt mr_tr_h' mr_n_h'; d_oehn(.epneet; osmtigersosTx) } wno.efrac.ak'aksatxr) idwpromnemr(mr_tr_h'; mRqsn(; ye.ed)
  49. 49. Dump vries=wno.efrac.eEtisyye'esr'; a tm idwpromnegtnreBTp(maue) fr(a i=0 i<ieslnt(;+i { o vr ; tm.egh) +) vrrq=iesi; a e tm[] cnoelg'H '+rqnm +'to '+rqdrto +'s) osl.o(XR e.ae ok e.uain m'; }
  50. 50. Further Readings 1. W3C Spec.: Navigation Timing (en) 2. W3C Spec.: User Timing (en) 3. User Timing API: Understanding your Web App
  51. 51. Q&A
  52. 52. Thank you!

×