Web Compatibility and Performance Testing in a Multi-Browser WorldImad Mouline, CTO, Gomez (@imadmouline)Buddy Brewer, Director of Engineering, Agent Technology, Gomez (@bbrewer)

AgendaThe problem and the upsideFunctional validation across browsersPerformance optimization across browsersRaw vs. perceived performanceKey takeaways and Q&A

The ProblemBuilding applications is more complexDevelopers now support an interrelated mess of technologies that differ from browser to browserNetworking stackJS engineRendering technologies (CSS, Canvas, SVG)

The UpsideBrowsers provide better performance, richer functionalityThe rate of change is accelerating, with competition between vendors leading to massive gains in performance

How?We need to understand how our applications perform in real browsers on the real networkWe need to know both what users encounter and what they perceive

Asymmetric Advantages of Modern BrowsersDramatically faster JS enginesGreater connection parallelismClient side storageNative CSS selectors2D compositing (Canvas, SVG)

Testing PresentationBespin determines browser Canvas support at runtimeWhich browsers provide adequate support?

Yes: Firefox 3.5, Safari 4

No: Firefox 2, Safari 3, Any IE

Maybe: Chrome

Functional ValidationAs new versions ship, do the expected browsers still work?As new browsers are released, do our applications still work?

Revisiting Performance OptimizationAre our old techniques still relevant as the browsers we target evolve?Example: Domain shardingLegacy browsers allow 2 connections per hostnameDomain sharding increases parallelism to boost static object performance via pointing multiple hostnames to the same host

Optimizing IE6 BehaviorFor older browsers, this could represent an easy 50% load time savings

Optimizing IE6 BehaviorWhat’s the catch?

De-optimizing IE8 BehaviorIn IE8 (and Firefox and Safari and Chrome) using domain sharding leads to a glut of simultaneous connection creation and a dramatic performance hit

LessonsOptimization techniques must evolve along with the browsersSo, performance testing should take into account browser differencesAnd to do that, we need to know what browsers are visiting our site

Performance Differences by BrowserDifference between quickest and slowest browser load time equals 13.226 secondsLarge sample of US end-users, on broadband connections, visiting a particular page on a web site over a 48 hour period

Difference between quickest and slowest browser load time equals 13.226 seconds

Large sample of US end-users, on broadband connections, visiting a particular page on a web site over a 48 hour period

Load Time vs. Perceived Render TimeLoad time for MS Internet Explorer higher than FirefoxPerceived render time for MS Internet Explorer lower than FirefoxPerceived render time is the amount of time needed for the page layout to stabilize and for all content visible to the end-user above the fold to be completely rendered

Load time for MS Internet Explorer higher than Firefox

Perceived render time for MS Internet Explorer lower than Firefox

Perceived render time is the amount of time needed for the page layout to stabilize and for all content visible to the end-user above the fold to be completely rendered

Optimizing Perceived Render Time & User ExperienceMost prominent image on site loads almost lastChanging load order will not impact raw page performance, but will improve perceived render time and user experience

What is the download order?

Factors that impact object download orderBrowser type / versionHost latency, concurrency differencesGeographyGeography???

San Jose

Boston

Browser Cache Impact Cache LevelPage Load Time

Takeaways – SummaryKnow your end-usersIdentify where and how they use your application, how they connect to the network, when they do it, where they do it from, what browser they use, etc…Deliver on their expectationsKnow your entire applicationBuild performance into your processImprove raw, workflow, and perceived performanceContinuously evaluate your performance targetsMeasure what mattersMeasure from your end-users’ perspectiveAlign your end-users’ web experience with your requirements and ultimate business goals

Please complete an evaluation.

Questions?