• Like

10 Tips for High Performance Web Sites

  • 1,525 views
Uploaded 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 …

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/

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,525
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
26
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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