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!

Translate to de es fr it pt ja

Trackbacks

No Trackbacks

Comments

Display comments as Linear | Threaded

No comments

Add Comment

Standard emoticons like :-) and ;-) are converted to images.
E-Mail addresses will not be displayed and will only be used for E-Mail notifications.
To leave a comment you must approve it via e-mail, which will be sent to your address after submission.

To prevent automated Bots from commentspamming, please enter the string you see in the image below in the appropriate input box. Your comment will only be submitted if the strings match. Please ensure that your browser supports and accepts cookies, or your comment cannot be verified correctly.
CAPTCHA

Markdown format allowed
Form options