10 Tips for High Performance Web Sites

Like this? Share it with your network

Share

10 Tips for High Performance Web Sites

  • 2,271 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
2,271
On Slideshare
2,170
From Embeds
101
Number of Embeds
1

Actions

Shares
Downloads
26
Comments
0
Likes
4

Embeds 101

https://twitter.com 101

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