Dia02 t03-s04-vlctesting2017-seminario-almudena-vivanco

@MrsDaehin29 y 30 de Noviembre de 2017. Valencia, España

TESTING USER HAPPINESS
WebPageTest workshop

import random
import time
import requests
class Speaker(object):
def __init__(self):
born = "Avilés - Asturias"
studies = "Applied Maths and Computability"
jobdescription = "Performance Jedi"
company = "Telefónica I+D"
team = "Product Engineering"
project = "AWAZZA"
talks = [ExpoQA, VLC Testing, DevopsDays, WebPerfDays, Velocity]
def talk(self):
start_timer = time.time()
r = requests.get('http://www.slideshare.net/almudenavivanco')
r.raw.read()
latency = time.time() - start_timer
self.custom_timers[‘VLTesting’'] = latency
if __name__ == '__main__':
speech = Speaker()
speech.talk()
print trans.custom_timers
Almudena Vivanco
(@MrsDaehin)

• Satisfacción del Usuario
• Qué vamos a medir
• Cómo lo vamos a medir
• Qué queremos tracear
What are we going to focuson?

Medir
Tener un Objetivo
Medir siempre cuanto antes mejor
Continuous Performance Testing

Optimizar
Reducir el Throughput
Reducir el número de recursos críticos
Acortar el Critical Path ( CRP )

Satisfacción del Usuario

Online free tool for synthetic performance testing
#PerfMatters

http://usingwpt.com
Aimed at Novices and Power Users
Includes:
Basics
Getting started, running tests, understanding waterfall
charts and the metrics WebPageTest captures
Intermediate
Picking the right test parameters, scripting multi-page tests
and using your existing analytics data to help the decisions
Advanced
Using the API, integrating WebPageTest into build and CI
processes, and setting up your own private instances

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

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

Cómo funciona?
Poll por tareas, mide carga y
devuelve los resultados al WPT
server
Carga la página / páginas

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

Agentes Móviles

@MrsDaehin29 y 30 de Noviembre de 2017. Valencia, EspañaFear the Latency

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

@MrsDaehin29 y 30 de Noviembre de 2017. Valencia, EspañaLet’s Aim for Speed

Simple Test
Una vez ejecutado veremos
http://bit.ly/2sfPAlv

@MrsDaehin29 y 30 de Noviembre de 2017. Valencia, EspañaQué tenemos que Medir?

@MrsDaehin29 y 30 de Noviembre de 2017. Valencia, EspañaOptimizar
https://csswizardry.com/

Vista Waterfall
Sin
Cache de
Browser
Con
Cache de
Browser
Golden
Performance
Rules
http://bit.ly/2rfmROM

Advanced Settings…

@MrsDaehin29 y 30 de Noviembre de 2017. Valencia, EspañaTime is Relative

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
Qué tenemos que Medir?

@MrsDaehin29 y 30 de Noviembre de 2017. Valencia, EspañaSize?

@MrsDaehin29 y 30 de Noviembre de 2017. Valencia, EspañaOptimizar
Reducir cantidad de Bytes
● Minificar, comprimir y cachear
○ HTML
○ CSS → http://www.cssanalyzer.com/
○ JavaScript → https://jscompress.com/
● Quitar estilos no usados
○ unused-css.com
● Comprimir imagenes
○ compressor.io
● Comprimir y unificar fuentes

@MrsDaehin29 y 30 de Noviembre de 2017. Valencia, EspañaWhat shall we Measure?

@MrsDaehin29 y 30 de Noviembre de 2017. Valencia, EspañaNumber of Requests?

@MrsDaehin29 y 30 de Noviembre de 2017. Valencia, EspañaNumber of Domains?

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.

“My Mean time is fine."

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

Afterwards … in PROD ...

Time To
FIRST
BYTE

Waterfall Detalles

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é

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 ...

Performance
It's not just about adding more servers

http://bit.ly/2sUfZn5

REAL
USER
MONITO
RING
Bring Up
RUM*
real user monitoring

@MrsDaehin29 y 30 de Noviembre de 2017. Valencia, EspañaReal User Monitoring

THINK BIG

HOW TO … Private Instance

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

Vista Waterfall
Sin
Cache de
Browser
Con
Cache de
Browser
Golden
Performance
Rules

Waterfall → Har File

CÓMO DETECTAR SPOF
con Charles Proxy y WPO

Análisis de Impacto!
API server down?
AdBulk down?
Tracker down?

https://www.charlesproxy.com/

http://www.webpagetest.org/
http://bit.ly/2svef6a

uno fácil

Búsqueda en
google
logData 0
navigate http://www.google.es
setvalue id=lst-ib ExpoQA
logData 1
submitformid=tsf

Searching Google
Results page only -
Search and results page -
Waterfall for results page only

Chrome Devtools

¿Ro.Bot?

Proxy > Throttiling
Tools > Map Remote

Traceroute

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

https://github.com/andydavies/WPT-Bulk-Tester

Demo - http://man.gl/1UxjYjs

Private instances too!

Dia02 t03-s04-vlctesting2017-seminario-almudena-vivanco

Recomendados

Recomendados

Más contenido relacionado

Similar a Dia02 t03-s04-vlctesting2017-seminario-almudena-vivanco

Similar a Dia02 t03-s04-vlctesting2017-seminario-almudena-vivanco (13)

Más de Almudena Vivanco

Más de Almudena Vivanco (20)

Último

Último (19)

Dia02 t03-s04-vlctesting2017-seminario-almudena-vivanco