Building faster websites Front-end performance

Building faster websites Front-end performance
AIESEC IT School 2012 Building faster websites Front-end performance Mihai Oaida<mihai.oaida@gmail.com> 1
About me  Mihai Oaida  Senior Web developer @imobiliare.ro  Student M.S.E. Politehnica Timișoara  http://www.slideshare.net/mihai.oaida Mihai Oaida<mihai.oaida@gmail.com> 2
Agenda  Web application architecture  Web application performance  Frontend performance  The 14 rules  Other tips  Tools  Conclusions Mihai Oaida<mihai.oaida@gmail.com> 3
Web application architecture Mihai Oaida<mihai.oaida@gmail.com> 4
Web application architecture http://www.webpagetest.org/ Mihai Oaida<mihai.oaida@gmail.com> 5
Web application performance  How do you measure it ?  How users react to it?  Why is it important? Mihai Oaida<mihai.oaida@gmail.com> 6
JavaScript  Douglas Crockford on browsers: ”The most hostile software developement enviroment imaginable”  Wrote "JavaScript the Good Parts" Mihai Oaida<mihai.oaida@gmail.com> 7
Frontend performance  Time spent on the client side  The client side model  80-90% of the total time  Factors  Host machine  Network bandwidth  Network latency  Number of web resources Mihai Oaida<mihai.oaida@gmail.com> 8
The 14 rules  Rule 1: Make fewer HTTP requests  Use sprites for images  Merge css files  Merge js files  Use multiple subdomains  img1.tehnologii-web.ro  img2.tehnologii-web.ro Mihai Oaida<mihai.oaida@gmail.com> 9
The 14 rules  Rule 2: Use a CDN ( Content delivery network ) or  Use dedicated server(s) just for static  Use asynchronous web servers: Lighthttpd, nginx  Use cookie free domains  TCP slow start  Rule 3: Add an Expires Header  Rule 4: Gzip Components Mihai Oaida<mihai.oaida@gmail.com> 10
The 14 rules  Rule 5: Put Stylesheets at the Top  Rule 6: Put Scripts at the Bottom  Blocking scripts: document.write  <script src="script.js">/script> Mihai Oaida<mihai.oaida@gmail.com> 11
The 14 rules  Rule 7: Avoid CSS Expressions  Rule 8: Make JavaScript and CSS External  Rule 9: Reduce DNS Lookups  Rule 10: Minify JavaScript Mihai Oaida<mihai.oaida@gmail.com> 12
The 14 rules  Rule 11: Avoid Redirects  Rule 12: Remove Duplicate Scripts  Rule 13: Configure Etags  Rule 14: Make Ajax Cacheable Mihai Oaida<mihai.oaida@gmail.com> 13
Lazy loading  scripts,Images,ads  70-80% downloaded code is not executed immediately for payloads of 100-300K  No blocking javascript  Example: google image search Mihai Oaida<mihai.oaida@gmail.com> 14
Lazy execution  Execute js code faster than with eval() function sayHi(){ scriptContent = 'alert("hi")'; scriptElem = document.createElement('script'); head = document.getElementByTagName('head')[0] head.appendChild(scriptElem); scriptElem.text = scriptContent } Mihai Oaida<mihai.oaida@gmail.com> 15
Lazy loading  Dynamic load script after page load function loadScript(){ scriptElem = document.createElement('script'); scriptElem.src = "http://domain.com/script.js"; head = document.getElementByTagName('head')[0] head.appendChild(scriptElem); } Mihai Oaida<mihai.oaida@gmail.com> 16
Profiling  document end  download rate  parsing time  inline javascript execution  document load  on load event - all resources loaded Mihai Oaida<mihai.oaida@gmail.com> 17
Profiling - After <head> <script type="text/javascript"> documentStart = new Date().getTime(); </script> Mihai Oaida<mihai.oaida@gmail.com> 18
Profiling - Before </body> <script type="text/javascript"> documentEnd = new Date().getTime()-documentStart; jQuery(window).load(function(){ callbackUrl ='http://www.foo.ro/timing'; documentLoad = new Date().getTime()-documentStart; profileTokens = { 'document_end':documentEnd, 'document_load':documentLoad, 'page' : window.location.href.split('.ro')[1] }; Mihai Oaida<mihai.oaida@gmail.com> 19
Profiling - Before </body> i=0; for(k in profileTokens) { delim = (i==0?'?':'&'); callbackUrl+= delim+k+'='+profileTokens[k]; i++; }; img = document.createElement('img'); img.src = callbackUrl; document.body.appendChild(img); }); </script> Mihai Oaida<mihai.oaida@gmail.com> 20
Tools  Tools  HttpWatch  Wireshark  Firebug  Yslow  Web developement Tools  http://www.webpagetest.org/  http://smush.it/  Resources:  http://stevesouders.com/hpws/ Mihai Oaida<mihai.oaida@gmail.com> 21
Conclusions  Each rule has a different impact  Rules are not all mandatory  Measure first  Measure after Mihai Oaida<mihai.oaida@gmail.com> 22
Thank you! Mihai Oaida<mihai.oaida@gmail.com> 23

Check these out next

Building faster websites Front-end performance

Recomendados

Mais conteúdo relacionado

Apresentações para você(20)

Destaque(7)

Similar a Building faster websites Front-end performance(20)

Mais de Mihai Oaida(6)

Último(20)

Building faster websites Front-end performance