Love Can't Wait! Optimizing PageLoad Time of SPAs at Zoosk [FutureStack16]

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

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

No Signal

I Can’t Wait!

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!

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?

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)

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/

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/

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

How bad is it?

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

Really?!

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

Introducing Time To Flirt (TTF)

Make it faster, please!

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

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

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!)

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!

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!

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

Fast Forward to 2016 – NewRelic SPA Pro

● Percentile vs Avg in NRQL!

Cleanup Causes Happiness

Keep your heart fresh and well-monitored!

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

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!

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

Happy Ending

● Also 10% boost in initial page landings!

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

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?

Love Can't Wait! Optimizing PageLoad Time of SPAs at Zoosk [FutureStack16]

Data & Analytics

Optimizing Growth - INSAGE

Optimizing Opportunities

Optimizing merge program

When Kids Can't Read

Wait! n°40

PLEASE WAIT

Please wait - STAR

Optimizing Images for sina

please wait……

Amazon S3 · 2019. 12. 13. · G sus9 more. - more. I can't I can't I can't live live if G sus9 A m9 liv - ing is with-out you. you. I can't Dal Coda give an 20 give, G sus9 23 give

Optimizing HotGas Defrosting

Optimizing a clock driver

HTML5 Can't Do That

Sendo - Optimizing Content

LOADING…….PLEASE WAIT……

LotteryNumber/Wait Application

Optimizing TCP Forwarder Performance

I Can't Write a Story

Optimizing Your Broadcast Communications

ERFOLGREICH UMSETZEN - DHBW Heilbronn · 2020. 10. 23. · we shot for FW20/21 campaign recently, and something I can't wait to start wearing myself! Although I won't be wishing for