© 2011 Cognifide Limited. In commercial confidence only.

Client-side performance testing

Jacek Maciejewski

QA Engineer

© 2011 Cognifide Limited. In commercial confidence only.

• What is client-performance?• Tools• Continuous testing

Agenda

© 2011 Cognifide Limited. In commercial confidence only.© 2011 Cognifide Limited. In commercial confidence only.

Client-side performance

© 2011 Cognifide Limited. In commercial confidence only.

What is it?

• simply: time it takes for browser to render a page

• influenced by:− number of assets− javascripts− server configuration

© 2011 Cognifide Limited. In commercial confidence only.

Why is it important?• influences how a user see a page / brand• 25% of people abandon the page if it does not load

within 4 seconds• every extra secont of loading equals 7% less conversion

rate• Amazon would lose 1.6 billion$ per year if their website

loads 1 second longer• Google would get 8 mln requests less every day if it was

slower by 0.4 second.• Making Barack Obama’s website 60% faster increased

donation conversions 14%• Google’s page rank is partially determined based on

performance

© 2011 Cognifide Limited. In commercial confidence only.© 2011 Cognifide Limited. In commercial confidence only.

Tools

© 2011 Cognifide Limited. In commercial confidence only.

Tools

• Firebug / Developer Tools• Google Page Speed• Yslow• Gtmetrix.com (YSlow and PS together)• Google Speed Tracer• ajaxDynaTrace• WebPageTest.org

• https://developers.google.com/speed/

© 2011 Cognifide Limited. In commercial confidence only.

Tools – browser timings

• window.performance.timing• W3C standard• supported in every modern browser

© 2011 Cognifide Limited. In commercial confidence only.

© 2011 Cognifide Limited. In commercial confidence only.© 2011 Cognifide Limited. In commercial confidence only.

How to automate?

© 2011 Cognifide Limited. In commercial confidence only.

Automation

• Browser Timings are easy to use with Selenium WebDriver

• HAR Logs− From Firebug (Net panel + NetExport plugin)− From BrowserMob (proxy)− https://code.google.com/p/harstorage/

• possible to integrate Google PS with automation frameworks

• WebPageTest – API• performance logs from the newest Chrome Driver

(https://gist.github.com/klepikov/5457750)