Workshop i gave on wednesday 25th January in Test Academy

2. testing user happiness
WebPageTest workshop

3. • User Satisfaction
• What to Measure
• How to Measure
• What to Monitor
What are we going to focus on?

4. Online free tool for synthetic performance testing
#PerfMatters

5. Qué no es?
WebPageTest NO es una herramienta de carga
No vamos a comprobar el rendimiento en situaciones de saturación
No es una herramienta que nos permita conocer el estado de nuestro servicio
No es una auditoría de código de front end ni consola de errores de javascript

6. Qué es?
WebPageTest es una herramienta de rendimiento a nivel browser que nos
permite determinar y automatizar resultados de visualización y renderización.
En definitiva, nos permite comprobar cuál es la experiencia de usuario
www.webpagetest.org

7. Qué nos permite? Mobile Testing
Mobile emulation Mode y Dispositivos
móviles desde distintas localizaciones
y con distintos User Agents

9. Fear the Latency

10. Fear the Latency

11. Fear is the path to the
dark side. Fear leads to
Inertia. Inertia Leads to
paralysis. Paralysis leads
to going out of Business.

12. Let’s Aim for Speed

14. What shall we Measure?

17. Vista Waterfall
Una vez ejecutado veremos
Sin
Cache de
Browser
Con
Cache de
Browser
Golden
Performance Rules

18. Time is Relative

19. Analytical Review Parameters
Localización
Browser
Velocidad de Conexión
Número de test a ejecutar ( coger un número Impar ;) )
First View and Repeat View ( Cache!!! )
Document Complete vs OnLoad
Ignorar Errores SSL
Capturar tcpdump
User Agent ad Hoc
Custom Headers
What shall we Measure?

20. Size?

21. What shall we Measure?

22. Number of Requests?

24. Number of Domains?

25. SPOF y Block
La opción de Block nos simula un error tipo 404 mientras que si usamos el SPOF nos simula un timeout.
Por ejemplo podemos comprobar con Block la diferencia entre el tiempo de carga con y sin anuncios ( bloqueando
anuncios o trackers ;) )
En cambio cuando probamos el Single Point of Failure lo que queremos comprobar es que nuestro site es resilient a 3rd
parties como por ejemplo los trackers, cómo se comporta nuestro site si el acceso a google analytics es lento o realmente
no hay servicio.

27. “My Mean time is fine."

28. Apdex Index
t = acceptable response time
satisfied = response time < t
tolerating = t < response time > 4t
frustrated = response time > 4t
Apdex [t] = (satisfied + tolerating/2)/total requests

29. Afterwards … in PROD ...

30. Time To
FIRST
BYTE

33. Waterfall Detalles

34. Cómo analizar el waterfall
Cuántos Kb tiene el html inicial
En qué segundo comienza el evento render
Cuántos socket connections hay hacia un host en concreto
Cuántas redirecciones
En qué momento hay un socket abierto contra un recurso y por qué

35. Custom Metrics
[iframe-count]
return document.getElementsByTagName("iframe").length;
[script-tag-count]
return document.getElementsByTagName("script").length;
[meta-viewport]
var viewport = undefined;
var metaTags=document.getElementsByTagName("meta");
for (var i = 0; i < metaTags.length; i++) {
if (metaTags[i].getAttribute("name") == "viewport") {
viewport = metaTags[i].getAttribute("content");
break;
}
}
return viewport
NO se pueden añadir operaciones asincronas :( Timers, Ajax requests etc ...

36. Performance
It's not just about adding more servers

38. REAL
USER
MONITORIN
G
Bring Up
RUM*
real user monitoring

40. Real User Monitoring

43. THINK BIG

44. HOW TO … Private Instance

46. Analytical Review Parámetros
Localización
Browser
Velocidad de Conexión
Número de test a ejecutar ( coger un número Impar ;) )
First View and Repeat View ( Cache!!! )
Document Complete vs OnLoad
Ignorar Errores SSL
Capturar tcpdump
User Agent ad Hoc
Custom Headers

47. Custom Metrics
[iframe-count]
return document.getElementsByTagName("iframe").length;
[script-tag-count]
return document.getElementsByTagName("script").length;
[meta-viewport]
var viewport = undefined;
var metaTags=document.getElementsByTagName("meta");
for (var i = 0; i < metaTags.length; i++) {
if (metaTags[i].getAttribute("name") == "viewport") {
viewport = metaTags[i].getAttribute("content");
break;
}
}
return viewport
NO se pueden añadir operaciones asincronas :( Timers, Ajax requests etc ...

48. Vista Waterfall
Una vez ejecutado veremos
Sin
Cache de
Browser
Con
Cache de
Browser
Golden
Performance Rules

49. Waterfall → Har File

50. Cómo analizar el waterfall
Cuántos Kb tiene el html inicial
En qué segundo comienza el evento render
Cuántos socket connections hay hacia un host en concreto
Cuántas redirecciones
En qué momento hay un socket abierto contra un recurso y por qué

51. Waterfall Detalles

55. SPOF y Block
La opción de Block nos simula un error tipo 404 mientras que si usamos el SPOF nos simula un timeout.
Por ejemplo podemos comprobar con Block la diferencia entre el tiempo de carga con y sin anuncios ( bloqueando
anuncios o trackers ;) )
En cambio cuando probamos el Single Point of Failure lo que queremos comprobar es que nuestro site es resilient a 3rd
parties como por ejemplo los trackers, cómo se comporta nuestro site si el acceso a google analytics es lento o realmente
no hay servicio.

56. Cómo detectar SPOF
con Charles Proxy y WPO

57. https://www.charlesproxy.com/

58. http://www.webpagetest.org/

60. Proxy > Throttiling
Tools > Map Remote

61. What to test
API server down?
AdBulk down?
Tracker down?

63. Traceroute

64. WPT Bulk Tester by Andy Davis
http://calendar.perfplanet.com/2014/driving-webpagetest-from-a-google-docs-spre
adsheet/