frontend caching - php day, italy, 2011

Frontend Caching

Helgi Þormar ÞorbjörnssonPhpDay, Italy, Verona, 14th May 2011

Saturday, 14 May 2011

Who am I?

VP of Engineering at Orchestra.io

Who am I?

Developer at PEAR

Who am I?

Developer at PEAR

From Iceland

Who am I?

Developer at PEAR

From Iceland

@h on Twitter

Pareto Principle

20% 80%

80 / 20 Rule

20% of the population receives 80% of the income

20% 80%

80 / 20 Rule

20% of causes produce 80% of the effects

80% of response time is

spent downloading resources

4 Rules of Web Performance

Weight

Processing

Perception

Make people think your site is fast

When people can interact with the site

“It all depends on how we look at things, and not how

they are in themselves.”

- Carl G. Jung

50% of users arrive

on an empty cache

Perception

Empty Cache Full Cache28.0K 1 HTML Document

1.9K 1 Style Sheet File

59.5K 4 Javascript Files

78.7K 24 Images

168.1K Total Size

30 HTTP Requests

2.4s Response Time

28.0K 1 HTML Document

0.1K 2 Images

28.1K Total Size

3 HTTP Requests

0.9s Response Time

Weight

HTTP Requests

Less is more

HTTP Requests

Less is more

Fewer HTTP Requests

HTTP Requests

Less is more

Fewer HTTP Requests

Easy to improve on

Cookies

Sent with static content

Cookies

Slow upstream speed

Cookies

Slow upstream speed

Big cookies

Experiment Time!

Cookie Size Response Time (Delta)

0 bytes 78 ms ( 0 ms)

500 bytes 79 ms ( +1 ms)

1000 bytes 94 ms (+16 ms)

1500 bytes 109 ms (+31 ms)

2000 bytes 125 ms (+47 ms)

2500 bytes 141 ms (+63 ms)

3000 bytes 156 ms (+78 ms)

Experiment Time!

500 bytes 79 ms ( +1 ms)

1000 bytes 94 ms (+16 ms)

1500 bytes 109 ms (+31 ms)

2000 bytes 125 ms (+47 ms)

2500 bytes 141 ms (+63 ms)

3000 bytes 156 ms (+78 ms)

Experiment Time!

500 bytes 79 ms ( +1 ms)

1000 bytes 94 ms (+16 ms)

1500 bytes 109 ms (+31 ms)

2000 bytes 125 ms (+47 ms)

2500 bytes 141 ms (+63 ms)

3000 bytes 156 ms (+78 ms)

Cookies

Remove unnecessary cookies

Cookies

Appropriate domain level

Cookies

Keep size low

Cookies

Keep size low

Set Expires

Parallel Downloads

Be aware of max connection limits

Parallel Downloads

CNAME to point multiple sub domains to the same IP

Parallel Downloads

CNAME to point multiple sub domains to the same IP

Parallel Downloads

Borrowed from BrowserScope.org

Parallel Downloads

Borrowed from BrowserScope.org

Parallel Downloads

One domain = 2 Parallel connections

Parallel Downloads

0.4 0.8 1.2 1.6 2 2.4 Secs

One domain = 2 Parallel connections

Parallel Downloads

0.4 0.8 1.2 1.6 2 2.4 Secs

Two domains = 4 Parallel connections

Parallel Downloads

Too many hostnames can cause complications

Parallel Downloads

Too many hostnames can cause complications

2 – 4 sub domains is a good average

Combine Files

Combining 6 scripts into 1 eliminates 5 requests

Combine Files

Combining 6 scripts into 1 eliminates 5 requests

Challenges: develop as separate modules combinations vs. loading more than needed

Javascript

Doesn’t comply with parallel download rules

Javascript

0.4 0.8 1.2 1.6 2 2.4 Secs

Doesn’t comply with parallel download rules

Javascript

script defer attribute is not a solution

Javascript

script defer attribute is not a solution

Solution - move them as low in the page as possible

Processing

Fake the delivery

Processing

Fake the delivery

Lazy Loading

Processing

Fake the delivery

Lazy Loading

Above the fold Loading

Processing

Fake the delivery

Lazy Loading

Above the fold Loading

Delay Javascript Loading

Processing

Bonus - async attribute

Processing

Bonus - async attribute

http://www.appelsiini.net/projects/lazyload

JS Minification

Crushes the file

Strips out all cruft

Voodoo Magic!

JS Minfication

UglifyJS

Google Closure

YUI Compressor

JS Minfication

UglifyJS

Google Closure

YUI Compressor

http://bit.ly/compression-rates

CSS Minification

YUI Compressor

minifycss.com

GZipGZip can be used on

GZip can be used on

GZip should not be used on

Images

Document formats

Images

Document formats

Already compressed

robots.txt

favicon

Images

favicon

Images

favicon

CSS Sprites

Images

favicon

CSS Sprites

Images

Badly optimised

Images

Badly optimised

Thumbnails

Images

Badly optimised

Thumbnails

PNGs compressed up to 50%

PNG Optimise

OptiPNG

pngwolf

pngcrush

jpegtran

Extra roundtrips

More resources for servers

Extra roundtrips

More resources for servers

Worth it, tho!

Tread the users’ path

Test on slower connections

Slow proxies

Tables / Phones

Airline connections

Tables / Phones

Airline connections

Public places

Single domain

Smart routing

Single domain

Smart routing

Data is closer to end user

CDN on a Budget

Query vs. Filenamerevisions

Cache far in future

Revisioning forces downloads

Cache far in future

Revisioning forces downloads

Query revisions

Easy and convenient

Query revisions

Easy and convenient

Usually not recommended

Query revisions

Easy and convenient

Usually not recommended

Bad proxies are a problem

Filename revisions

Requires more work

Filename revisions

Requires more work

Recommended

Filename revisions

Requires more work

Recommended

During build, using md5 hash

Compromise

CompromiseCreate a version function

Put on all resources

mod_rewrite magic

Compromise

http://bit.ly/query_rev_comp

Create a version function

mod_rewrite magic

Browser Tools

Firebug

Browser Tools

Firebug

Browser Tools

Firebug

PageSpeed

Browser Tools

Firebug

PageSpeed

Chrome Inspector

Other Tools

HTTPWatch.com

Other Tools

HTTPWatch.com

WebPageTest.org

Other Tools

HTTPWatch.com

WebPageTest.org

HTTPArchive.org

Other Tools

HTTPWatch.com

WebPageTest.org

HTTPArchive.org

Yottaa.com

Other Tools

WonderProxy.com

Other Tools

WonderProxy.com

pagespeed.googlelabs.com

Other Tools

WonderProxy.com

BrowserScope.com

Other Tools

WonderProxy.com

BrowserScope.com

html5boilerplate.com

“Knowledge rests not upon truth alone, but upon error also”

- Carl G. Jung

Questions?

Joind.in: http://joind.in/2987

helgi@orchestra.ioTwitter: @h

frontend caching - php day, italy, 2011

Technology

frontend spof

frontend controllers

caching and scaling wordpress using fragment caching

signal chain frontend subsystem interface control...

php in the enterpriseblog.preinheimer.com/talks/php in the...

caching for cash: caching

website frontend

intro to caching,caching algorithms and caching frameworks

frontend operations

frontend workflow

client-side page element web caching · the main objective...

frontend build tools | competence center frontend & ux,...

the new time series...

pﬀf: parsing phpchapter 1 introduction 1.1 why another php...

microsoft asp.net: an overview of caching. 2 overview ...

the netherlands market update · frontend & php specialist...

web caching - university of california, san diego · web...

object-oriented programming with php5 programming with php5...

frontend caching, phptek 2011, chicago

paweł...