Skip to content

usergroup - meetup - webPerformance - hamburg 130220

Attraktor e.v. mexikoring 21, hamburg

Soundcloud - Arbo Von Monkiewitsch

html5 audio playback widget - measuring for velocity

measure first

how to?

  • synthetic user monitoring (by phantom.js)
    • repeaable
    • doesn't show real user experience
    • good for benchmarking
  • real user monitoring (google analytics)
    • shows real user experience
    • change of user behavior impacts repeateability (e.g. side slow in asia but fast in euro)
    • impact of embedding site

what?

  • http ping
  • fully page load
  • include all transactions
  • follow K.I.S.S., just render the page

define your goals

  • what is fast
  • don't define random goals on yourself
  • public benchmarks are good as orientation (for e.g. set up a benchmark for youtube or similar)
  • response time
  • don't simple trust your metrics

best practices

  • httparchive, pagespeed, yslow (100 - 200 ms as full page loading speed is good enough)
  • compress each connection (use varnishs or something similar for uncompressable content)
  • availability fallback -> dc
  • performance - put api in cdn (also for http or https handshake)
  • consitency - load balanced cdns

rap it up

  • measure first
  • keep it simple
  • team autonomy

phantomJs - Raj Dudi

http://rajdudi.com

what it is - created by ariya hidayat

  • can be integrated into jenkins
  • automation and headless testing
  • can be used for metrics measurement
  • render and dump client side html
  • current version is 1.8
  • headless (Qt)Webkit/Browser
  • javascript driven
  • ideal for
    • headless website testing -> but it is not a test framework
    • screen capture
    • page automation
    • network monitoring
  • projects
    • casperjs
    • ghostbusters
    • poltergeist

code evaluation

  • evaluate(function, arg1, arg2, ...) {object}
  • returns simple objects but no functions and closures
  • execution is sandboxed
  • dom scripting and css selector works
  • use onConsoleMessage callback to receive the console messages

get it from

  • phantomjs.org
  • github.com/ariya/phantomjs
  • https://aur.archlinux.org/packages/phantomjs/

examples

https://github.com/ariya/phantomjs/tree/master/examples

hello world

console.log("Hello world"); phantom.exit();

screen capture

  • Page.render to render a screenshot
  • supports ong, jpeg, gif and pdf
  • options
    • page.clipRect = { top: 14, left: 3, width: 400, height: 300 };
    • page.paperSize = { width: '200px', height: '300px' } //for pdf output e.g., also supports borders and much more
    • page.zoomFactor = 0.25 // 1 is default
  • projects based on phantomjs
    • screenr
    • mediaqueri
    • chromanope
  • webpage api
    • var page = require('webpage').create();
    • page.open(url, callback) {void}
    • page.close() {void}
    • goBack(), goForward(), title, url
    • settings{object} //enable javascript, load images, username or password, websecurity
    • page.includeJs(url, callback) {void}
    • page.injectJs(filename) {boolean}
  • webpage callbacks
    • onLoadStarted
    • onLoadFinished
    • onAlert
    • onCallback //experimental
    • onClosing
    • onConfirm
    • onConsoleMessage
    • onError
  • system API
    • var system = require('system');
    • ...
  • filesstem api
    • var fs = require('fs);
    • separator {string}
    • workingDirectory
    • ...

troubleshooting

  • allows network sniffing
    • onResourceRequested
    • onResoureceReceived
    • TLS and SSL required for encrypted data - are they enabled?
  • error handling

cons

  • uses qtWebKit (not used by chrome, safari and so one)
  • asynchronous api - difficult to handle for many
  • not supported
    • plugins
    • webGL
    • video and audio
    • css 3-D
    • xpath

What could i add? Thanks to the talks, yes very much. Also thanks to the attraktor, you are doing it right!