Web performance optimization for everyone

We often hear engineers talking about strange topics: caching, CSS and Javascript optimization, loading time, deferred execution, expiration control headers… This 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.

Transcript

1. Web performance optimization for everyone
2. Albert Bellonch @abellonch /albertbellonch albert@itnig.net CTO
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. 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. Advantages •Less server load •Better SEO •Better user experience
6. What’s in a web page?
7. What’s in a web page? HTML markup
8. What’s in a web page? HTML markup CSS stylesheets
9. What’s in a web page? HTML markup Javascript code CSS stylesheets
10. What’s in a web page? HTML markup Javascript code CSS stylesheets Images
11. What’s in a web page? HTML markup Javascript code CSS stylesheets Images Fonts
12. What’s in a web page? HTML markup Javascript code CSS stylesheets Images Fonts much more
13. WPO Techniques
14. Request combination
15. Typical scenario Browser Server A wine store
16. Typical scenario Browser Server Home page CSS A wine store
17. Typical scenario Browser Server Home page CSS Wine list CSS A wine store
18. Typical scenario Browser Server Home page CSS Wine list CSS A wine store Wine details CSS
19. Typical scenario Browser Server Home page CSS Wine list CSS A wine store Wine details CSS ...more CSS files
20. Combine it! In HTTP requests, a considerable amount of time is used when asking for the information, instead of transmitting this information.
21. The lazy-boy-in-the-sofa example Imagine that you’re hungry, and you sit down to your couch, so you can watch the last episode of your favourite TV show. At a certain point, you go to 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 again in order to pick up an apple. Man, pick it all at once!
22. Improved scenario Browser Server A wine store All CSS files combined
23. Same for Javascript Appliable with images: sprites
24. Tools Rails: jammit, juicer, or assets pipeline (>=3.1) WordPress: Better WordPress Minify
25. Can we do it better?
26. Can we do it better? Yes!
27. Resource compression
28. Typical scenario Uncompressed CSS (~56KB)
29. Compress it! Send only the essential information. This way, less data is sent, and thus less time is spent transferring it.
30. The gibberish-conversation example There 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 tiny amount of valuable information. You lost 59 minutes of your time! Conclusion: make these people talk only about what you care.
31. Improved scenario Compressed CSS (~25KB)
32. Similar for Javascript More complex with images
33. Tools Same as with request combination
34. Can we do it better?
35. Can we do it better? Yes!
36. Correct timing
37. Typical scenario Improvable resource ordering •Load Javascript •Load images •Load CSS stylesheets •Show HTML structure
38. Typical scenario Improvable resource ordering •Load Javascript // nothing to operate with •Load images •Load CSS stylesheets •Show HTML structure
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. 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. 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. Sort it properly! Try your best to do things only when are needed, but avoid losing quality. Timing is crucial.
43. The I-bought-a-parking-space example Some people do things the other way round. Imagine someone who is very excited because he’s about to buy a car. So excited, that he rents a parking 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. Improved scenarioBest 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. Tools Nothing in particular
46. Can we do it better?
47. Can we do it better? Yes!
48. Image optimization
49. Typical scenario Unscaled picture 30 KB
50. Typical scenario Unscaled picture But the real image is 30 KB 150 KB
51. Slim down the images! The images should have the same size as they are shown as, and should be optimized too.
52. The gigantic-field example A farm entrepreneur is going to plant 5 tomatoes and 10 lettuces, so he buys the whole Camp Nou in order to plant them. But he only needs a minimal part of it, so he is wasting a lot of field! Mr. Farmer: get what you need, the moment you need it.
53. Improved scenarioScaled picture 30 KB
54. Improved scenarioScaled picture And the real image is 30 KB 30 KB
55. Tools Scaling: any image editing tool Optimizing: piet for Rails, smushit for Wordpress
56. Can we do it better?
57. Can we do it better? Yes!
58. Caching
59. Typical scenario Browser Server A wine store, again
60. Typical scenario Browser Server Picture of 1787’ Chateau d’Yquern A wine store, again
61. Typical scenario Browser Server Picture of 1787’ Chateau d’Yquern Picture of 1787’ Chateau d’Yquern A wine store, again
62. Typical scenario Browser Server Picture of 1787’ Chateau d’Yquern Picture of 1787’ Chateau d’Yquern A wine store, again Picture of 1787’ Chateau d’Yquern
63. Typical scenario Browser Server Picture of 1787’ Chateau d’Yquern Picture of 1787’ Chateau d’Yquern A wine store, again Picture of 1787’ Chateau d’Yquern Picture of 1787’ Chateau d’Yquern
64. Ask only missing stuff! If you know something won’t change for some time, don’t ask for it until it does.
65. The I-wanna-know example Supose there’s this big football game in a few days. You have a football freak friend, who knows every match schedule for every league, so you go ask him when this game is. The second time you need this information, you keep asking him, even though you know that, 99% of the times, this information won’t change. Use your memory! Ask things only when you don’t know them.
66. Improved scenario Browser Server A wine store, again
67. Improved scenario Browser Server Picture of 1787’ Chateau d’Yquern A wine store, again
68. Improved scenario Browser Server Picture of 1787’ Chateau d’Yquern A wine store, again OK, I have the picture of 1787’ Chateau d’Yquern, so I’ll show it directly.
69. Can we do it better?
70. Can we do it better? Yes!
71. Other techniques
72. Use GET in Ajax requests Use JSON in AJAX requests Reduce DOM elements Reduce iframes Prefer CSS over JS Activate deflate Font optimizing Cache Control headers Expiration headers Reduce use of CNAME JPEG and PNG codification Lazy load for images Content Delivery Networks Avoid Flash files Eager loading Mobile-specific optimisations
73. No time for much more...
74. Except for your dearest friend in WPO
75. Google Page Speed
76. developers.google.com/speed/pagespeed Page Speed •Useful to detect our website performance •Gives two scores: desktop and mobile •Lists everything we can improve •Extensive documentation on WPO
77. Page Speed Desktop score overall score for desktop
78. Page Speed Mobile score overall score for mobile
79. Page Speed Critical path explorer required files for the website , ordered in time
80. Page SpeedAdvise example what files we can minimize documentation
81. And a lot of things more.
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. Questions? I can’t bite you from this far!
84. Thank you!