1FutureStack16, November 16-17, 2016Love Can’t Wait – Aideen Nasirishargh, Zoosk Inc. 1Confidential and Proprietary |

Love Can’t Wait!Aideen Nasirishargh, Zoosk Inc.

2FutureStack16, November 16-17, 2016Love Can’t Wait – Aideen Nasirishargh, Zoosk Inc. 2Confidential and Proprietary |

No Signal

3FutureStack16, November 16-17, 2016Love Can’t Wait – Aideen Nasirishargh, Zoosk Inc. 3Confidential and Proprietary |

I Can’t Wait!

4FutureStack16, November 16-17, 2016Love Can’t Wait – Aideen Nasirishargh, Zoosk Inc. 4Confidential and Proprietary |

Where is the Exit Door?!

5FutureStack16, November 16-17, 2016Love Can’t Wait – Aideen Nasirishargh, Zoosk Inc.

Aideen Nasirishargh, Zoosk Inc.

FUTURESTACK16, 17-18 NOVEMBER 2016, SAN FRANCISCO

LOVE CAN’T WAIT!

6FutureStack16, November 16-17, 2016Love Can’t Wait – Aideen Nasirishargh, Zoosk Inc.

Outline

● What is Love? Why Can’t It Wait?

● Introducing Time To Flirt (TTF)

● Cleanup Causes Happiness

● Happy End!

● Q&A

Introduction

What is Love, Why Can’t It Wait?

8FutureStack16, November 16-17, 2016Love Can’t Wait – Aideen Nasirishargh, Zoosk Inc.

What is Love?Zoosk• Zoosk’s mission is to empower

everyone to lead a more fulfilling love life.

• Products: • Zoosk.com, Zoosk Apps • Lively App

• Numbers:38 Million users13 Million Facebook Fans3 Million messages per

day25 Languages80 Countries40 Currencies

Zoosk’s Engineering Timeline2007 Founded by two

engineers as

a Facebook App

2008 Zoosk.com opens for business

2010 Launched ios & Android apps

2011 Launched SPA for Web using Google Closure

2012 Launched SPA for MobileWeb

in AngularJS

2013 Top10 Grossing iOS App in US

2014 Photo Verification Feature

2015 Launched Android Wear

2016 Launched Lively, our video-

based App (currently in iOS)

9FutureStack16, November 16-17, 2016Love Can’t Wait – Aideen Nasirishargh, Zoosk Inc.

Zoosk Clients

● Browser Based (Javascript)– Desktop Web (Cupid)

• Our oldest client, for www.zoosk.com and our Facebook App• 300K LOC on top of Google Closure and AngularJS

– Mobile Web (Touch) • Optimized for Mobile and Tablet (Swipe, Less CPU)• https://about.zoosk.com/en/engineering-blog/creating-full-page-mobile-swipe-with-angularjs/

– Responsive Pages (Vulcan)• https://about.zoosk.com/en/engineering-blog/responsive-web-design-vs-adaptive-web-design-which-one-is-for-me/

● Native Applications – iOS App for iPhone and iPad– Android and Android Wear Apps

• https://about.zoosk.com/en/engineering-blog/zoosk-wearables-2/

10FutureStack16, November 16-17, 2016Love Can’t Wait – Aideen Nasirishargh, Zoosk Inc.

Browser-Based vs Native

Browser-Based• Needs less user engagement to start

• Less commitment for user, easier to bounce

• Good: Faster iterations for Build, Measure, Learn* (A/B testing, MVP)

• Bad: No standard, much variety

• Ugly: Load Time can be higher due to downloading assets, including JS, CSS, Images, every time (Cache vs Inline)

Native• High barrier to start – Installing the app

• Re-engagement is easier through notifications

• Good: More standards, less concerns about the code size

• Bad: Legacy devices, not easy to fix a bug quickly, less control.

• Ugly: Users are reluctant to download**

* Source: The Lean Startup: http://theleanstartup.com/principles

* Source: http://qz.com/253618/most-smartphone-users-download-zero-apps-per-month/

11FutureStack16, November 16-17, 2016Love Can’t Wait – Aideen Nasirishargh, Zoosk Inc.

Why Can’t Love Wait?

● How long are you going to wait?● What next? What if it’s crashed and never loads?● #bounce after X seconds

12FutureStack16, November 16-17, 2016Love Can’t Wait – Aideen Nasirishargh, Zoosk Inc.

How bad is it?

Source: http://infographicjournal.com/how-page-load-time-can-impact-conversions/

13FutureStack16, November 16-17, 2016Love Can’t Wait – Aideen Nasirishargh, Zoosk Inc.

Really?!

Source: http://infographicjournal.com/how-page-load-time-can-impact-conversions/

Introducing Time To Flirt (TTF)

Make it faster, please!

15FutureStack16, November 16-17, 2016Love Can’t Wait – Aideen Nasirishargh, Zoosk Inc.

How to make it faster?

1. Initial Load – e.g. Landing on a user’s profile from an email notification– First time loading, requires loading assets if cache is empty

2. Consequent Actions– e.g. Sending a message, or, going to another person’s profile– Some data are cached, and transmitting the data to/from the server can be

reduced to AJAX calls

● Common Solution: Move to Single Page Application (SPA)– Initial Load might be heavier (requires loading router)– Consequent Actions are way faster (no full page reload)– We did it, gradually, starting from 2011

16FutureStack16, November 16-17, 2016Love Can’t Wait – Aideen Nasirishargh, Zoosk Inc.

Introducing TTF (Time to Flirt)

● Step 0: What to measure– Asynchronous loading/usability of various sections in SPA – Loading what is needed, and then preloading possible assets likely to be

needed in near future (e.g. next user’s profile picture, while in Search)

● Let’s define a metric!– A true one coming from the user’s perspective– Inspired by Twitter’s “Time To Tweet”* in March 2012, we defined Time to

Search and Time to Flirt.– Time To Flirt: The time from clicking on a Zoosk date card URI, to seeing

the user's datecard, and being able to send a message or greeting.– Time To Search: akin to TTF, this is the time it takes to load up and show

the first search result to our user.

– * https://blog.twitter.com/2012/improving-performance-on-twittercom

17FutureStack16, November 16-17, 2016Love Can’t Wait – Aideen Nasirishargh, Zoosk Inc.

Initial Improvements (2014)

1. Delay loading of images in notification tray (the hidden elements)

2. Prefetch first Search Results (whatever it takes from the server side to load the first page) into the HTML source of the page’s bootstrap code

3. Optimize prefetching of photos (never over-optimize!)4. Consolidate similar blocking assets (e.g. JS modules) into one file

from CDN in order to save on the number of HTTP requests5. Inlining JS code (300KB) on MobileWeb SPA (it was 2014!)

18FutureStack16, November 16-17, 2016Love Can’t Wait – Aideen Nasirishargh, Zoosk Inc.

It’s good, but not accurate!

● We used custom performance (timing) events in Google Analytics to measure our performance and created a dashboard.

● Result:

● Average Sucks!

19FutureStack16, November 16-17, 2016Love Can’t Wait – Aideen Nasirishargh, Zoosk Inc.

Average Sucks!

● Average needs O(1) space to compute.

● Outliers! Up to 60 seconds for theaverage of ~10 seconds.

● Lack of enough accurate data blockedus from implementing and experimenting other TTF-improvement ideas

● Alternatives in 2014:– Parse, Keen.io, other 3rd party storage services– Our own BI systems (Hive/Hadoop) + d3.js– New Relic Insights was barely born!

20FutureStack16, November 16-17, 2016Love Can’t Wait – Aideen Nasirishargh, Zoosk Inc.

Fast Forward to 2016 – NewRelic SPA Pro

● Extremely easy setup● Well-documented API● NRQL and Insights data, vs W3C (https://www.w3.org/TR/navigation-timing-2/ )

21FutureStack16, November 16-17, 2016Love Can’t Wait – Aideen Nasirishargh, Zoosk Inc.

Fast Forward to 2016 – NewRelic SPA Pro

● Percentile vs Avg in NRQL!

Cleanup Causes Happiness

Keep your heart fresh and well-monitored!

23FutureStack16, November 16-17, 2016Love Can’t Wait – Aideen Nasirishargh, Zoosk Inc.

Build, Learn, and Don’t Forget to Cleanup!

● A/B Tests at Zoosk

– 400+ per year!

– On Web SPA’s when using shared templates or Abstraction, both codes for A (control) vs B (test) experiment are download at all times.

– if (group_for_experiment(123) === ‘A’) { // code for group A} else { // code for group B}

– Browser-based = Both codes are downloaded• … and with up to 3 times shipping per day cache is not always the

answer

24FutureStack16, November 16-17, 2016Love Can’t Wait – Aideen Nasirishargh, Zoosk Inc.

Massive cleanup of 100+ experiments,

● 100 out of 140 Mobile Web Experiments since 2014

● 20K+ LOC (10% codebase)

● Page load +15%

Happy Ending

Let’s Share the Results!

26FutureStack16, November 16-17, 2016Love Can’t Wait – Aideen Nasirishargh, Zoosk Inc.

Happy Ending

● Percentile vs Average (get rid of outliers!)

● Accurate Tracking

● Real Time, and compare with yesterday.

● Result: Visible and Reliable 15% faster load time

27FutureStack16, November 16-17, 2016Love Can’t Wait – Aideen Nasirishargh, Zoosk Inc.

Happy Ending

● Also 10% boost in initial page landings!

28FutureStack16, November 16-17, 2016Love Can’t Wait – Aideen Nasirishargh, Zoosk Inc.

Other Wins (two weeks ago)

● Limiting agent to certain pages

● Instructing custom events (added to the Page Action)

● Improved load time by Inlining JS, vs, serving from CDN

29FutureStack16, November 16-17, 2016Love Can’t Wait – Aideen Nasirishargh, Zoosk Inc.

Takeaways for Engineers – How to Sell it!

● Performance as a Feature– You need a POC! Pick a good one

● Mocha hagotdi!

● Have a Routine for that. – Major cleanup every 6 months– Keeping artifacts sizes under a

certain size– 10% faster PageLoad every year?

Thank You!

Any question?