Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Managing the Performance of Web Applications

999 views

Published on

People have been trying to make websites faster ever since the browser was invented, and in that time, the web performance industry has made a vast number of advancements, each addressing specific performance bottlenecks. Thus, as the web has evolved, so have the methods for measuring and improving its performance.

This presentation covers:
● A brief overview of the evolution of performance on the internet
● How to select and collect the proper metrics to define client-side performance
● Best practices for performance tuning modern web applications

Published in: Technology
  • Be the first to comment

Managing the Performance of Web Applications

  1. 1. DEFINING AND IMPROVING THE CLIENT SIDE CRAIG HYDE, CEO. RIGOR CMG I NOVEMBER 6. 2014
  2. 2. ,L‘1=JI FHIIIL'. I‘II. “5II"'v" l; rI? LLIIIIIL THE INTERNET A BRIEF HISTORY I I 3 3I I II : Wan 3:3-'l: J~ I CLINICS"
  3. 3. WEAK SERVER HARDWARE Ti? OVERLOADED SWITCHES/ NETWORKS 65%? POOR FIRST MIIJE CONNECTIVITY
  4. 4. THE MODERN INTERNET Fed5,. _. , ‘ __ mr m -. V1 Payrm t~- / I U iv’IcAfee Ipardot’ I Goggle N190‘ jstream 'ILIme| ig_T’1t‘_. "“ 3"’ RIGOI-'-
  5. 5. ED ° DEVICE VARIANCE f' . a, -_, ~ WIRELESS ACCESS AND NETWORK VARIETY ° 3”” PARTY CONTENT. SERVICES. AND PLUGINS f) - IMAGE/ MEDIA HEAVY DESIGN PATTERNS ": A rIr3xc>; R r I Web Perfennaneé
  6. 6. BECAUSE OF THOSE BOTTLENECKS *S'I I ‘I W ‘I :1. II PI "I '; ':. |I A ~. .I 'I‘fL. ; I I “III, lI}_'»I_"""r’. AND GETTING SLOWER. F %{~: I3:’. 'FE: S.? .EZ
  7. 7. I~I€? I~II: S‘* I. I__ff7A TF1/I: ELIPI . ~'; _:7"; T‘ SPRING 2012 6.85 Iiki _ ,4» FALL 2012 7.4s ' V ~. . II: " : - V‘ d& SPRING 2013 7.55 FALL 2013 8.65 , SPRING 2014 10.03 I I 47% SLOWDOWN IN JUST 2 YEARS Is» N I I 5‘
  8. 8. BO-90% OF LOAD TIME IS SPENT ON THE FRONTEND (UII "T"; :7‘ ». .y». I / (p {Janna 8+ I LJV(. ]‘I(Ill‘IF ‘. Goggle
  9. 9. AVERAGE WEBPAGE 3 :3.= ..B. £ Hit ‘. .—. ”: Z‘: ‘ V H; I. ‘ I . / j I ‘°“-[GI , I V‘ -' . 9. -- 1 I' T‘ l{Ql‘'A TOTALING I.49I KEG FROM 23 SOURCES
  10. 10. "P PROS -‘ONGOING MEASUREMENT -TRUE USER EXPERIENCE -START RENDER AND TIME TO -MULTIPLE DEVICE SUPPORT INTERACTION MEASUREMENTS -MULTIPLE CONNECTION TYPES HPROVIDES WATERFALL DIAGRAMS W ; M -REOUIRES LIVE TRAFFIC DIFFER FROM REAL USER TTMINGS -MEASUREMENTS IMPACT LOTS OF DATA . ‘ Wdbfiénfanwanee.
  11. 11. IVE COLLECTED THE DATA “ UPI‘ I‘III'. I I IT‘ ‘I .3‘ A
  12. 12. 2 but 00 Anlouu lentil-9. cud! Carib. llurwnon and Invnlhw Cllnvuhfllkolaminu in; v. 0 - Harm cu uvvmbavlnlnmwu mu 0» 14 I ll cu you up pm Lu . 'IlII L» Ll (I W (J1 . ... ... , . H . . alga-ma (uuonm , . : o«m- zouc cu Lu. toga»! mu 0- I l GI (Alndpng :90 on 5.1:: RENDER TTNIE cu Ilnp mon- cu sag. " mo nu TIME TO INTERAGTIDN I on nupvxvun-115994 cuhvwm-< some vi '-U at! haruwmo fill ~ FULL PAGE LOAD : :.“: ;": “;; ::: : GL1.»-hwbouuoss-n cu mgvmumu-n on non cmmngvz c 4 (.4! anuoLw. Vuslmnr1 cu mar: -_u_uanao c 200 on Q1 u. _hmo¢ . Iu_nvI¢ 200 or G1 um: -.| u-Isolamnuu -‘O0 0' GU g&kMI-Il-—002l 300 05 GU tnfld-ZR: -500)! J93 “S Q‘! ¢. H|7Id~2kI-MOM 390 '1’ Cl! clan-uuhe’(I-Qmll 390 0'
  13. 13. OPTIMIZING PERFORMANCE IS NOT ° ONE WEIRD TRICK THAT. ... . ° ONE SIZE FITS AU. TECHNOLOGY ° REMOVAL OF STYLE AND FUNCTIONALITY 3% RIEIQI3 Wnh rfnrm
  14. 14. OPTIMIZING PERFORMANCE I73 SIMPLE. ROUTINE ADJUSTMENTS THAT GET YOUR WEBSITE LOADING FASTER FOR YOUR VISITORS. AV». -2-»; EIIERQB
  15. 15. OPTIMIZING PERFORMANCE IIIv’IL LARGEST IIIPAGT. EASIEST TD IMPROVE. I. IIrT<: I:I WHAT GETS MEASURED. GETS IMPROVED $12. I‘ Ci IEIEOE Ml rfinr-nu
  16. 16. OPTIMIZING PERFORMANCE I. FEWER RESOURCES IS BETTER 2. SMALLER FILES 3. FASTER APPEARANCE AV». 72x1 E'£§, ..€? ,I3
  17. 17. n'; ‘e. u»‘s{S-il$‘¢‘p. n§" GET venom Eu wmuhao (om GET ¢fl? .'-AGSJGQCIO-26¢! !!’ . ‘ ‘ 1‘ “Tas? ~—l6S369l-an-260517 57 RV can: an | "vbvnA. p (‘£1191 -465359!-ul-260l. ru 1‘ (IT Is’! P465359.‘-Kt-ZSOLII-A . ‘ GU musn GE! Un. m:-$7an1,6£x6-Q 909 Q‘! Unvud-K4n9do'n_64n6£,9w . , (£1 Auszu I: 64-64.ov'§ (:1 sm. susung G3 CI. 'Ifil‘$‘l9.D'9 0313"’ ~‘6§l59M¢l- ZWUM . GT Mex»(o,64n64,n-we WT mm» aim! ‘ ~.9*9 Q1 «Hahn pope: 9'9 £81 «an; macnjrandshm . Cl‘! Mung-Knngfihfilang (£1 ‘x wu 64:6-Lac-9 IITSNDPCOM-Sll[D<U$ V1.51 L Gffyubhuo-i°un~1kap: I0d¢v: ‘ 0ETUS_Iw: omx, I«urv5-’¢r-cw . WT lo¢erR. a¢ksNocm'nu', _lo< : CE! vs: Mq laaono-my ADD! . (£1 Moc~m-Dav-C§: -$an- --~. I I (L .4414‘ : -, _ . p4au. I. n.“. nu, vIO0i. u Nil 336“ A270 H51! 75! 1290 90%] 41%| Ell XII JJKI 5.5K! IJKI 210 79K! 220 {ill HSKI Hill 25!! III 42.50 N73 434“ 26.! “ UK! 41.11! l! C°= s 269wu . "5rr« E)rr . ‘An'x 2-)rv'. -‘G37: 19!? ) 25w; 1 ‘Mn: SSN Sims SSW‘; SSH 560m 55m: 333'": ‘ 145M1 ll}: -vwc I U54“ [LS1-3 356:7: Iélw. ZZCH 125?; 331'“; luau -uTFe'nTEn av‘-u’
  18. 18. '1 CDNSOLIDATE CSS AND JAVASCRIPT FILES ° LEVERAGE BROWSER CACHING - COMBINE STYLE IMAGES INTO css SPRITES USE A CDN " _ '. / ' 3 g 3 RIGR. .r I/ I/A‘I. -A ‘Pia nfrannhmrzni
  19. 19. #2. REDUCE FILE SIZES I . , Y . E
  20. 20. ' OPTIMIZE/ COMPRESS IMAGES AND OTHER MEDIA FILES
  21. 21. #3. OPTIMIZE FOR RENDER TIME
  22. 22. °' SHOW PAGE TO CUSTOMER ASAP ° LOAD 3”” PARTY CONTENT AFTER PAGE RENDERS ° LAZY LOAD BELOW THE FOLD OR HIDDEN CONTENT
  23. 23. SUMMARY S INTERNET HAS EVOLVED AND SO HAVE BOTTLENECKS S WEBSITES AND WEB APPS ARE [IL. .SZI*w‘: E’! S: S LATENCY IS ON THE FRONTEND S USE TOOLS TO MEASURE AND GATHER DATA. THEN I. REDUCE RESOURCE COUNT 2. REDUCE FILE SIZES 3. OPTIMIZE FOR RENDER TIME §"— RIGO / M Mlnh Darfi-uvnanna
  24. 24. THANK YOU. .. II7TlI‘I! SS BIGOBCOM @]EAMBIGOB A‘! '71 ; $ @253 I/ I/nh P / ‘

×