Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
582 lines (483 sloc) 14.4 KB
\documentclass{beamer}
\mode<presentation>
{
\usetheme{Warsaw}
\setbeamercovered{transparent}
}
\beamertemplatenavigationsymbolsempty
\setbeamercolor{title in head/foot}{bg=orange!90!black,fg=white}
\setbeamercolor{subsection in head/foot}{bg=black!95,fg=white}
\setbeamercolor{structure}{fg=black}
\setbeamertemplate{blocks}[rounded][shadow=false]
\setbeamertemplate{footline}%
{%
\leavevmode%
\hbox{\begin{beamercolorbox}[wd=.5\paperwidth,ht=2.5ex,dp=1.125ex,leftskip=.3cm plus1fill,rightskip=.3cm]{author in head/foot}%
\usebeamerfont{author in head/foot}\insertdate%
\end{beamercolorbox}%
\begin{beamercolorbox}[wd=.5\paperwidth,ht=2.5ex,dp=1.125ex,leftskip=.3cm,rightskip=.3cm plus1fil]{title in head/foot}%
\usebeamerfont{title in head/foot}\insertshorttitle%
\end{beamercolorbox}}%
\vskip0pt%
}%
\usepackage[english]{babel}
\usepackage[latin1]{inputenc}
\usepackage{times}
\usepackage[T1]{fontenc}
\usepackage{ulem}
\author{Philip Tellis / \texttt{philip@bluesmoon.info}}
\title{Measuring the web with boomerang}
\date{\href{http://foss.in/2010/}{FOSS.IN/2010} -- 2010.12.15}
\pgfdeclareimage[height=0.5cm]{bluesmoon-logo}{../ui/default/bodybg}
\pgfdeclareimage[height=11pt]{cc-licence}{../by-nc-sa-3.0-88x31}
\logo{\pgfuseimage{cc-licence}}
\begin{document}
\begin{frame}
\titlepage
\end{frame}
\setbeamertemplate{background}{
\parbox[c][\paperheight]{\paperwidth}{
\hfill \pgfimage[height=\paperheight]{../bluesmoon}
}
}
\begin{frame}{\textit{\$ finger philip}}
\begin{itemize}
\item Philip Tellis
\item \small{\texttt{philip@bluesmoon.info}}
\item \href{http://twitter.com/bluesmoon}{@bluesmoon}
\item geek - paranoid - speedfreak
\item yahoo
\item \href{http://bluesmoon.info/}{http://bluesmoon.info/}
\end{itemize}
\end{frame}
\setbeamertemplate{background}{}
\section{Introduction}
\label{sec:intro}
\subsection{Time}
\setbeamertemplate{background}{
\parbox[c][\paperheight]{\paperwidth}{
\hfill \vfill \pgfimage[height=.8\paperheight]{waterfall}
}
}
\begin{frame}{}
\end{frame}
\setbeamertemplate{background}{
\parbox[c][\paperheight]{\paperwidth}{
\hfill \vfill \pgfimage[height=.8\paperheight]{waterfall-server}
}
}
\begin{frame}{}
\end{frame}
\setbeamertemplate{background}{
\parbox[c][\paperheight]{\paperwidth}{
\hfill \vfill \pgfimage[height=.8\paperheight]{waterfall-all}
}
}
\begin{frame}{}
\end{frame}
\setbeamertemplate{background}{}
\begin{frame}{}
\begin{center}
Less than 20\% of page load time is something we can measure and fix during development
\end{center}
\end{frame}
\begin{frame}{}
\begin{center}
It's what we can't control that bites us
\end{center}
\end{frame}
\subsection{The adversary}
\begin{frame}{Too many variations}
\begin{center}
\LARGE{
\only<1>{browsers}
\only<2>{plugins}
\only<3>{OSes}
\only<4>{viruses}
\only<5>{antiviruses}
\only<6>{microwaves}
\only<7>{baby monitors}
\only<8>{naughty neighbours}
\only<9>{file shares}
\only<10>{governments}
\only<11>{rodents}
}
\only<12>{Try simulating all that in the lab!}
\end{center}
\end{frame}
\subsection{Measure twice}
\begin{frame}{}
\begin{center}
We need to measure real end-user performance
\end{center}
\end{frame}
\begin{frame}{}
\begin{center}
We need to measure real end-user performance from the real end-user's box
\end{center}
\end{frame}
% http://www.flickr.com/photos/21233184@N02/4389412851/
\setbeamertemplate{background}{
\parbox[c][\paperheight]{.8\paperwidth}{
\vfill \hfill \pgfimage[height=.9\paperheight]{ask-the-user}
}
}
\begin{frame}{}
\begin{center}
\end{center}
\end{frame}
\setbeamertemplate{background}{}
\begin{frame}{}
\begin{center}
While this might work, it isn't necessarily representative
\end{center}
\end{frame}
\begin{frame}{}
\begin{center}
What about JavaScript?
\end{center}
\end{frame}
\subsection{boomerang}
\begin{frame}
\begin{block}{boomerang is...}
A piece of javascript that you add to your web page where it measures and beacons back to you, the end user's perceived performance of your page
\end{block}
\end{frame}
\begin{frame}[fragile]{How?}
\begin{verbatim}
<script src="boomerang.js" type="text/javascript">
</script>
<script type="text/javascript">
BOOMR.init({
user_ip: "<user's ip address>",
beacon_url: "http://mysite.com/beacon.php"
});
</script>
\end{verbatim}
\end{frame}
\begin{frame}{What does it do?}
\begin{itemize}
\item Measures user's network throughput and latency to your server
\item Measures the current page's load time
\item Beacons these results back to your server
\end{itemize}
\end{frame}
\section{How does it work?}
\label{sec:internals}
\begin{frame}{}
\begin{center}
How does boomerang work?
\end{center}
\end{frame}
\begin{frame}{}
\begin{center}
Let's take that one at a time
\end{center}
\end{frame}
\subsection{Latency}
\begin{frame}{Measuring latency}
\begin{itemize}
\item Download a 32 byte gif 10 times in sequence
\item Measure the time to download each
\item Discard the first measurement because it's overpriced
\item Calculate the arithmetic mean, standard deviation and margin of error of the rest
\end{itemize}
\end{frame}
\begin{frame}{Wait, did you say overpriced?}
\begin{itemize}
\item The first image might require a DNS lookup and TCP handshake
\item Slow start is not an issue since 32 bytes fit in 1 packet
\end{itemize}
\end{frame}
\subsection{Bandwidth/Throughput}
\begin{frame}{Measuring throughput}
\begin{itemize}
\item After the latency test is done, we download progressively larger images
\item Stop at the first image that times out
\item Redownload that image a few more times
\item Calculate the median, standard deviation and margin of error of the largest images
\end{itemize}
\end{frame}
\begin{frame}{Measuring latency before throughput helps here}
\begin{itemize}
\item Those 10 latency images do a lot to widen the TCP window size
\item The bandwidth images make much better use of available bandwidth
\item The image we end with uses the most bandwidth
\end{itemize}
\end{frame}
\subsection{Load time}
\begin{frame}{How do we measure page load time?}
\begin{itemize}
\item In the \texttt{onbeforeunload} event, measure the time and store it in a cookie
\item In the \texttt{onload} event, check the cookie, and measure the difference with the current time
\item We also make sure that the page that set the cookie is the referrer of the current page
\end{itemize}
\end{frame}
\begin{frame}{What? Two pages?}
\begin{center}
Yes, this needs two pages and cookies. If those aren't supported, we try to use the WebTiming API.
\end{center}
\end{frame}
\subsection{Accuracy}
\begin{frame}{How accurate is it?}
\begin{itemize}
\item Latency measurements are very accurate (\(\pm 1\%\))
\item Bandwidth is to an order of magnitude. For bad connections can be \(\pm 30\%\)
\item Page load time sometimes has outliers, you need post-filtering
\item The margin of error tells you how good your data is
\end{itemize}
\end{frame}
\section{Contributing to boomerang}
\begin{frame}{Github}
\begin{center}
\href{https://github.com/yahoo/boomerang/}{https://github.com/yahoo/boomerang/}
\end{center}
\end{frame}
\setbeamertemplate{background}{
\parbox[c][.5\paperheight]{\paperwidth}{
\vfill \hfill \pgfimage[width=\paperwidth]{fork-project}
}
}
\begin{frame}{Get the code}
\end{frame}
\setbeamertemplate{background}{}
\begin{frame}{Get the code}
\begin{center}
\texttt{git clone git@github.com:yourname/boomerang.git}
\end{center}
\end{frame}
\setbeamertemplate{background}{
\parbox[c][.5\paperheight]{\paperwidth}{
\vfill \hfill \pgfimage[width=\paperwidth]{pull-request}
}
}
\begin{frame}{Submit code}
\end{frame}
\setbeamertemplate{background}{}
\begin{frame}{boomerang.js}
\end{frame}
\begin{frame}{plugins}
\begin{center}
\texttt{cp plugin.js yourplugin.js}
\end{center}
\end{frame}
\begin{frame}[fragile]{The Makefile}
\begin{verbatim}
make PLUGINS="plugin list" MINIFIER="/minifier/path"
make usage
\end{verbatim}
\end{frame}
\section{Using boomerang}
\label{sec:use}
\subsection{Basic}
\begin{frame}[fragile]{Include it on your page}
\begin{verbatim}
<script src="boomerang.js" type="text/javascript">
</script>
<script type="text/javascript">
BOOMR.init({
user_ip: "<user's ip address>",
beacon_url: "http://mysite.com/beacon.php"
});
</script>
\end{verbatim}
\end{frame}
\begin{frame}{}
\begin{center}
For most sites, that's about it
\end{center}
\end{frame}
\begin{frame}{}
\begin{center}
You probably want to do more
\end{center}
\end{frame}
\subsection{Multi-domain}
\begin{frame}[fragile]{Handle subdomains}
Set the \texttt{site\_domain} parameter:
\begin{verbatim}
BOOMR.init({
user_ip: "<user's ip address>",
beacon_url: "http://mysite.com/beacon.php",
site_domain: "mysite.com"
});
\end{verbatim}
\end{frame}
\begin{frame}{}
\begin{center}
This lets you measure transitions across *.mysite.com
\end{center}
\end{frame}
\subsection{In-page timers}
\begin{frame}[fragile]{Measure more than just load time}
\begin{verbatim}
<html><head>
<script>var t_pagestart=new Date().getTime();</script>
...
<script>var th=new Date().getTime();</script>
</head>
<body>
...
<script>var tj=new Date().getTime();</script>
...
\end{verbatim}
\end{frame}
\begin{frame}[fragile]{}
\begin{verbatim}
...
<script src="boomerang.js"></script>
...
var te=new Date().getTime();
BOOMR.plugins.RT.setTimer("t_head", th-t_pagestart).
setTimer("t_body", te-th).
setTimer("t_js", te-tj);
</script></body></html>
\end{verbatim}
\end{frame}
\begin{frame}{}
\begin{center}
This adds the \texttt{t\_head}, \texttt{t\_body} and \texttt{t\_js} fields to the beacon
\end{center}
\end{frame}
\subsection{AJAX}
\begin{frame}[fragile]{Loading dynamic content}
\begin{verbatim}
BOOMR.init({
user_ip: "<user's ip address>",
beacon_url: "http://mysite.com/beacon.php",
auto_run: false
});
\end{verbatim}
\end{frame}
\begin{frame}[fragile]{Loading dynamic content}
\begin{verbatim}
// Just before download starts
BOOMR.plugins.RT.startTimer("t_done");
\end{verbatim}
\end{frame}
\begin{frame}[fragile]{Loading dynamic content}
\begin{verbatim}
// Just after download finishes
BOOMR.plugins.RT.done();
\end{verbatim}
\end{frame}
\subsection{}
\begin{frame}{Much more}
\begin{center}
\href{http://yahoo.github.com/boomerang/doc/howtos/}{\textcolor{blue}{http://yahoo.github.com/boomerang/doc/howtos/}}
\end{center}
\end{frame}
\section{Data}
\label{sec:data}
\subsection{shoulda}
\begin{frame}{The beacon}
\begin{itemize}
\item GET request to the beacon URL (response ignored)
\item All parameters passed in the query string
\item Extra timers are passed in as a comma separated list in \texttt{t\_other}
\item \texttt{before\_beacon} JavaScript event fired just before the beacon is sent
\end{itemize}
\end{frame}
\begin{frame}{What should we do with the data?}
\begin{itemize}
\item Sanity checking to:
\begin{itemize}
\item Remove fake data
\item Remove abusive data
\item Maybe just rate limiting
\end{itemize}
\end{itemize}
\end{frame}
\subsection{coulda}
\begin{frame}{What can we do with the data?}
\begin{itemize}
\item Statistical analysis to:
\begin{itemize}
\item Remove outliers
\item Aggregate based on bandwidth blocks
\item Measure trends over time and correlate them with code changes
\end{itemize}
\end{itemize}
\end{frame}
\setbeamertemplate{background}{
\parbox[c][.8\paperheight]{\paperwidth}{
\vfill \pgfimage[height=.6\paperheight]{bandwidth-latency} \hfill
}
}
\begin{frame}{Bandwidth blocks}
\parbox[c][\paperheight]{\paperwidth}{ }
\hfill \tiny{Ref: \href{http://www.yuiblog.com/blog/2010/04/08/analyzing-bandwidth-and-latency/}{\textcolor{blue}{\underline{Analysing Bandwidth \& Latency}}} -- YUI Blog}
\end{frame}
\setbeamertemplate{background}{}
\begin{frame}{Bandwidth blocks}
\begin{center}
Data points from some countries may require narrower bands
\end{center}
\end{frame}
\subsection{woulda}
\begin{frame}{Geographic data}
\begin{center}
Looking at latency from different geographic locations can tell you where your next mirror should be
\end{center}
\end{frame}
\begin{frame}{ISPs}
\begin{center}
Grouping data by ISP can tell you who's behaving badly
\end{center}
\end{frame}
\begin{frame}{More data}
\begin{itemize}
\item Write plugins to get more performance data
\item We already have a DNS plugin
\item I'm thinking of an IPv6 v/s IPv4 plugin
\item What about a full WebTiming plugin?
\item Can we measure connection setup time?
\end{itemize}
\end{frame}
\begin{frame}{You decide}
\begin{center}
Once you have the data, you can do anything with it
\end{center}
\end{frame}
\section{}
\begin{frame}{}
\begin{center}
Thank you \\
\tiny{
\href{http://www.github.com/yahoo/boomerang/}{http://github.com/yahoo/boomerang} \\
\href{http://yahoo.github.com/boomerang/doc/}{http://yahoo.github.com/boomerang/doc/}
}
\end{center}
\end{frame}
\begin{frame}{Photo credits}
\begin{itemize}
\item \href{http://www.flickr.com/photos/21233184@N02/4389412851/}{flickr.com/photos/21233184@N02/4389412851}
\end{itemize}
\end{frame}
\setbeamertemplate{background}{
\parbox[c][\paperheight]{\paperwidth}{
\hfill \pgfimage[height=\paperheight]{../bluesmoon}
}
}
\begin{frame}{Contact me}
\begin{itemize}
\item Philip Tellis
\item \small{\texttt{philip@bluesmoon.info}}
\item \href{http://twitter.com/bluesmoon}{@bluesmoon}
\item geek - paranoid - speedfreak
\item yahoo
\item \href{http://bluesmoon.info/}{http://bluesmoon.info/}
\item \href{http://www.slideshare.net/bluesmoon}{slideshare.net/bluesmoon}
\end{itemize}
\end{frame}
\setbeamertemplate{background}{}
\begin{frame}{References}
\begin{itemize}
\item \href{http://github.com/yahoo/boomerang/}{\textcolor{blue}{\underline{github.com/yahoo/boomerang}}}
\item \href{http://www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/}{\textcolor{blue}{\underline{More bandwidth doesn't matter (much)}} -- Mike Belshe}
\item \href{http://www.yuiblog.com/blog/2010/04/08/analyzing-bandwidth-and-latency/}{\textcolor{blue}{\underline{Analysing Bandwidth \& Latency}}} -- YUI Blog
\item \href{http://www.stuartcheshire.org/rants/Latency.html}{\textcolor{blue}{\underline{It's the latency, stupid}}} -- Stuart Cheshire
\item \href{http://www.slideshare.net/bluesmoon/index-3441823}{\textcolor{blue}{\underline{The statistics of web performance}}}
\end{itemize}
\end{frame}
\end{document}
Something went wrong with that request. Please try again.