front end optimization [cloud connect 2012]

Front End Optimization

CloudConnect 2012

1

Hooman BeheshtiVP Technology, Strangeloop

[email protected]

© 2010 Strangeloop Networks Strangeloop. Faster Websites. Automatically. 2

Web Application Acceleration

• Means lots of things to lots of people– TCP Optimization– Caching– HTTP Protocol Optimization– Compression– Etc

• We’ll focus on “Front End Optimization” (FEO)– Sometimes called WCO or WPO


What is FEO?

0 6 12


What is FEO?

0 6 12

DNS TTFB

TCP Connectio

n

Download


What is FEO?

0 6 12

Back End: The time from when the request is made by the browser to last byte of the HTML response

Front End: Everything after the HTML arrives

Important Timers:

Start Render

onLoad (Document Complete)


Waterfall tools: webpagetest.org


Waterfall tools: HTTPWatch


Waterfall tools: Firebug


Waterfall tools: WebKit Dev Tools


Waterfall tools: PCAP2HAR


Performance problems

• Too many round trips– Latency adds up

• Too many bytes– Last mile bandwidth isn’t

infinite

• Poor caching– Coming back to the page

must be much faster

• Poor rendering– Browser work takes time


Fix it!!

• Reduce round trips– Use consolidation techniques

• Image Sprites• JS/CSS consolidation/concatenation• Inlining• MHTML (IE only)• Etc

– Browser makes one request to the “package”– HTML is marked up to look for the individual

resources inside the package


Fix it!!

• Reduce bytes– HTTP compression– JS/CSS minification– Image compression

• Lossless• Lossy

– Anything that can reduce bytes will help make the page faster


Fix it!!

• Do good (browser) caching!– Long expiry on static objects– Reasons why we don’t do good caching

• Caching rules are sometimes complicated• Invalidation is still a huge issue – we never want to

serve stale content

– A proper caching solution must have a robust invalidation framework


Fix it!!

• Address rendering issues– Things get more complicated here– The order of events matters to how fast a page

renders on the browser– JavaScript and CSS

• JS deferral• Asynchronous JS• Order of elements in the page

– Above the fold vs below the fold


Sounds really easy!

• It’s not!

• Some techniques are just difficult to implement

• Optimizing for performance sometimes requires significant dev resources– Mortal companies can’t afford to sacrifice new

feature cycles

• Maintenance and upkeep is a constant problem– Every version to roll out will need optimization


FEO automation industry

• Solutions available to automatically do this stuff

• Multiple deployment options– Software/Hardware/Service– Cloud apps will use either service or software

• The goal is to “fix the code” for performance, automatically


It gets complicated

• Rewriting HTML can break pages

• You have to do this stuff based on browser– Play to the strength of each browser (supported

techniques, etc)– Stay away from their weaknesses (bugs,

undocumented issues, etc)– Let’s not forget about mobile

• Optimizing once per page isn’t enough– First view (cold cache)– Repeat view (warm cache)– User flow


When looking for FEO automation…

• Do your research, and understand your needs.

• Understand the deployment model and how disruptive it will be to you, if at all.

• Are there provisions in place for breaking pages?

• Browser-based optimization, mobile, first/repeat views, transaction flows.

• Choose what’s right for you, based on your needs.

Thank you.

20

[email protected]

strangeloopnetworks.comwebperformancetoday.com

front end optimization [cloud connect 2012]

Technology

faster websites

browserbased optimization

waterfall tools

good browser caching

end optimization feo

browser javascript

browser play

good caching caching