A little journey into website optimization

5,942 views

Published on

Fast, Faster, Fastest - A little journey into website optimization is a presentation given at Fronteers BE which covers the main techniques and tools that can help you achieve the best performance for your website. From various ways to compress images, to writing very efficient CSS, to using cache and compression to your advantage, the slides will explain why front-end optimization is necessary, how it impacts a business and even how big companies use performance perception for their websites.

Published in: Technology, Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,942
On SlideShare
0
From Embeds
0
Number of Embeds
4,055
Actions
Shares
0
Downloads
25
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

A little journey into website optimization

  1. 1. Fast Fast ER Fast ESTa little journey into Website Optimization
  2. 2. @stelianweb designer @digitibelieves in optimization
  3. 3. “People don’t like to wait” - Captain Obvious
  4. 4. 40% of people abandon a website that takesmore than 3 seconds to load. - Forrester Research
  5. 5. online shoppers expect pages to load in 2 seconds - Forrester Research
  6. 6. on the web 250ms might win you the race - Google & Microsoft studies
  7. 7. Page load times affect online businesses
  8. 8. +500ms -3% Traffic Page load time
  9. 9. +500ms -1.2% Revenue Page load time
  10. 10. +100ms -1% Page load Sales time
  11. 11. “80-90% of the end-userresponse time is spent on the front-end” - Steve Saunders, Google
  12. 12. Objectives Low number of files Small file size Fast rendering
  13. 13. Low number of files
  14. 14. "Every HTTP request is a gamble. A chance to fail." - Scott Jehl
  15. 15. 6Connections per Hostname
  16. 16. Use CSS Sprites
  17. 17. 1 CSS file
  18. 18. 1 CSS file, ideally
  19. 19. 29
  20. 20. Use @media print instead of print.css
  21. 21. 1 JS file per hostname
  22. 22. 40+
  23. 23. Small file size
  24. 24. Write semantic HTMLavoiding unnecessary elements
  25. 25. Minify thejavascript
  26. 26. Smaller CSSuse a reset.css file to avoid repetitionuse shorthand properties*design with consistencyremove unused styling * for the designers
  27. 27. Normalbody{    font-family: "Lucida Grande", Lucida, Verdana, sans-serif;    font-size: 1em;    line-height: 1.5em;    font-style: italic;    font-weight: bold;} Shorthandbody{    font: italic bold 1em/1.5em "Lucida Grande", Lucida, Verdana, sans-serif;}
  28. 28. Consistency: font-size 23%10+ 100+ 78% The number of font-size declarations Alexa top 1000 websites
  29. 29. Consistency: patterns source: stubbornella.org
  30. 30. Minify the CSS
  31. 31. Use font subsets if possible
  32. 32. Choose theright image format binary files (images, PDFs, ...) 84% Alexa top 1000 websites
  33. 33. GIFOnly for animations
  34. 34. PNG-8for small dimensions and no need for true color support; recommended for illustrations
  35. 35. PNG-8 Alpha Transparency Fireworks
  36. 36. PNG-8 Alpha Transparency ImageAlpha (Free)
  37. 37. PNG-24 when in need for high qualitygraphics, although it tends to get bigger in size
  38. 38. Use posterization to reduce the number ofcolors in a PNG-24 file
  39. 39. JPEGgreat for large images that contain photographic data
  40. 40. JPEG tips80% quality is usually good enoughtry to align edges to an 8x8 pixel griduse JPEG selective quality in FW
  41. 41. JPEGLeft square aligned to the 8x8 grid, right one not
  42. 42. JPEG Selective Quality in Fireworks
  43. 43. Use ImageOptim to compress images furtherAlternatives: smush.it, punypng, jpegmini
  44. 44. Original PNG-8 + Alpha Transparency1068 KB 263 KB
  45. 45. Original PNG-8 + Alpha +ImageOptim1068 KB 228 KB
  46. 46. Fast rendering
  47. 47. Cache static files
  48. 48. Cache static files forever
  49. 49. “e fastest HTTPrequest is the one not made”
  50. 50. Using .htaccessHeader unset PragmaFileETag NoneHeader unset ETag # cache images for 10 years<FilesMatch ".(ico|pdf|jpg|jpeg|png|gif)$"> Header set Cache-Control "max-age=315360000, public, must-revalidate" Header unset Last-Modified</FilesMatch> # cache html/htm/xml/txt files for 2 hours<FilesMatch ".(html|htm|xml|txt|xsl)$"> Header set Cache-Control "max-age=7200, must-revalidate"</FilesMatch> this is just an example; for best results, use HTML5 Boilerplate
  51. 51. Cache AJAX requests
  52. 52. Faster CSS Dont use @import Stay away from * Avoid using a tag as a keybody * {...}body > * {...}ul.active li a {...}ul.active > li > a {...}
  53. 53. Use CSS3 responsiblydon’t overuse border-radius, box-shadow, gradients http://perfectionkills.com
  54. 54. Use domain sharding to increase the number of concurrent connections
  55. 55. Use a CDNContent Delivery Network
  56. 56. Use CDN hosted JS libraries
  57. 57. Specify the jQuery version for better cachinghttp://code.jquery.com/jquery-latest.min.js no cachehttp://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js 1 hourhttp://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js 1 year
  58. 58. Always load scriptsasyncroniusly and putthem at the bottom of the page
  59. 59. Compress onlycompressible resources HTML, CSS, JS, XML, SVG, ICO use GZIP instead of Deflate use lowercase for better compression HTML5 Boilerplate .htaccess recommened
  60. 60. e faviconhave one to avoid a 404load it from a subdomaincompress itcache it forever
  61. 61. Avoid mixed content warningshttp://code.jquery.com/jquery-latest.min.js//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
  62. 62. Minimize reflows
  63. 63. Watch out for 404 favicon apple touch icons apple-touch-icon-ZxZ-precomposed (android) crossdomain.xml
  64. 64. Trigger hardwareaccelerated CSS in iOS
  65. 65. TestPageSpeed, Yslow
  66. 66. Measure Google Analytics Site Speed//default sample rate is 1%_gaq.push([_setSiteSpeedSampleRate, 5]);
  67. 67. So, what now?
  68. 68. Cheat LieDeceive
  69. 69. Performance Perception
  70. 70. Apple The iPhone saves a screenshot of every appwhen it closes. So when you relaunch the app it loads that screenshot first.
  71. 71. Instagram
  72. 72. Instagram
  73. 73. Instagram
  74. 74. Amazon Priority Loading
  75. 75. Tools & Resources(1 of 2)Tools๏ ImageOptim๏ ImageAlpha๏ HTML5 Boilerplate๏ Smush.it - PunyPNG - JPEGmini - PNGGauntlet (Win)๏ Online YUI Compressor๏ CSS Sprite Generator - CSSsprite Photoshop script๏ Page Speed - YSlowResources๏ Akamai Reveals 2 Seconds as the New Threshold of Acceptability for eCommerce Web Page Response Times๏ How Loading Time Affects Your Bottom Line (Infographic)๏ For Impatient Web Users, an Eye Blink Is Just Too Long to Wait๏ Facebook pages that are 500ms slower result in a 3% drop-off in traffic (PDF)๏ If Google increased page load by 500ms it would cost them 1.2% of their revenue (Video)๏ Every 100ms of latency costs Amazon 1% of profit๏ The Performance Golden Rule
  76. 76. Tools & Resources(2 of 2)๏ Most Browsers Allow 6 Concurrent Connections per Hostname๏ Top 5 Mistakes of Massive CSS (Video + Graphs)๏ How to create CSS objects? Get the granularity right!๏ HTTP Compression use by Alexa Top 1000๏ Profiling CSS for fun and profit. Optimization notes. (CSS3 Performance)๏ Maximize Your Chances of Caching Your jQuery๏ Lose the Wait: HTTP Compression๏ Instagram and Optimizing Favicons๏ Use Lowercase Markup For Better Compression๏ Small site? Raise your page load time calculation sample to 100%๏ The iPhone’s Perceived Performance๏ The 3 White Lies Behind Instagram’s Lightning Speed๏ Making a Slow Site Appear Fast

×