Scaling API-first – The story of a global engineering organization
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
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
