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.

"Web performance optimization for everyone" por @abellonch

664 views

Published on

Presentación realizada en el #webcat Barcelona de Octubre del 2012

Autor: Albert Bellonch (@abellonch)

Published in: Technology
  • Be the first to comment

  • Be the first to like this

"Web performance optimization for everyone" por @abellonch

  1. 1. Webcat October ’12#webcat / @abellonch 1
  2. 2. Web performance optimizationfor everyone 2
  3. 3. Albert Bellonch CTO @abellonch /albertbellonch albert@itnig.net 3
  4. 4. What’s WPO?Web performance optimization is the process by which individual aspects of web pages are optimized, in order to achieve greater overall performance 4
  5. 5. What’s WPO?Web performance optimization is the process by which individual aspects of web pages are optimized, in order to achieve greater overall performance “Make it faster” 4
  6. 6. Advantages•Less server load•Better SEO•Better user experience 5
  7. 7. What’s in a web page? 6
  8. 8. What’s in a web page? HTML markup 6
  9. 9. What’s in a web page? CSS stylesheets HTML markup 6
  10. 10. What’s in a web page? CSS stylesheets Javascript code HTML markup 6
  11. 11. What’s in a web page? CSS stylesheets Javascript code HTML markup Images 6
  12. 12. What’s in a web page? CSS stylesheets Javascript code HTML markup Images Fonts 6
  13. 13. What’s in a web page? CSS stylesheets Javascript code HTML markup Images Fonts much more 6
  14. 14. WPO Techniques 7
  15. 15. Request combination 8
  16. 16. Typical scenario A wine store Browser Server 9
  17. 17. Typical scenario A wine store Home page CSS Browser Server 9
  18. 18. Typical scenario A wine store Home page CSS Wine list CSS Browser Server 9
  19. 19. Typical scenario A wine store Home page CSS Wine list CSS Browser Server Wine details CSS 9
  20. 20. Typical scenario A wine store Home page CSS Wine list CSS Browser Server Wine details CSS ...more CSS files 9
  21. 21. Combine it!In HTTP requests, a considerable amount of time is used when asking for the information, instead of transmitting this information. 10
  22. 22. The lazy-boy-in-the-sofa example 11
  23. 23. Improved scenario A wine store All CSS files combined Browser Server 12
  24. 24. Same for JavascriptAppliable with images: sprites 13
  25. 25. Can we do it better? 14
  26. 26. Can we do it better? Yes! 14
  27. 27. Resource minification 15
  28. 28. Typical scenario Uncompressed CSS (~56KB) 16
  29. 29. Minify it! Send only the essential information.This way, less data is sent, and thus less time is spent transferring it. 17
  30. 30. The gibberish-conversation example 18
  31. 31. Improved scenario Compressed CSS (~25KB) 19
  32. 32. Similar for JavascriptMore complex with images 20
  33. 33. Can we do it better? 21
  34. 34. Can we do it better? Yes! 21
  35. 35. Image optimization 22
  36. 36. Typical scenario Unscaled picture 30 KB 23
  37. 37. Typical scenario Unscaled picture 150 KB30 KB But the real image is 23
  38. 38. Slim down the images!The images should have the same size as they are shown as, and should be optimized too. 24
  39. 39. The gigantic-field example 25
  40. 40. Improved scenario Scaled picture 30 KB 26
  41. 41. Improved scenario Scaled picture 30 KB 30 KB And the real image is 26
  42. 42. Can we do it better? 27
  43. 43. Can we do it better? Yes! 27
  44. 44. Caching 28
  45. 45. Typical scenario A wine store, again Browser Server 29
  46. 46. Typical scenario A wine store, again Picture of 1787’ Chateau d’Yquern Browser Server 29
  47. 47. Typical scenario A wine store, again Picture of 1787’ Chateau d’Yquern Picture of 1787’ Chateau d’Yquern Browser Server 29
  48. 48. Typical scenario A wine store, again Picture of 1787’ Chateau d’Yquern Picture of 1787’ Chateau d’Yquern Browser Server Picture of 1787’ Chateau d’Yquern 29
  49. 49. Typical scenario A wine store, again Picture of 1787’ Chateau d’Yquern Picture of 1787’ Chateau d’Yquern Browser Server Picture of 1787’ Chateau d’Yquern Picture of 1787’ Chateau d’Yquern 29
  50. 50. Ask only missing stuff!If you know something won’t change for some time, don’t ask for it until it does. 30
  51. 51. The I-wanna-know example 31
  52. 52. Improved scenario A wine store, again Browser Server 32
  53. 53. Improved scenario A wine store, again Picture of 1787’ Chateau d’Yquern Browser Server 32
  54. 54. Improved scenario A wine store, again Picture of 1787’ Chateau d’Yquern OK, I have the picture of 1787’ Chateau Server Browser d’Yquern, so I’ll show it directly. 32
  55. 55. Can we do it better? 33
  56. 56. Can we do it better? Yes! 33
  57. 57. Other techniques 34
  58. 58. Use GET in Ajax requests Expiration headersUse JSON in AJAX requests Reduce use of CNAMEReduce DOM elements JPEG and PNG codificationReduce iframes Lazy load for imagesPrefer CSS over JS Content Delivery NetworksActivate deflate Avoid Flash filesFont optimizing Eager loadingCache Control headers Mobile-specific optimisations 35
  59. 59. No time for much more... 36
  60. 60. Be careful!•There’s a lot of things to do•Pick your critical weaknesses, and solve them first•Go step by step•Have your timing and resources into account 37
  61. 61. Questions?I can’t bite you from this far! 38
  62. 62. Thank you! 39

×