10 Tips for High Performance Web Sites
-
Upload
radware -
Category
Technology
-
view
1.687 -
download
0
description
Transcript of 10 Tips for High Performance Web Sites
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