Kent Alstad, VP of Acceleration for Radware, presents 10 different techniques for improving web performance, rating each by difficulty, risk and reward -- from his special Luncheon session at DevCon. Learn even more about the importance of web performance by reading our research report on the "State of the Union: Ecommerce Page Speed & Web Performance" http://www.radware.com/winter-sotu2014/

1. 10 Tips for High
Performance Web Sites
Kent Alstad
VP Acceleration
DevCon5 – December 2013

2. 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

3. 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

4. Tip #1: Understand the Performance Equation
•
Legend:
•
•
•
•
•
•
R:
RTT:
App Turns:
Concurrent Requests:
Cs:
Cc:
Response time
Round Trip Time
Http Requests
# server sockets open by browser
Server Side Compute time
Client Compute time
Slide 4

5. Tip #2: Learn to Read a Waterfall Chart
Slide 5

6. 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

7. 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

8. 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

9. The CDN Effect
9.5 seconds
63 roundtrips
5.7 seconds
63 roundtrips
Slide 9

10. 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

11. 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

12. Tip #6: In-line on Landing Pages
<img src="data:image/png;base64,iVBORw0KGgo
AAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBK
E0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" 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

13. 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

14. Tip #8: Html Caching
• Output Caching
• Cache Policies:
– varybyQueryString
– varybyHeaders
• Invalidation:
– CacheForTimePeriod
– CacheUntilChange
• Partial-Page Caching
Slide 14

15. 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

16. 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

17. Thank You
www.radware.com