• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Building faster websites Front-end performance
 

Building faster websites Front-end performance

on

  • 725 views

 

Statistics

Views

Total Views
725
Views on SlideShare
717
Embed Views
8

Actions

Likes
0
Downloads
9
Comments
0

2 Embeds 8

http://www.linkedin.com 5
https://www.linkedin.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Building faster websites Front-end performance Building faster websites Front-end performance Presentation Transcript

    • AIESEC IT School 2012 Building faster websites Front-end performanceMihai 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.oaidaMihai Oaida<mihai.oaida@gmail.com> 2
    • Agenda  Web application architecture  Web application performance  Frontend performance  The 14 rules  Other tips  Tools  ConclusionsMihai Oaida<mihai.oaida@gmail.com> 3
    • Web application architectureMihai 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 resourcesMihai 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.roMihai 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 ComponentsMihai 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 JavaScriptMihai 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 CacheableMihai 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 searchMihai 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 loadedMihai 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 afterMihai Oaida<mihai.oaida@gmail.com> 22
    • Thank you!Mihai Oaida<mihai.oaida@gmail.com> 23