Front-End Performance Testing

Lei Liu

Topics

  • Performance is Important
  • Following best practice from beginning
  • Performance Metrics for Customer
  • How To Measure
  • Monitor System Design
  • Best Practice
  • Q/A

Performance is important!

performance benifit numbers
bad performance UE
WPO benifit
How to do WPO
front side No1
14 rules

Maximizing Parallel Downloads

Our rule of thumb is to increase the number of parallel downloads by using at least two, but no more than four hostnames. Once again, this underscores the number one rule for improving response times: reduce the number of components in the page.

hard but doable

Front-end Metrics

progressive render
progressive render example

Four stages in the front-end execution process are commonly noted:

  • Time to Title
  • Time to Start Render
  • Time To Display
  • Time to Interact

Time to Title

Time To Title is the time elapsed from the moment a visitor’s browser requests your site to the moment that your site’s title appears in the tab of his or her browser.

Time To Title is largely dictated by your backend performance—that is, how fast your website’s content is delivered from your origin server to the visitor’s browser.

Time To Title is the first indication to the visitor that your site exists and is on the way. When users see the title appear promptly they are apt to be patient throughout the load process.

Time to Start Render

Time to Start Render is the time elapsed from the request to when the visitor sees actual website content appear on the page.

Nobody likes staring at a blank page. Assuring visitors that they are in the right place and will be soon seeing the content they expect will promote a good perception of your website.

Time To Display

Time To Display is the time elapsed from the request to when the browser has finished parsing the HTML page, constructed the Document Object Model (DOM), and displayed the HTML document.

This all means that the page will look like a web page, but there may be some images, interactive elements, and other media that haven’t fully loaded.

Time To Interact

Time To Interact is the time elapsed from the request to the moment the user can interact with the page.

This does not mean that the page is fully loaded, as there may be scripts, trackers, and other assets that continue to load in the background. But it does mean that the almighty visitor can use the web page, and that’s an important moment. Many site owners choose Time To Interact as the principle index for overall web performance because of its relationship with user experience.

If you cannot measure it, you cannot improve it.

Solutions - Level 1

  • Your own scripts with curl, wget..
    • curl -o /dev/null -s -w "%{time_total}" "http://www.google.com/"
  • AB Apache Bench
    • ab -n 10 -c 10 http://www.google.com/
  • HTTPPerf
    • httperf --hog --server=www.google.com --num-conns=100 --rate=10 --timeout=5

Solutions - Level 2

  • JMeter (Java based)
    • Quite good, Nice GUI, distributed!
    • But JVM mem and consumption!

Solutions - Level 2

  • Gatling-Tools
    • JVM, scala, looks promising..using the akka actor principle for concurrency - instead of normal threads - similar to erlang

Solutions - Level 3

  • YSlow/PageSpeed
    • Chrome/Firefox Plugin
    • Analyze according to best practice design and coding rules.

Solutions - Level 3

  • WebPageTest
    • www.webpagetest.org / private instance
    • Run a free website speed test from multiple locations around the globe using real browsers (IE and Chrome) and at real consumer connection speeds.

Solutions - Level 3

  • PhantomJS
    • PhantomJS is a headless WebKit scriptable with a JavaScript API.
    • confess.js - A small script library that uses PhantomJS 1.2 (or later) to headlessly analyze web pages.

Solutions - Level 4

  • TcpCopy
    • TCPCopy是一种请求复制(所有基于tcp的packets)工具,可以把在线流量导入到测试系统中去。 曾经应用于网易的广告投放系统,urs系统,nginx hmux协议等系统,避免了上线带来的很多问题。 现在此工具已经广泛应用于各大互联网公司。

Solutions - Level 4

  • Get Data from Real Customer ---- Inject JS Into Page
    • boomerang ---- boomerang is a piece of javascript that you add to your web pages, where it measures the performance of your website from your end user's point of view. It has the ability to send this data back to your server for further analysis. With boomerang, you find out exactly how fast your users think your site is.

Monitor System Desing

Best Practice

Q/A

THE END

BY Lei Liu