10 Tips for High

Performance Web Sites

Kent Alstad

VP Acceleration

DevCon5 – December 2013

Who Am I

• Background – First laid hands on a microcomputer in 1977, its been downhill since

then

– Spent the last 15 years helping companies scale applications on a

variety of platforms

• Currently – VP Acceleration at Radware

– Co-Founder of Strangeloop Networks (acquired by Radware)

– Pioneer in the Web Acceleration (with numerous patents)

– Developer and Architect of FastView

• lately I am into ….

– Single Page Applications (Angular, Knockout)

– C++, C, C#, JavaScript, Css, Html5, NodeJs

Slide 2

Realization

• A Story: Frank Stanton from CBS Radio

– People are drawn to the clearest signal

latency is today’s static

Performance is a core value of the internet

Slide 3

Tip #1: Understand the Performance Equation

• Legend:

• R: Response time

• RTT: Round Trip Time

• App Turns: Http Requests

• Concurrent Requests: # server sockets open by browser

• Cs: Server Side Compute time

• Cc: Client Compute time

Slide 4

Tip #2: Learn to Read a Waterfall Chart

Slide 5

Tip # 3: Measure FIRST

• Real End User Monitoring – Beacon technique

– Episodes (Souders), , Boomerang (http://yahoo.github.com/boomerang/doc/), Google Analytics Timing JS (http://www.google.com/analytics/ ), Omniture

• Synthetic Measurement – Automates and instruments a browser

– Web Page Test: Apples to apples comparisions

• APM Vendors – Includes backend server agents + beacons

– Gomez (DynaTrace), Radware APM, New Relic, AppDynamics

• Diagnostic Tools – In browser tools: Google developer, IE9 Waterfall

– Fiddler (http://www.fiddler2.com/), HTTP Watch, DynaTrace

• Performance Standards from W3C – Web Timings Spec

– IE9, Chrome, and Firefox

– https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html

Slide 6

Tip #4: Compress Everything

• On for static ALL resources by default

• Compression on the server is expensive Use

1 NOT 9

• JavaScript browser test

– Set header with compress JavaScript

Slide 7

Tip #5: Use a CDN

• Use Microsoft or Google Free CDN sites for

common JS files like jQuery – Google Hosted Libraries for: AngularJS, Chrome Frame,

Dojo, Ext Cor, jQuery, jQueryUI MooTools, Prototype,

script.aculo.us, SWFObject, Web Font Locator

– Microsoft Ajax Content Delivery Network: jQuery,

Modernizr, Ajax Control ToolKit and more…

• Use CloudFront from Amazon, NetDNA,

Level3, CloudFlare, and many more.

Slide 8

The CDN Effect

Slide 9

9.5 seconds

63 roundtrips

5.7 seconds

63 roundtrips

Tip #5: Browser Caching

• Best caching is on the client

– Use expires head to cache content on client

– Use short expiries if necessary

– Use finger-printing/versioning if possible

• Turn it on

– Get disciplined about renaming files

• Be careful with long lived cache-header values, the safe limit is 2^31

– Use one year far-future expiry

Slide 10

Tip #6: Minification & Combination

• Online Javascript Compressor: – http://jscompress.com/

• Online CSS Compressor: – http://shygypsy.com/cssCompress/

• Use better build scripts

– e.g. ASPX ScriptManager.CompositeScript

Slide 11

Tip #6: In-line on Landing Pages

<img src="data:image/png;base64,iVBORw0KGgo AAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" /]]>

ul.checklist li.complete {

padding-left: 20px;

background: white url('data:image/png;base64, Az3D/ …. McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/’)

no-repeat scroll left top; }

• Support differs by browser

• Eliminate resources files by embedding them into the main page

• Implementations vary between browsers

• Embedded objects into your CSS

• Test every browser variation

Slide 12

Tip #7: AJAX-ify & Defer

• Changing the timing on rendering – Getting users to a usable page sooner

• Use the CDN libraries

• You need to rethink your page design

–Defer unnecessary JavaScript until after

onload event

Slide 13

Tip #8: Html Caching

• Output Caching

• Cache Policies: – varybyQueryString

– varybyHeaders

• Invalidation: – CacheForTimePeriod

– CacheUntilChange

• Partial-Page Caching

Slide 14

Tip #9: Data Layer Caching

• Concurrency in the Middle Tier is

main issue

– What happens when you’re wrong?

– Tip: Use short timed expiry

Slide 15

Tip #10: Use Automated FEO

• Finger Printing

• Combining

• JavaScript Deferral

• CDN integration Automation

• Progressive Image Rendering

• Heuristic based Preloading

• Treatment by Browser

• Keep up with the latest trends

Slide 16

Thank You www.radware.com