Site Optimization Dimitar Belchugov    @belchugov
does performance really matter?Of course it matters and you know it. So why dowe keep making slow sites that lead to a bad...
HTML
avoid inline/embedded code1) Inline: the CSS is defined inside a style attribute and   the JavaScript inside an onclick at...
styles up top, scripts down bottom<head><meta charset="UTF-8"><title>Browser Diet</title><!-- CSS --><link rel="stylesheet...
minify your html<p>Lorem ipsum dolor sit amet.</p><!-- My List --><ul><li><a href="#"></a></li><li><a href="#"></a></li><l...
minify your html<p>Lorem ipsum dolor sit amet.</p> <!-- My List--> <ul> <li><a href="#"></a></li> <li><ahref="#"></a></li>...
try out async<script src="example.js"></script><script async src="example.js"></script>> References
CSS
minify your stylesheets.center { width: 960px; margin: 0 auto;}/* --- Structure --- */.intro { margin: 100px; position: re...
minify your stylesheetsFor those that use pre-processorslike Sass, Less, and Stylus, its possible toconfigure your compile...
combining multiple css files<link rel="stylesheet" href="structure.css" media="all"><link rel="stylesheet" href="banner.cs...
prefer <link> over @importTheres two ways to include an external stylesheet in your page: eithervia the <link> tag:<link r...
JAVASCRIPT
load 3rd party content asynchronouslyvar script = document.createElement(script),     scripts = document.getElementsByTagN...
cache array lengthsvar arr = new Array(1000), len, i;for (i = 0; i < arr.length; i++) {         // Bad - size needs to be ...
cache array lengthsvar links = document.getElementsByTagName(a), len, i;for (i = 0; i < links.length; i++) {// Bad - each ...
avoid document.write<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script>window.jQue...
minimize repaints and reflowsThere is no doubt that excessive reflows andrepaints should be avoided, so instead of doing t...
minimize repaints and reflowsDo this:var div = document.getElementById("to-measure"), lis = document.getElementsByTagName(...
avoid unnecessary dom manipulations// really bad!for (var i = 0; i < 100; i++) {document.getElementById("myList").innerHTM...
minify your scriptBrowserDiet.app = function() {var foo = true;return {bar: function() {// do something  }};};BrowserDiet....
combine multiple js files into one
Before                                 After<script src="navbar.js"></script>      <script src="main.js"></script><script ...
JQUERY
always use the latest version of jqueryhttp://code.jquery.com/jquery-latest.js<scriptsrc="//ajax.googleapis.com/ajax/libs/...
use for instead of eachThe use of native JavaScript functions nearly alwaysresults in faster execution than the ones in jQ...
dont use jquery......unless its absolutely necessary. :)Why use the attr() method to search for an ID?$(a).on(click, funct...
IMAGES
use css spritesThis technique is all about grouping various images into asingle file..icon-foo {  background-image: url(my...
data uriBefore:.icon-foo { background-image: url(foo.png);}After:.icon-foo { background-image:url(data:image/png;base64,iV...
dont rescale images in markup<img width="100" height="100" src="logo.jpg"alt="Logo">> References
optimize your images> Useful tools / References
SERVER
enable smart cachingExpiresActive OnExpiresByType image/gif "access plus 6 months"ExpiresByType image/jpeg "access plus 6 ...
gzipAddOutputFilterByType DEFLATE text/htmlAddOutputFilterByType DEFLATE text/plainAddOutputFilterByType DEFLATE text/xmlA...
BONUS
diagnosis tools: your best friendIf youd like to venture into this world of webperformance, its crucial to installthe YSlo...
thats it for today!And remember, like all things in life, theres nosuch thing as a silver bullet.
Questions
Thank you!
Site optimization
Upcoming SlideShare
Loading in...5
×

Site optimization

163

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
163
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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 stylesheets.center { 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="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></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 scriptBrowserDiet.app = function() {var foo = true;return {bar: function() {// do something }};};BrowserDiet.app=function(){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 jqueryhttp://code.jquery.com/jquery-latest.js<scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></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( this.id );});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!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×