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.

1. Web performance
optimization
for everyone

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

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?
CSS stylesheets
HTML markup

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

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

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

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

13. WPO Techniques

14. Request combination

15. Typical scenario A wine store
Browser Server

16. Typical scenario A wine store
Home page CSS
Browser Server

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

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

19. Typical scenario A wine store
Home page CSS
Wine list CSS
Browser Server
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 A wine store
All CSS files combined
Browser Server

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 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. 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
150 KB
30 KB
But the real image is

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 scenario Scaled picture
30 KB

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

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 A wine store, again
Browser Server

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

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

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. 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. 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 A wine store, again
Browser Server

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

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

70. Can we do it better?
Yes!

71. Other techniques

72. 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

73. No time for much more...

74. Except for
your dearest friend in WPO

75. Google Page Speed

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. 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 Speed Advise example
documentation
what files we can minimize

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!