Embed Size (px)
Citation preview
Mihai Oaida<[email protected]> 1
AIESEC IT School 2012
Building faster websitesFront-end performance
Mihai Oaida<[email protected]> 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<[email protected]> 3
Agenda
Web application architecture Web application performance Frontend performance The 14 rules Other tips Tools Conclusions
Mihai Oaida<[email protected]> 6
Web application performance
How do you measure it ? How users react to it? Why is it important?
Mihai Oaida<[email protected]> 7
JavaScript
Douglas Crockford on browsers:
”The most hostile software developement enviroment imaginable”
Wrote "JavaScript the Good Parts"
Mihai Oaida<[email protected]> 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<[email protected]> 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<[email protected]> 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<[email protected]> 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<[email protected]> 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<[email protected]> 13
The 14 rules
Rule 11: Avoid Redirects Rule 12: Remove Duplicate Scripts Rule 13: Configure Etags Rule 14: Make Ajax Cacheable
Mihai Oaida<[email protected]> 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<[email protected]> 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<[email protected]> 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<[email protected]> 17
Profiling
document end download rate parsing time inline javascript execution
document load on load event - all resources loaded
Mihai Oaida<[email protected]> 18
Profiling - After <head>
<script type="text/javascript">
documentStart = new Date().getTime();
</script>
Mihai Oaida<[email protected]> 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<[email protected]> 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<[email protected]> 21
Tools
Tools HttpWatch Wireshark Firebug Yslow Web developement Tools http://www.webpagetest.org/ http://smush.it/
Resources: http://stevesouders.com/hpws/
Mihai Oaida<[email protected]> 22
Conclusions
Each rule has a different impact Rules are not all mandatory Measure first Measure after
