Presentación realizada en el #webcat Barcelona de Octubre del 2012 Autor: Albert Bellonch (@abellonch)

1. Webcat October ’12
#webcat / @abellonch
1

2. Web performance
optimization
for everyone
2

3. Albert Bellonch
CTO
@abellonch
/albertbellonch
albert@itnig.net
3

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. 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. Advantages
•Less server load
•Better SEO
•Better user experience
5

7. What’s in a web page?
6

8. What’s in a web page?
HTML markup
6

9. What’s in a web page?
CSS stylesheets
HTML markup
6

10. What’s in a web page?
CSS stylesheets
Javascript code
HTML markup
6

11. What’s in a web page?
CSS stylesheets
Javascript code
HTML markup Images
6

12. What’s in a web page?
CSS stylesheets
Javascript code
HTML markup Images
Fonts
6

13. What’s in a web page?
CSS stylesheets
Javascript code
HTML markup Images
Fonts
much more
6

14. WPO Techniques
7

15. Request combination
8

16. Typical scenario A wine store
Browser Server
9

17. Typical scenario A wine store
Home page CSS
Browser Server
9

18. Typical scenario A wine store
Home page CSS
Wine list CSS
Browser Server
9

19. Typical scenario A wine store
Home page CSS
Wine list CSS
Browser Server
Wine details CSS
9

20. Typical scenario A wine store
Home page CSS
Wine list CSS
Browser Server
Wine details CSS
...more CSS files
9

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. The lazy-boy-in-the-sofa example
11

23. Improved scenario A wine store
All CSS files combined
Browser Server
12

24. Same for Javascript
Appliable with images: sprites
13

25. Can we do it better?
14

26. Can we do it better?
Yes!
14

27. Resource minification
15

28. Typical scenario Uncompressed CSS (~56KB)
16

29. Minify it!
Send only the essential information.
This way, less data is sent, and thus less time is spent transferring it.
17

30. The gibberish-conversation example
18

31. Improved scenario Compressed CSS (~25KB)
19

32. Similar for Javascript
More complex with images
20

33. Can we do it better?
21

34. Can we do it better?
Yes!
21

35. Image optimization
22

36. Typical scenario Unscaled picture
30 KB
23

37. Typical scenario Unscaled picture
150 KB
30 KB
But the real image is
23

38. Slim down the images!
The images should have the same size as they are shown as,
and should be optimized too.
24

39. The gigantic-field example
25

40. Improved scenario Scaled picture
30 KB
26

41. Improved scenario Scaled picture
30 KB 30 KB
And the real image is
26

42. Can we do it better?
27

43. Can we do it better?
Yes!
27

44. Caching
28

45. Typical scenario A wine store, again
Browser Server
29

46. Typical scenario A wine store, again
Picture of 1787’ Chateau d’Yquern
Browser Server
29

47. Typical scenario A wine store, again
Picture of 1787’ Chateau d’Yquern
Picture of 1787’ Chateau d’Yquern
Browser Server
29

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. 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. Ask only missing stuff!
If you know something won’t change for some time,
don’t ask for it until it does.
30

51. The I-wanna-know example
31

52. Improved scenario A wine store, again
Browser Server
32

53. Improved scenario A wine store, again
Picture of 1787’ Chateau d’Yquern
Browser Server
32

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. Can we do it better?
33

56. Can we do it better?
Yes!
33

57. Other techniques
34

58. Use GET in Ajax requests Expiration headers
Use JSON in AJAX requests Reduce use of CNAME
Reduce DOM elements JPEG and PNG codification
Reduce iframes Lazy load for images
Prefer CSS over JS Content Delivery Networks
Activate deflate Avoid Flash files
Font optimizing Eager loading
Cache Control headers Mobile-specific optimisations
35

59. No time for much more...
36

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. Questions?
I can’t bite you from this far!
38

62. Thank you!
39