Web pagetest Meetup At Trovit

33
June 2016 Meetup WebPerformance

Transcript of Web pagetest Meetup At Trovit

Page 1: Web pagetest Meetup At Trovit

June 2016Meetup WebPerformance

Page 2: Web pagetest Meetup At Trovit

WHAT IS TROVIT

WE SIMPLIFY SEARCH:ALL THE ADS YOU’RE LOOKING FOR IN ONE SEARCH

Homes Cars Jobs Products

That’s our promise. Ads from millions of websites in only one page. Quick, easy, helpful.

Page 3: Web pagetest Meetup At Trovit

WHAT IS TROVIT

BIGGER THAN BIG, LEADERS IN CLASSIFIED ADS

indexed Ads visits/month partners

46COUNTRIES

140M

93M

45,295

Trovit is a Barcelona based company that started in 2006. Since then we have been constantly growing our business to become the 6th largest Classified’s property worldwide*, operating in 46 countries and having partnered with most relevant players in every vertical.

Source: *comScore, October 2015

Page 4: Web pagetest Meetup At Trovit

WHAT IS TROVIT

OUR SIZE MAKES US BIG, OUR RESULTS MAKE US GREAT80 million users get to Trovit through different channels generating 146 million clicks to source’s websites. That is, in average, every user that visits Trovit clicks in 1,8 Ads

CLICKS/ MONTH146M

SEARCH ENGINES

NETWORKS

SOCIAL

DIRECT

REFERRAL

EMAIL ALERTS

CLICKS/USER1,8

VISITS/ MONTH93M

Page 5: Web pagetest Meetup At Trovit

TECHNOLOGY AT TROVIT

Page 6: Web pagetest Meetup At Trovit

TECHNOLOGY AT TROVIT WEB

Page 7: Web pagetest Meetup At Trovit
Page 8: Web pagetest Meetup At Trovit

WiFi

Trovit_Guest

letmesurf

Page 9: Web pagetest Meetup At Trovit

Online free tool for synthetic performance testing #PerfMatters

Page 10: Web pagetest Meetup At Trovit

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

Page 11: Web pagetest Meetup At Trovit

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

Page 12: Web pagetest Meetup At Trovit

Qué nos permite? Mobile Testing

Mobile emulation Mode y Dispositivos móviles desde distintas localizaciones y con distintos User Agents

Page 13: Web pagetest Meetup At Trovit

HOW TO … Private Instance

Page 14: Web pagetest Meetup At Trovit
Page 15: Web pagetest Meetup At Trovit

Analytical Review ParámetrosLocalizació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

Page 16: Web pagetest Meetup At Trovit

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

Page 17: Web pagetest Meetup At Trovit

Vista Waterfall

Una vez ejecutado veremos

Sin Cache de BrowserCon Cache de Browser

Golden Performance Rules

Page 18: Web pagetest Meetup At Trovit

Waterfall → Har File

Page 19: Web pagetest Meetup At Trovit

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é

Page 20: Web pagetest Meetup At Trovit

Waterfall Detalles

Page 21: Web pagetest Meetup At Trovit
Page 22: Web pagetest Meetup At Trovit
Page 23: Web pagetest Meetup At Trovit
Page 24: Web pagetest Meetup At Trovit

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.

Page 25: Web pagetest Meetup At Trovit

Cómo detectar SPOFcon Charles Proxy y WPO

Page 26: Web pagetest Meetup At Trovit

https://www.charlesproxy.com/

Page 27: Web pagetest Meetup At Trovit

http://www.webpagetest.org/

Page 28: Web pagetest Meetup At Trovit
Page 29: Web pagetest Meetup At Trovit

Proxy > Throttiling

Tools > Map Remote

Page 30: Web pagetest Meetup At Trovit

API server down?

AdBulk down?

Tracker down?

Page 31: Web pagetest Meetup At Trovit
Page 32: Web pagetest Meetup At Trovit

Traceroute

Page 33: Web pagetest Meetup At Trovit

WPT Bulk Tester by Andy Davis

http://calendar.perfplanet.com/2014/driving-webpagetest-from-a-google-docs-spreadsheet/