Your SlideShare is downloading. ×
0
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Performance
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Performance

831

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
831
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Performance Measurements and Optimization Why You Should Care Page Load Optimizations JavaScript Optimizations CSS OptimizationsSaturday, January 26, 13
  • 2. About Me • Ynon Perek • ynon@ynonperek.com • Slides are available from: • http://ynonperek.comSaturday, January 26, 13
  • 3. Awesome Resources • Ilya Grigorik’s free performance crash course http://www.igvita.com/2013/01/15/faster-websites-crash-course-on-web- performance/ • Web Performance Today Blog: http://www.webperformancetoday.com/ • Steve Souders Blog and Books: http://stevesouders.com/Saturday, January 26, 13
  • 4. Facts & Stats “ 47% of consumer s expect a web ” load in 2 seco nds or less. page toSaturday, January 26, 13
  • 5. Facts & Stats “ 73% of m obile interne t users say ncountered a website ” th at they’ve e tha t was too s low to load.Saturday, January 26, 13
  • 6. Facts & Stats y In Page- “ Just One S econd Dela Can Cause 7% Loss In ” Load Customer C onversionsSaturday, January 26, 13
  • 7. How Load Time Affects Conversion Rate • Glasses Direct measuredSaturday, January 26, 13
  • 8. How Load Time Affects Conversion Rate • Strangeloop measuredSaturday, January 26, 13
  • 9. How Load Time Affects Conversion Rate • Wallmart measuredSaturday, January 26, 13
  • 10. How Load Time Affects Conversion Rate • Google measured Duration Type Of Delay Delay (ms) Impact (weeks) Pre Header 50 4 - Pre Header 100 4 -0.2% Post Header 200 6 -0.59% Post Header 400 6 -0.59%Saturday, January 26, 13
  • 11. How Load Time Affects Your Mood • Harris Interactive asked • 84% had problems. • Here’s what they didSaturday, January 26, 13
  • 12. Web Performance: You Should Care • Page load time affects your bounce rate • Page load time affects time on site • Page load time affects conversion • Page load time affects user satisfactionSaturday, January 26, 13
  • 13. Web Performance Stats (Retailers) Website Load Time (In Seconds) Barnes & Noble 4.88 Grainger 4.65 Buy.com 5.03 Amazon.com 6.31 Data from: http://www.keynote.com/keynote_competitive_research/ performance_indices/mobile/retail/index.htmlSaturday, January 26, 13
  • 14. What Is Page Load Time Page Load Starts Here GET data Here It IsSaturday, January 26, 13
  • 15. What Affects Page Load • Network • Server Code • Number Of HTTP Requests • Size Of HTTP Responses • How Fast Is The Browser • Browser DecisionsSaturday, January 26, 13
  • 16. Demo: Page Load cnn.comSaturday, January 26, 13
  • 17. cnn.com Takeaways • Site loading involves GETting over 100 resources • Most data is still images • Browser cache is misleadingSaturday, January 26, 13
  • 18. Bandwidth Vs. LatencySaturday, January 26, 13
  • 19. Bandwidth Vs. LatencySaturday, January 26, 13
  • 20. Demo: Testing Latency With httpingSaturday, January 26, 13
  • 21. Q&ASaturday, January 26, 13
  • 22. Optimizing Page Load HTTP Basics Reduce # Of Requests Reduce Distance Reduce SizeSaturday, January 26, 13
  • 23. HTTP Basics • Verify using HTTP 1.1 and Keepalive • Verify using GZip compression • Can use chrome or: • curl -I --compressed http://yoursite.comSaturday, January 26, 13
  • 24. Using CSS Sprites To Reduce Images • Group all small images into one large image called sprite sheet • Use CSS code to “cut” the relevant pieces of the sprite sheetSaturday, January 26, 13
  • 25. Using CSS Sprites To Reduce Images • Demo: Use http://www.spritecow.com/ to generate a new sprite sheetSaturday, January 26, 13
  • 26. Inline Images Using Data URLs data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAB0CAIAAADb +IFwAAAABmJLR0QA/wD/AP+gvaeTAAADLklEQVR4nO2dwZLjMAgFN1vz/ 7+cuemiCgZEx5lU9zGWLecVIghw/Hg+n/+E4f/dN/DNKC6I4oIoLojigiguiOKC/Lw68Hg8Tq67h8/ rgkFkHYw5vJ/MjU1dcKHlgiguyEu3sCjtj/ clFiy6zHrcx2S8SmbwzuE33dFyQRQX5NotLIKFECyodWidnlm8e9gQOJw1JhgcnBWM2Sm5Di0XRHFB Cm6hR+AEdkeRifAz63qf4paagJYLorgguFsoRQI9/5DhFv+g5YIoLkjBLfQWVGk9BruA3sa/ d89TrkPLBVFckGu3MFUC6BFsB6Y+WYx/ Uy0XRHFBHjc24o2HBJk8hpuIL0FxQWb6FjIlgMPTS1Nk6hfB4F6wsaPlgiguyPuihU +L8HsrvRThaLkgigty7RZKbQb7mKnTS66jt8CDO+yh5YIoLkghWpgKv3dKRcxe71Mv/ DhMTWi5IIoL8tItlNZ1wBs2CIdTTFVFd7RcEMUF6eQWev3Dh7uAqX3K4SFzC5+C4oIU+hZ6oX4vnu/ VQXbG26ozky60XBDFBbneRAQcJvNvaUMqxSHBPWfQckEUF6RQieg9crgYTxWWnNJhwjNzaEfLBVFc kEI702FFr/fkY+n0Ke80VQzVckEUF6TwNyxTVb/ SlQ8zGwGHpRajhZtRXJDOJqL0w801HvTueadXzcyg5YIoLsj1JiKzsjKHenF4L6LYL9j7FuYWPhfFBRkuUA anZyg5it5ch5WI/RNzC/eguCCFLsfMmN7CjO7vrE5a2p70vnKAlguiuCDDf9o2lf0rTZEpmgT +oddamUHLBVFckM4zEeMNRcF1pmqFU49dlCbVckEUF+RltBBk7TKDF+8sWQaTHp5ul +PHobgg73urVIapZEUpnuH2O1ouiOKC4G+VKqXvuL6FqSuXog4tF0RxQfC3SgXLp5TiG28qGC +a7Gi5IIoLgr8+pkRp7zDlKGx+/ pMoLshnuYXeHy9MeYPxLmgtF0RxQfC3Si2mfrinkpnBpL2ay46WC6K4IDe8Var37BXXwDD +PPVCywVRXJA73yr19Wi5IIoLorggiguiuCCKC6K4IIoL8gvjNAP/KJZ4+gAAAABJRU5ErkJggg==Saturday, January 26, 13
  • 27. Inline Images Using Data URLs • A data url is a base64 encoded version of the image bytes • Data URL basic form: data:[<mediatype>][;base64],<data> • Use server side code or http://websemantics.co.uk/online_tools/ image_to_data_uri_convertor/ to generate • From Unix: echo -n data:image/png;base64,;base64 image.pngSaturday, January 26, 13
  • 28. Why DataURLs are not awesome • They make your HTML ugly • They’re not saved in browser cache • No IE7 support • Image blocks page load • Larger in size (about 1.333%)Saturday, January 26, 13
  • 29. Use CSS3 Instead of Images • Replace onions with border-radius • Use css gradients instead of images • Use box-shadow instead of images • Tools: • http://css3generator.com/ • http://www.colorzilla.com/gradient-editor/Saturday, January 26, 13
  • 30. Use CSS Shapes Instead Of Images <body>     <div class="shape triangle-up red"></div>     <p></p>     <div class="shape triangle-down red"></div> </body>Saturday, January 26, 13
  • 31. Use CSS Shapes Instead Of Images .shape {   border: 30px solid;   width:0; height: 0; }   .red { border-color: red; }   .triangle-up {   border-left-color: transparent;   border-top-color: transparent;   border-right-color: transparent; }   .triangle-down { border-left-color: transparent; border-bottom-color: transparent; border-right-color: transparent; }Saturday, January 26, 13
  • 32. More CSS Shapes http://css-tricks.com/examples/ShapesOfCSS/Saturday, January 26, 13
  • 33. Old Browsers Fallback • Old browsers may not support CSS shapes • Use Modernizr to detect and fallback .no-js .glossy, .no-cssgradients .glossy {     background: url("images/glossybutton.png"); }   .cssgradients .glossy {     background-image: linear-gradient(top, #555, #333); }Saturday, January 26, 13
  • 34. Combine Scripts And Stylesheets • Combine multiple JS into a single script • Combine multiple CSS files into a single stylesheet • Ideal: Use one stylesheet and one script per page • Tools: • http://yui.github.com/yuicompressor/ • http://yeoman.io/Saturday, January 26, 13
  • 35. Avoid Redirects At All Cost • Redirects add another request but with no value • Worst kind: Mobile Redirects • Demo: d.co.ilSaturday, January 26, 13
  • 36. Avoid Redirects At All Cost • Better Way: Offer users to download the app from your web page • iOS 6 has the option built-in (smart app banners): <meta name="apple-itunes-app" content="app-id=366977202"> • Or use the jQuery Plugin: http://jasny.github.com/jquery.smartbanner/#androidSaturday, January 26, 13
  • 37. Use Cache To Reduce # Of Requests • No Request is better than fast request File size doesn’t matter • Browser Cache Is Your FriendSaturday, January 26, 13
  • 38. Cache Headers • HTTP 1.0 Had an Expires header: Expires: Thu, 15 Apr 2010 20:00:00 GMT • HTTP 1.1 Added Cache-Control header: Cache-Control: max-age=315360000Saturday, January 26, 13
  • 39. Caching vs. Inlining • Use external CSS and JavaScript for most web sites to allow caching • Use inline CSS and JavaScript for pages that are only visited once (for example: landing pages) <style> <head> h1 {     <title>Canvas Color Picker</title> color: red   }     <link rel="stylesheet" href="style.css" />  </style> </head>Saturday, January 26, 13
  • 40. Reduce Distance Closer => Lower RTTSaturday, January 26, 13
  • 41. Reduce Distance • Consider using a local server • Use a CDN • Demo: Loading jQuery from CDN vs. Non-local serverSaturday, January 26, 13
  • 42. Reduce Size • Minify JS and CSS • Use GZip Compression • Split Payload • Optimize ImagesSaturday, January 26, 13
  • 43. Help Thy Browser Flush Early Place Scripts At The Bottom Place Stylesheets At The Top Shard Dominant DomainsSaturday, January 26, 13
  • 44. Flushing Early • Web browsers try to do their best to load resources in parallel. • Send some data first, and browser will start rendering <html>   <head>     <title>HeadFirst</title>     <link rel="stylesheet" href="style.css" />   </head>     <body>     <p>Intro Text</p>     <!-- long running server code -->   </body> </html>Saturday, January 26, 13
  • 45. Demo https://gist.github.com/4636526Saturday, January 26, 13
  • 46. Flush Early Caveats • Verify presence of “Transfer-Encoding=chunked” header • Verify header is long enough • Chrome has a minimum threshold of ~2KB • Safari has a minimum threshold of ~1KB • Verify output buffering is off in php (or use ob_ functions)Saturday, January 26, 13
  • 47. Place Scripts At The Bottom • Scripts block rendering when they execute • By placing them at the bottom, browser can display prior data • Demo Blocking Script Tag • Note: Some browsers won’t start downloading ANYTHING while script tags are in queueSaturday, January 26, 13
  • 48. Defer vs. Async Scripts • Defer downloads in parallel, executes by order • Async downloads in parallel, executes when ready • Use async if possible • Best: Use require.jsSaturday, January 26, 13
  • 49. Place Stylesheets At The Bottom • No rendering is done before <html> stylesheets are ready   <head>     <title>HeadFirst</title>     <link rel="stylesheet" • Placing them at the top hints href="style.css" /> the browser to download first   </head> • Alternative: FOUC. Demo   <body> http://stevesouders.com/hpws/     <p>Intro Text</p>   </body> css-fouc.php </html>Saturday, January 26, 13
  • 50. Shard Dominant Domains • Don’t automatically shard • Find critical path using https:// developers.google.com/speed/ pagespeed/ • Sharding adds DNS work • Usually 2 domains are enoughSaturday, January 26, 13
  • 51. Q&ASaturday, January 26, 13
  • 52. Optimize Site Responsiveness How To Measure Responsiveness Use Short Event Handlers Prefer CSS3 Transitions over JS Avoid Expensive JS Simplify CSS SelectorsSaturday, January 26, 13
  • 53. Measuring Responsiveness • Use Chrome Developer Tools, Timeline tab • Keep event handlers < 100msSaturday, January 26, 13
  • 54. Use JSPerf But Don’t Take It Too SeriouslySaturday, January 26, 13
  • 55. Binding Vs. Delegating • When you have a long list or table, should you bind event handler on the parent or on each element ?Saturday, January 26, 13
  • 56. Binding vs. Delegating • Event handler is faster if bound directly on the element • Adding new elements is faster if bound on the container • Flip side: Less event handlers => Less memory • Tip: Be cautious with delegationSaturday, January 26, 13
  • 57. Prefer CSS3 Transitions Over JavaScript • They’re hardware accelerated div {   -webkit-transition: all 0.2s;   -moz-transition: all 0.2s; • They don’t involve event handlers   -o-transition: all 0.2s;   transition: all 0.2s; } • They’re easier to writeSaturday, January 26, 13
  • 58. Avoid Expensive JavaScript • A browser saves its data in multiple data models • Some JavaScript calls require syncing these models • Find and mitigate using Chrome Developer Tools • DemoSaturday, January 26, 13
  • 59. Simplify CSS Selectors • Browsers need to match CSS rules to elements • The less matching attempts => The more efficient is the rule div {   overflow: hidden; } <body>   <div></div>   <div class="one"></div>   <div id="two"></div> </body>Saturday, January 26, 13
  • 60. Selectors Ordered By Complexity • Most Simple: ID Selectors ( #wrapper { ... } ) • Class Selectors ( .item { ... } ) • Type Selectors ( a { ... } ) • Adjacent Sibling ( h1 + #wrapper { ... } ) • Child Selectors ( #toc > li {...} ) • Descendants Selector ( ul li { ... } ) • Universal Selector ( * { ... } ) • Attribute Selector ( [href=”#home”] { ... } ) • Pseudo-Classes / Elements ( a:hover { ... } )Saturday, January 26, 13
  • 61. How Browsers Read Selectors • Selectors are parsed right-to-left • #top-menu a {...} finds all a elements on the page, and checks if they are under a #top-menu element • Try to use the most specific right part of a rule • a.menu-item is betterSaturday, January 26, 13
  • 62. CSS Selectors Guidelines Avoid Universal Rules Don’t Qualify ID Selectors Don’t Qualify Class Selectors Use Specific Rules Avoid Descendants Selectors Avoid Tag-Child Selectors Use Less CSSSaturday, January 26, 13
  • 63. Avoid Universal Rules • Try to minimize using selectors other than: ID, class and tag a[href $= “pdf”] { ... } a.pdf { ... }Saturday, January 26, 13
  • 64. Don’t Qualify ID Selectors • It’s simply unnecessary • There’s only one element with that ID div#wrapper #wrapperSaturday, January 26, 13
  • 65. Don’t Qualify Class Selectors • Extend the class name to be more specific instead • Classes are indexed, so class-only search is faster ul.tasks .task-listSaturday, January 26, 13
  • 66. Use Specific Rules • Long lists give the browser a hard time ol li a .list-anchorSaturday, January 26, 13
  • 67. Avoid Descendant Selectors • They’re expensive, because search is done right-to-left ol li a .list-anchorSaturday, January 26, 13
  • 68. Avoid Tag Child Selectors #menu > li > a .menu-itemSaturday, January 26, 13
  • 69. Minimize CSS Rule Content • Can set a property on the parent and have it inherited to contained elements ul li { ul { list-style-image: ... list-style-image: ... } }Saturday, January 26, 13
  • 70. Now Forget EverythingSaturday, January 26, 13
  • 71. Performance Bottom Line • “97% of the time: premature optimization is the root of all evil” --- Donald Knuth • Only optimize what you need, when you need it • Consider performance from day 1 • Measure business impact using Google AnalyticsSaturday, January 26, 13
  • 72. Thanks For Listening • Ynon Perek • ynon@ynonperek.com • Slides are available from: • http://ynonperek.comSaturday, January 26, 13

×