Building faster websites Front-end performance
•
0 likes•986 views
The document is a presentation about building faster websites and improving front-end performance. The presentation covers web application architecture and performance, factors that affect front-end performance, techniques like lazy loading and profiling, and 14 rules for optimizing front-end performance such as reducing HTTP requests, leveraging a CDN, gzipping components, and minimizing DNS lookups. It also discusses tools for analyzing and improving performance.
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Building faster websites Front-end performance
Similar to Building faster websites Front-end performance (20)
More from Mihai Oaida
More from Mihai Oaida (6)
Recently uploaded
Recently uploaded (20)
Building faster websites Front-end performance
- 1. AIESEC IT School 2012 Building faster websites Front-end performance Mihai Oaida<mihai.oaida@gmail.com> 1
- 2. 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
- 3. Agenda Web application architecture Web application performance Frontend performance The 14 rules Other tips Tools Conclusions Mihai Oaida<mihai.oaida@gmail.com> 3
- 4. Web application architecture Mihai Oaida<mihai.oaida@gmail.com> 4
- 5. Web application architecture http://www.webpagetest.org/ Mihai Oaida<mihai.oaida@gmail.com> 5
- 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. 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. 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
- 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.ro Mihai Oaida<mihai.oaida@gmail.com> 9
- 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 Components Mihai Oaida<mihai.oaida@gmail.com> 10
- 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. 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
- 13. 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
- 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 search Mihai Oaida<mihai.oaida@gmail.com> 14
- 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. 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. 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
- 18. Profiling - After <head> <script type="text/javascript"> documentStart = new Date().getTime(); </script> Mihai Oaida<mihai.oaida@gmail.com> 18
- 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. 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. 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. Conclusions Each rule has a different impact Rules are not all mandatory Measure first Measure after Mihai Oaida<mihai.oaida@gmail.com> 22