Download pdf - Frontend caching - PHP Day, Italy, 2011

Frontend Caching

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

Saturday, 14 May 2011

Who am I?


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%


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

Time

Processing

Perception


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


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


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


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


Cookies


Cookies

Remove unnecessary cookies


Cookies


Appropriate domain level


Cookies



Keep size low


Cookies



Keep size low

Set Expires


Parallel Downloads


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

HTML

Image

Image

Image

Image

Image

Image

Image

Image

0.4 0.8 1.2 1.6 2 2.4 Secs

One domain = 2 Parallel connections


Parallel Downloads

HTML

Image

Image

Image

Image

Image

Image

Image

Image

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

HTML

JS

Image

Image

Image

Image

Image

Image

Image

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


Processing


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


Processing

Bonus - async attribute


Processing

Bonus - async attribute

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




JS Minification


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

OOCSS


GZipGZip can be used on


GZip

JS

GZip can be used on


GZip

JS

CSS

GZip can be used on


GZip

JS

CSS

XML

GZip can be used on


GZip

JS

CSS

XML

JSON

GZip can be used on


GZip

GZip should not be used on


GZip

Images



GZip

Images

Document formats



GZip

Images

Document formats

Already compressed



404

robots.txt

favicon


Images


Images

favicon


Images

favicon

CSS Sprites


Images

favicon

CSS Sprites


Images


Images

Badly optimised


Images

Badly optimised

Thumbnails


Images

Badly optimised

Thumbnails

PNGs compressed up to 50%


PNG Optimise

OptiPNG

pngwolf

pngcrush

jpegtran


Time


SSL


SSL

Extra roundtrips


SSL

Extra roundtrips

More resources for servers


SSL

Extra roundtrips

More resources for servers

Worth it, tho!


Tread the users’ path



Test on slower connections



Test on slower connections

Slow proxies





Tables / Phones



Tables / Phones

Airline connections



Tables / Phones

Airline connections

Public places


CDN


CDN

Single domain


CDN

Single domain

Smart routing


CDN

Single domain

Smart routing

Data is closer to end user


CDN


CDN


CDN on a Budget


CDN on a Budget

S3


Query vs. Filenamerevisions



Cache far in future



Cache far in future

Revisioning forces downloads



Cache far in future

Revisioning forces downloads


Query revisions


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


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


Browser Tools

Firebug


Browser Tools

Firebug

YSlow


Browser Tools

Firebug

YSlow

PageSpeed


Browser Tools

Firebug

YSlow

PageSpeed

Chrome Inspector


Other Tools


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


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

[email protected]: @h


http://joind.in/3340

http://joind.in/3340

mailto:[email protected]

mailto:[email protected]