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.
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”
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!
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.
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
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.
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.
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.
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
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
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