Frontend Caching, PHPTek 2011, Chicago

Frontend Caching

Helgi Þormar ÞorbjörnssonPHP Tek, Chicago, 26th May 2011

Thursday, 26 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

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

inline base64

Images

favicon

CSS Sprites

inline base64

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

chartbeat.com

Other Tools

WonderProxy.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/3401

@hhelgi@orchestra.io

Frontend Caching, PHPTek 2011, Chicago

Technology

Frontend performance

MediaMosa frontend

Frontend thunderdome

First-Class APIs, PHPTek 11, Chicago

MySQL Replication for Beginners for PHPTek 2015

PHPSpec & Behat: Two Testing Tools That Write Code For You (#phptek edition)

Frontend Workflow

Caching for Cash: Caching

PhpTek Ten Things to do to make your MySQL servers Happier and Healthier

Paweł Marczewskipywaw.org/media/slides/pywaw-50-caching-and-optimization-in-a-djang… · The website uses Django and PostgreSQL. No strong backend/frontend divide (yet). No huge

Frontend SPOF

Caching and Scaling WordPress using Fragment Caching

Caching in ASP - gangainstitute.com€¦ · Caching in ASP.NET •Caching is the most critical factor in creating scalable, high performance web application. •Caching Locations:

Hyperbolic Caching: Flexible Caching for Web Applications · Hyperbolic Caching: Flexible Caching for Web Applications Aaron Blankstein, Siddhartha Sen†, and Michael J. Freedman

Frontend Engineer Toolbox

Noria - USENIX...Frontend!4 Stories Votes 90% reads 10% writes JOIN COUNT FILTER Query. Backend Frontend!4 Stories Votes Slow reads, repeated work! ... upstream state Frontend. Frontend!12

Modern frontend workflow

Frontend Operations

McLab Tutorial Part 3 – McLab Frontend Frontend organization Introduction to Beaver Introduction to JastAdd 6/4/2011 Frontend-1McLab

glideinWMS Frontend Installation - Part 2 - Frontend Installation -glideinWMS Training Jan 2012