Webcat October ’12

@abellonch/#webcat

1

Web performance optimization

for everyone

2

Albert Bellonch

@abellonch

/albertbellonch

albert@itnig.net

CTO

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”

4

Advantages

•Less server load

•Better SEO

•Better user experience

5

What’s in a web page?

6

What’s in a web page?

HTML markup

6

What’s in a web page?

HTML markup

CSS stylesheets

6

What’s in a web page?

HTML markup

Javascript code

CSS stylesheets

6

What’s in a web page?

HTML markup

Javascript code

CSS stylesheets

Images

6

What’s in a web page?

HTML markup

Javascript code

CSS stylesheets

Images

Fonts

6

What’s in a web page?

HTML markup

Javascript code

CSS stylesheets

Images

Fonts

much more

6

WPO Techniques

7

Request combination

8

Typical scenario

Browser Server

A wine store

9

Typical scenario

Browser Server

Home page CSS

A wine store

9

Typical scenario

Browser Server

Home page CSS

Wine list CSS

A wine store

9

Typical scenario

Browser Server

Home page CSS

Wine list CSS

A wine store

Wine details CSS

9

Typical scenario

Browser Server

Home page CSS

Wine list CSS

A wine store

Wine details CSS

...more CSS files

9

Combine it!In HTTP requests, a considerable amount of time is used when asking

for the information, instead of transmitting this information.

10

The lazy-boy-in-the-sofa example

11

Improved scenario

Browser Server

A wine store

All CSS files combined

12

Same for JavascriptAppliable with images: sprites

13

Can we do it better?

14

Can we do it better?Yes!

14

Resource minification

15

Typical scenario Uncompressed CSS (~56KB)

16

Minify it!Send only the essential information.

This way, less data is sent, and thus less time is spent transferring it.

17

The gibberish-conversation example

18

Improved scenario Compressed CSS (~25KB)

19

Similar for JavascriptMore complex with images

20

Can we do it better?

21

Can we do it better?Yes!

21

Image optimization

22

Typical scenario Unscaled picture

30 KB

23

Typical scenario Unscaled picture

But the real image is

30 KB

150 KB

23

Slim down the images!The images should have the same size as they are shown as,

and should be optimized too.

24

The gigantic-field example

25

Improved scenario Scaled picture

30 KB

26

Improved scenario Scaled picture

And the real image is

30 KB 30 KB

26

Can we do it better?

27

Can we do it better?Yes!

27

Caching

28

Typical scenario

Browser Server

A wine store, again

29

Typical scenario

Browser Server

Picture of 1787’ Chateau d’Yquern

A wine store, again

29

Typical scenario

Browser Server

Picture of 1787’ Chateau d’Yquern

Picture of 1787’ Chateau d’Yquern

A wine store, again

29

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

29

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

29

Ask only missing stuff!If you know something won’t change for some time,

don’t ask for it until it does.

30

The I-wanna-know example

31

Improved scenario

Browser Server

A wine store, again

32

Improved scenario

Browser Server

Picture of 1787’ Chateau d’Yquern

A wine store, again

32

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.

32

Can we do it better?

33

Can we do it better?Yes!

33

Other techniques

34

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

35

No time for much more...

36

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

Questions?I can’t bite you from this far!

38

Thank you!

39