Web performance optimization for everyone

2,499 views
2,423 views

Published on

This Friday, Albert Bellonch will speak about web performance optimization. We often hear engineers talking about strange topics: caching, CSS and Javascript optimization, loading time, deferred execution, expiration control headers… This next talk is focused on everyone understaning what web performance optimization is: which recurring problems there are, how are they solved, and why is important to solve them.

Who is Albert Bellonch?

Albert Bellonch is a Computer Engineer by the polytechnical universities of Catalonia and Turin. After finishing his Final Project in London, he returned to Barcelona in order to begin a new phase at Itnig, where he is the Chief Technological Officer and leads the development team.

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

No Downloads
Views
Total views
2,499
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
36
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Web performance optimization for everyone

  1. 1. Web performance optimizationfor everyone
  2. 2. Albert Bellonch CTO @abellonch /albertbellonch albert@itnig.net
  3. 3. 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. 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 “Make it faster”
  5. 5. Advantages•Less server load•Better SEO•Better user experience
  6. 6. What’s in a web page?
  7. 7. What’s in a web page? HTML markup
  8. 8. What’s in a web page? CSS stylesheets HTML markup
  9. 9. What’s in a web page? CSS stylesheets Javascript code HTML markup
  10. 10. What’s in a web page? CSS stylesheets Javascript code HTML markup Images
  11. 11. What’s in a web page? CSS stylesheets Javascript code HTML markup Images Fonts
  12. 12. What’s in a web page? CSS stylesheets Javascript code HTML markup Images Fonts much more
  13. 13. WPO Techniques
  14. 14. Request combination
  15. 15. Typical scenario A wine store Browser Server
  16. 16. Typical scenario A wine store Home page CSS Browser Server
  17. 17. Typical scenario A wine store Home page CSS Wine list CSS Browser Server
  18. 18. Typical scenario A wine store Home page CSS Wine list CSS Browser Server Wine details CSS
  19. 19. Typical scenario A wine store Home page CSS Wine list CSS Browser Server Wine details CSS ...more CSS files
  20. 20. Combine it!In HTTP requests, a considerable amount of time is used when asking for the information, instead of transmitting this information.
  21. 21. The lazy-boy-in-the-sofa exampleImagine that you’re hungry, and you sit down to your couch, so you canwatch the last episode of your favourite TV show. At a certain point, you goto the kitchen, you take some cheese, and get back to the couch.Ten minutes later, you go to the kitchen again, make yourself a sandwhich,and head to the couch. And when the episode is ending, you stand up againin order to pick up an apple.Man, pick it all at once!
  22. 22. Improved scenario A wine store All CSS files combined Browser Server
  23. 23. Same for JavascriptAppliable with images: sprites
  24. 24. ToolsRails: jammit, juicer, or assets pipeline (>=3.1) WordPress: Better WordPress Minify
  25. 25. Can we do it better?
  26. 26. Can we do it better? Yes!
  27. 27. Resource compression
  28. 28. Typical scenario Uncompressed CSS (~56KB)
  29. 29. Compress it! Send only the essential information.This way, less data is sent, and thus less time is spent transferring it.
  30. 30. The gibberish-conversation exampleThere are these people that talk a lot. Like, a lot. You talk to them for an hour,and after all this time you realize that you end the conversation with a very tinyamount of valuable information. You lost 59 minutes of your time!Conclusion: make these people talk only about what you care.
  31. 31. Improved scenario Compressed CSS (~25KB)
  32. 32. Similar for JavascriptMore complex with images
  33. 33. ToolsSame as with request combination
  34. 34. Can we do it better?
  35. 35. Can we do it better? Yes!
  36. 36. Correct timing
  37. 37. Typical scenario Improvable resource ordering •Load Javascript •Load images •Load CSS stylesheets •Show HTML structure
  38. 38. Typical scenario Improvable resource ordering •Load Javascript // nothing to operate with •Load images •Load CSS stylesheets •Show HTML structure
  39. 39. Typical scenario Improvable resource ordering •Load Javascript // nothing to operate with •Load images // not showing even a structure •Load CSS stylesheets •Show HTML structure
  40. 40. Typical scenario Improvable resource ordering •Load Javascript // nothing to operate with •Load images // not showing even a structure •Load CSS stylesheets // nothing to style •Show HTML structure
  41. 41. Typical scenario Improvable resource ordering •Load Javascript // nothing to operate with •Load images // not showing even a structure •Load CSS stylesheets // nothing to style •Show HTML structure // should be shown first
  42. 42. Sort it properly!Try your best to do things only when are needed, but avoid losing quality. Timing is crucial.
  43. 43. The I-bought-a-parking-space exampleSome people do things the other way round. Imagine someone who isvery excited because he’s about to buy a car. So excited, that he rents aparking space where to put the car, even if he still has no car at all.Please: buy the car, and then rent the parking space.
  44. 44. Improved scenario Best resource ordering •Show HTML structure // all depends on it •Load CSS stylesheets // give nice style to html •Load images // fill the gaps And after a while... •Load Javascript // do the fireworks
  45. 45. ToolsNothing in particular
  46. 46. Can we do it better?
  47. 47. Can we do it better? Yes!
  48. 48. Image optimization
  49. 49. Typical scenario Unscaled picture 30 KB
  50. 50. Typical scenario Unscaled picture 150 KB30 KB But the real image is
  51. 51. Slim down the images!The images should have the same size as they are shown as, and should be optimized too.
  52. 52. The gigantic-field exampleA farm entrepreneur is going to plant 5 tomatoes and 10 lettuces, so hebuys the whole Camp Nou in order to plant them. But he only needs aminimal part of it, so he is wasting a lot of field!Mr. Farmer: get what you need, the moment you need it.
  53. 53. Improved scenario Scaled picture 30 KB
  54. 54. Improved scenario Scaled picture 30 KB 30 KB And the real image is
  55. 55. Tools Scaling: any image editing toolOptimizing: piet for Rails, smushit for Wordpress
  56. 56. Can we do it better?
  57. 57. Can we do it better? Yes!
  58. 58. Caching
  59. 59. Typical scenario A wine store, again Browser Server
  60. 60. Typical scenario A wine store, again Picture of 1787’ Chateau d’Yquern Browser Server
  61. 61. Typical scenario A wine store, again Picture of 1787’ Chateau d’Yquern Picture of 1787’ Chateau d’Yquern Browser Server
  62. 62. 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
  63. 63. 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
  64. 64. Ask only missing stuff!If you know something won’t change for some time, don’t ask for it until it does.
  65. 65. The I-wanna-know exampleSupose there’s this big football game in a few days. You have a football freakfriend, who knows every match schedule for every league, so you go askhim when this game is.The second time you need this information, you keep asking him, eventhough you know that, 99% of the times, this information won’t change.Use your memory! Ask things only when you don’t knowthem.
  66. 66. Improved scenario A wine store, again Browser Server
  67. 67. Improved scenario A wine store, again Picture of 1787’ Chateau d’Yquern Browser Server
  68. 68. 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.
  69. 69. Can we do it better?
  70. 70. Can we do it better? Yes!
  71. 71. Other techniques
  72. 72. 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
  73. 73. No time for much more...
  74. 74. Except foryour dearest friend in WPO
  75. 75. Google Page Speed
  76. 76. Page Speed•Useful to detect our website performance•Gives two scores: desktop and mobile•Lists everything we can improve•Extensive documentation on WPO developers.google.com/speed/pagespeed
  77. 77. Page Speed Desktop score overall score for desktop
  78. 78. Page Speed Mobile score overall score for mobile
  79. 79. Page Speed Critical path explorer required files for the website , ordered in time
  80. 80. Page Speed Advise example documentation what files we can minimize
  81. 81. And a lot of things more.
  82. 82. 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
  83. 83. Questions?I can’t bite you from this far!
  84. 84. Thank you!

×