Web performance optimization

for everyone

Albert Bellonch

@abellonch

/albertbellonch

albert@itnig.net

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!