web performance optimization for everyone
DESCRIPTION
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.TRANSCRIPT
Web performance optimization
for everyone
Albert Bellonch
@abellonch
/albertbellonch
CTO
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
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”
Advantages
•Less server load
•Better SEO
•Better user experience
What’s in a web page?
What’s in a web page?
HTML markup
What’s in a web page?
HTML markup
CSS stylesheets
What’s in a web page?
HTML markup
Javascript code
CSS stylesheets
What’s in a web page?
HTML markup
Javascript code
CSS stylesheets
Images
What’s in a web page?
HTML markup
Javascript code
CSS stylesheets
Images
Fonts
What’s in a web page?
HTML markup
Javascript code
CSS stylesheets
Images
Fonts
much more
WPO Techniques
Request combination
Typical scenario
Browser Server
A wine store
Typical scenario
Browser Server
Home page CSS
A wine store
Typical scenario
Browser Server
Home page CSS
Wine list CSS
A wine store
Typical scenario
Browser Server
Home page CSS
Wine list CSS
A wine store
Wine details CSS
Typical scenario
Browser Server
Home page CSS
Wine list CSS
A wine store
Wine details CSS
...more CSS files
Combine it!In HTTP requests, a considerable amount of time is used when asking
for the information, instead of transmitting this information.
The lazy-boy-in-the-sofa exampleImagine 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!
Improved scenario
Browser Server
A wine store
All CSS files combined
Same for JavascriptAppliable with images: sprites
ToolsRails: jammit, juicer, or assets pipeline (>=3.1)
WordPress: Better WordPress Minify
Can we do it better?
Can we do it better?Yes!
Resource compression
Typical scenario Uncompressed CSS (~56KB)
Compress it!Send only the essential information.
This way, less data is sent, and thus less time is spent transferring it.
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 tiny amount of valuable information. You lost 59 minutes of your time!
Conclusion: make these people talk only about what you care.
Improved scenario Compressed CSS (~25KB)
Similar for JavascriptMore complex with images
ToolsSame as with request combination
Can we do it better?
Can we do it better?Yes!
Correct timing
Typical scenario Improvable resource ordering
•Load Javascript
•Load images
•Load CSS stylesheets
•Show HTML structure
Typical scenario Improvable resource ordering
•Load Javascript // nothing to operate with
•Load images
•Load CSS stylesheets
•Show HTML structure
Typical scenario Improvable resource ordering
•Load Javascript // nothing to operate with
•Load images // not showing even a structure
•Load CSS stylesheets
•Show HTML structure
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
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
Sort it properly!Try your best to do things only when are needed,
but avoid losing quality. Timing is crucial.
The I-bought-a-parking-space exampleSome 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.
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
ToolsNothing in particular
Can we do it better?
Can we do it better?Yes!
Image optimization
Typical scenario Unscaled picture
30 KB
Typical scenario Unscaled picture
But the real image is
30 KB
150 KB
Slim down the images!The images should have the same size as they are shown as,
and should be optimized too.
The gigantic-field exampleA 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.
Improved scenario Scaled picture
30 KB
Improved scenario Scaled picture
And the real image is
30 KB 30 KB
ToolsScaling: any image editing tool
Optimizing: piet for Rails, smushit for Wordpress
Can we do it better?
Can we do it better?Yes!
Caching
Typical scenario
Browser Server
A wine store, again
Typical scenario
Browser Server
Picture of 1787’ Chateau d’Yquern
A wine store, again
Typical scenario
Browser Server
Picture of 1787’ Chateau d’Yquern
Picture of 1787’ Chateau d’Yquern
A wine store, again
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
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
Ask only missing stuff!If you know something won’t change for some time,
don’t ask for it until it does.
The I-wanna-know exampleSupose 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.
Improved scenario
Browser Server
A wine store, again
Improved scenario
Browser Server
Picture of 1787’ Chateau d’Yquern
A wine store, again
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.
Can we do it better?
Can we do it better?Yes!
Other techniques
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
No time for much more...
Except foryour dearest friend in WPO
Google Page Speed
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
Page Speed Desktop score
overall score for desktop
Page Speed Mobile score
overall score for mobile
Page Speed Critical path explorer
required files for the website , ordered in time
Page Speed Advise example
what files we can minimize
documentation
And a lot of things more.
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
Questions?I can’t bite you from this far!
Thank you!