Building faster websites Front-end performance

953 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
953
On SlideShare
0
From Embeds
0
Number of Embeds
30
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Building faster websites Front-end performance

  1. 1. AIESEC IT School 2012 Building faster websites Front-end performanceMihai Oaida<mihai.oaida@gmail.com> 1
  2. 2. About me  Mihai Oaida  Senior Web developer @imobiliare.ro  Student M.S.E. Politehnica Timișoara  http://www.slideshare.net/mihai.oaidaMihai Oaida<mihai.oaida@gmail.com> 2
  3. 3. Agenda  Web application architecture  Web application performance  Frontend performance  The 14 rules  Other tips  Tools  ConclusionsMihai Oaida<mihai.oaida@gmail.com> 3
  4. 4. Web application architectureMihai Oaida<mihai.oaida@gmail.com> 4
  5. 5. Web application architecture http://www.webpagetest.org/Mihai Oaida<mihai.oaida@gmail.com> 5
  6. 6. Web application performance  How do you measure it ?  How users react to it?  Why is it important?Mihai Oaida<mihai.oaida@gmail.com> 6
  7. 7. JavaScript  Douglas Crockford on browsers: ”The most hostile software developement enviroment imaginable”  Wrote "JavaScript the Good Parts"Mihai Oaida<mihai.oaida@gmail.com> 7
  8. 8. 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 resourcesMihai Oaida<mihai.oaida@gmail.com> 8
  9. 9. 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.roMihai Oaida<mihai.oaida@gmail.com> 9
  10. 10. 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 ComponentsMihai Oaida<mihai.oaida@gmail.com> 10
  11. 11. 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
  12. 12. The 14 rules  Rule 7: Avoid CSS Expressions  Rule 8: Make JavaScript and CSS External  Rule 9: Reduce DNS Lookups  Rule 10: Minify JavaScriptMihai Oaida<mihai.oaida@gmail.com> 12
  13. 13. The 14 rules  Rule 11: Avoid Redirects  Rule 12: Remove Duplicate Scripts  Rule 13: Configure Etags  Rule 14: Make Ajax CacheableMihai Oaida<mihai.oaida@gmail.com> 13
  14. 14. Lazy loading  scripts,Images,ads  70-80% downloaded code is not executed immediately for payloads of 100-300K  No blocking javascript  Example: google image searchMihai Oaida<mihai.oaida@gmail.com> 14
  15. 15. 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
  16. 16. 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
  17. 17. Profiling  document end  download rate  parsing time  inline javascript execution  document load  on load event - all resources loadedMihai Oaida<mihai.oaida@gmail.com> 17
  18. 18. Profiling - After <head> <script type="text/javascript"> documentStart = new Date().getTime(); </script>Mihai Oaida<mihai.oaida@gmail.com> 18
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. Conclusions  Each rule has a different impact  Rules are not all mandatory  Measure first  Measure afterMihai Oaida<mihai.oaida@gmail.com> 22
  23. 23. Thank you!Mihai Oaida<mihai.oaida@gmail.com> 23

×