Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Site optimization


Published on

Published in: Education
  • Be the first to comment

  • Be the first to like this

Site optimization

  1. 1. Site Optimization Dimitar Belchugov @belchugov
  2. 2. does performance really matter?Of course it matters and you know it. So why dowe keep making slow sites that lead to a baduser experience?Lets not waste time showing millionairesperformance cases, lets get straight to thepoint!
  3. 3. HTML
  4. 4. avoid inline/embedded code1) Inline: the CSS is defined inside a style attribute and the JavaScript inside an onclick attribute for example, in any HTML tag;2) Embedded: the CSS is defined inside a <style> tag andthe JavaScript inside a <script> tag;3) External: the CSS is loaded from a <link> and theJavaScript from the src attribute of the <script> tag.> Useful tools / References
  5. 5. styles up top, scripts down bottom<head><meta charset="UTF-8"><title>Browser Diet</title><!-- CSS --><link rel="stylesheet" href="style.css" media="all"></head><body><p>Lorem ipsum dolor sit amet.</p><!-- JS --> <script src="script.js"></script></body>> References
  6. 6. minify your html<p>Lorem ipsum dolor sit amet.</p><!-- My List --><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
  7. 7. minify your html<p>Lorem ipsum dolor sit amet.</p> <!-- My List--> <ul> <li><a href="#"></a></li> <li><ahref="#"></a></li> <li><a href="#"></a></li></ul>On the right side you see a few samples of HTMLCompressor results with default settings.> Useful tools / References
  8. 8. try out async<script src="example.js"></script><script async src="example.js"></script>> References
  9. 9. CSS
  10. 10. minify your { width: 960px; margin: 0 auto;}/* --- Structure --- */.intro { margin: 100px; position: relative;}.center{width:960px;margin:0auto}.intro{margin:100px;position:relative}
  11. 11. minify your stylesheetsFor those that use pre-processorslike Sass, Less, and Stylus, its possible toconfigure your compiled CSS output to beminified.> Useful tools / References
  12. 12. combining multiple css files<link rel="stylesheet" href="structure.css" media="all"><link rel="stylesheet" href="banner.css" media="all"><link rel="stylesheet" href="layout.css" media="all"><link rel="stylesheet" href="component.css" media="all"><link rel="stylesheet" href="plugin.css" media="all"><link rel="stylesheet" href="main.css" media="all">> Useful tools / References
  13. 13. prefer <link> over @importTheres two ways to include an external stylesheet in your page: eithervia the <link> tag:<link rel="stylesheet" href="style.css">Or through the @import directive (inside an external stylesheetor in an inline <style> tag):@import url(style.css);When you use the second option through an external stylesheet, thebrowser is incapable of downloading the asset in parallel, which canblock the download of other assets.> References
  14. 14. JAVASCRIPT
  15. 15. load 3rd party content asynchronouslyvar script = document.createElement(script), scripts = document.getElementsByTagName(script)[0];script.async = true;script.src = url;scripts.parentNode.insertBefore(script, scripts);Alternatively, if you want to load multiple 3rd partywidgets, you can asynchronously load them with usingthisscript.> Video / References
  16. 16. cache array lengthsvar arr = new Array(1000), len, i;for (i = 0; i < arr.length; i++) { // Bad - size needs to be recalculated 1000 times}for (i = 0, len = arr.length; i < len; i++) { // Good - size is calculated only 1 time and thenstored}> Results on JSPerf
  17. 17. cache array lengthsvar links = document.getElementsByTagName(a), len, i;for (i = 0; i < links.length; i++) {// Bad - each iteration the list of links will be recalculated to see if there was a change}for (i = 0, len = links.length; i < len; i++) { // Good - the list size is first obtained and stored, then compared each iteration}// Terrible: infinite loop examplefor (i = 0; i < links.length; i++) {document.body.appendChild(document.createElement(a)); // each iteration the list of links increases, never satisfying the termination conditionof the loop // this would not happen if the size of the list was stored and used as a condition}> References
  18. 18. avoid document.write<script src="//"></script> <script>window.jQuery || document.write(<script src="js/vendor/jquery-1.9.0.min.js"></script>)</script>Attention: document.write performed during or after window.onload event replaces the entire content of thecurrent page.<span>foo</span> <script> window.onload = function() { document.write(<span>bar</span>); }; </script><span>foo</span><script> setTimeout(function() {document.write(<span>bar</span>);}, 1000);window.onload = function() {// ...};</script>> References
  19. 19. minimize repaints and reflowsThere is no doubt that excessive reflows andrepaints should be avoided, so instead of doing this:var div = document.getElementById("to-measure"), lis = document.getElementsByTagName(li), i, len; for (i = 0, len = lis.length; i < len; i++) { lis[i].style.width = div.offsetWidth + px;}
  20. 20. minimize repaints and reflowsDo this:var div = document.getElementById("to-measure"), lis = document.getElementsByTagName(li),widthToSet = div.offsetWidth, i, len;for (i = 0, len = lis.length; i < len; i++) { lis[i].style.width = widthToSet + px;}> Demo / References
  21. 21. avoid unnecessary dom manipulations// really bad!for (var i = 0; i < 100; i++) {document.getElementById("myList").innerHTML += "<span>" + i + "</span>";}// much better :)var myList = "";for (var i = 0; i < 100; i++) { myList += "<span>" + i + "</span>";}document.getElementById("myList").innerHTML = myList;> Results on JSPerf
  22. 22. minify your = function() {var foo = true;return {bar: function() {// do something }};};{var a=!0;return{bar:function(){}}}> Useful tools / References
  23. 23. combine multiple js files into one
  24. 24. Before After<script src="navbar.js"></script> <script src="main.js"></script><script src="component.js"></script><script src="page.js"></script><script src="framework.js"></script><script src="plugin.js"></script> > Useful tools / References
  25. 25. JQUERY
  26. 26. always use the latest version of jquery<scriptsrc="//"></script>Just like the wise Barney Stinson says, "New isalways better" :P> References
  27. 27. use for instead of eachThe use of native JavaScript functions nearly alwaysresults in faster execution than the ones in jQuery.For this reason, instead of usingthe jQuery.each method, use JavaScriptsown for loop.for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i]; }> Results on JSPerf / References
  28. 28. dont use jquery......unless its absolutely necessary. :)Why use the attr() method to search for an ID?$(a).on(click, function() {console.log( $(this).attr(id) );});If you can can get this attribute natively through this:$(a).on(click, function() { console.log( );});And its faster.> Results on JSPerf / References
  29. 29. IMAGES
  30. 30. use css spritesThis technique is all about grouping various images into asingle file..icon-foo { background-image: url(mySprite.png); background-position: -10px -10px; }.icon-bar { background-image: url(mySprite.png); background-position: -5px -5px;}> Useful tools / References
  31. 31. data uriBefore:.icon-foo { background-image: url(foo.png);}After:.icon-foo { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII%3D);}> Useful tools / References
  32. 32. dont rescale images in markup<img width="100" height="100" src="logo.jpg"alt="Logo">> References
  33. 33. optimize your images> Useful tools / References
  34. 34. SERVER
  35. 35. enable smart cachingExpiresActive OnExpiresByType image/gif "access plus 6 months"ExpiresByType image/jpeg "access plus 6 months"ExpiresByType image/png "access plus 6 months"ExpiresByType text/css "access plus 6 months"ExpiresByType text/javascript "access plus 6 months"ExpiresByType application/javascript "access plus 6months“> References
  36. 36. gzipAddOutputFilterByType DEFLATE text/htmlAddOutputFilterByType DEFLATE text/plainAddOutputFilterByType DEFLATE text/xmlAddOutputFilterByType DEFLATE text/cssAddOutputFilterByType DEFLATEapplication/javascript> References
  37. 37. BONUS
  38. 38. diagnosis tools: your best friendIf youd like to venture into this world of webperformance, its crucial to installthe YSlowand PageSpeed extensions in your browser—theyll be your best friends from now on.Or, if you prefer online tools, visit the WebPageTest, HTTPArchive, or PageSpeed sites.In general each will analyse your sites performance andcreate a report that gives your site a grade coupled withinvaluable advice to help you resolve the potentialproblems.
  39. 39. thats it for today!And remember, like all things in life, theres nosuch thing as a silver bullet.
  40. 40. Questions
  41. 41. Thank you!