Love Can't Wait! Optimizing PageLoad Time of SPAs at Zoosk Speaker: Aideen Nasirishargh, Lead Software Engineer, Zoosk

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

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

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

4. 4FutureStack16, November 16-17, 2016Love Can’t Wait – Aideen Nasirishargh, Zoosk Inc. 4Confidential and Proprietary |
Where is the Exit Door?!

5. 5FutureStack16, November 16-17, 2016Love Can’t Wait – Aideen Nasirishargh, Zoosk Inc.
Aideen Nasirishargh, Zoosk Inc.
FUTURESTACK16, 17-18 NOVEMBER 2016, SAN FRANCISCO

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

7. Introduction
What is Love, Why Can’t It Wait?

8. 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 users
13 Million Facebook Fans
3 Million messages per day
25 Languages
80 Countries
40 Currencies
Zoosk’s Engineering Timeline
2007 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)

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

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

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

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

13. 13FutureStack16, November 16-17, 2016Love Can’t Wait – Aideen Nasirishargh, Zoosk Inc.
Really?!
Source: http://infographicjournal.com/how-page-load-time-can-impact-conversions/

14. Introducing Time To Flirt (TTF)
Make it faster, please!

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

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

17. 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 requests
5. Inlining JS code (300KB) on MobileWeb SPA (it was 2014!)

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

19. 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 the
average of ~10 seconds.
● Lack of enough accurate data blocked
us 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!

20. 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/ )

21. 21FutureStack16, November 16-17, 2016Love Can’t Wait – Aideen Nasirishargh, Zoosk Inc.
Fast Forward to 2016 – NewRelic SPA Pro
● Percentile vs Avg in NRQL!

22. Cleanup Causes Happiness
Keep your heart fresh and well-
monitored!

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

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

25. Happy Ending
Let’s Share the Results!

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

27. 27FutureStack16, November 16-17, 2016Love Can’t Wait – Aideen Nasirishargh, Zoosk Inc.
Happy Ending
● Also 10% boost in initial
page landings!

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

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

30. Thank You!
Any question?