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 yea...
Realization
•

A Story: Frank Stanton from CBS Radio
– People are drawn to the clearest signal

latency is today’s static
...
Tip #1: Understand the Performance Equation

•

Legend:

•
•
•
•
•
•

R:
RTT:
App Turns:
Concurrent Requests:
Cs:
Cc:

Res...
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.git...
Tip #4: Compress Everything

• On for static ALL resources by default
• Compression on the server is expensive Use
1 NOT 9...
Tip #5: Use a CDN

• Use Microsoft or Google Free CDN sites for
common JS files like jQuery
– Google Hosted Libraries for:...
The CDN Effect

9.5 seconds
63 roundtrips

5.7 seconds
63 roundtrips
Slide 9
Tip #5: Browser Caching

• Best caching is on the client
– Use expires head to cache content on client

– Use short expiri...
Tip #6: Minification & Combination

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

• Online CSS Compressor:
– h...
Tip #6: In-line on Landing Pages

<img src="data:image/png;base64,iVBORw0KGgo
AAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQ...
Tip #7: AJAX-ify & Defer

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

• Use the CDN librar...
Tip #8: Html Caching

• Output Caching
• Cache Policies:
– varybyQueryString
– varybyHeaders

• Invalidation:
– CacheForTi...
Tip #9: Data Layer Caching

• Concurrency in the Middle Tier is
main issue
– What happens when you’re wrong?
– Tip: Use sh...
Tip #10: Use Automated FEO

•
•
•
•
•
•
•
•

Finger Printing
Combining
JavaScript Deferral
CDN integration Automation
Prog...
Thank You
www.radware.com
Upcoming SlideShare
Loading in...5
×

10 Tips for High Performance Web Sites

1,781

Published on

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/

Published in: Technology, Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,781
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
27
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

10 Tips for High Performance Web Sites

  1. 1. 10 Tips for High Performance Web Sites Kent Alstad VP Acceleration DevCon5 – December 2013
  2. 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. 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. 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. 5. Tip #2: Learn to Read a Waterfall Chart Slide 5
  6. 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. 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. 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. 9. The CDN Effect 9.5 seconds 63 roundtrips 5.7 seconds 63 roundtrips Slide 9
  10. 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. 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. 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. 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. 14. Tip #8: Html Caching • Output Caching • Cache Policies: – varybyQueryString – varybyHeaders • Invalidation: – CacheForTimePeriod – CacheUntilChange • Partial-Page Caching Slide 14
  15. 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. 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. 17. Thank You www.radware.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×