Maximizing site speed with mercy corps

May 13, 2015

Maximizing Site Speed with Mercy Corps#mercyspeed

1

Nice to Meet You!

Nice to meet you!

John BrandenburgDeveloper, Forum One

@johnbburg

Drew BettsUX Designer, Mercy Corps

2

3

Representative Clients 4

5

Partnership with Forum OneOur support services are designed to drive consistent long-term progress toward your organizational goals.

● Dedicated team of developers, themers, quality assurance testers, and project managers are available to help support your web presence.

● Bi-annual strategic planning workshops to discuss current business imperatives and audience needs that inform and drive future work.

● Quarterly retainer support for sprint-based development and as-needed ticket-based support.

● Fully managed hosting services with 24/7 on-call site support, 365 days a year.

6

Who is Mercy Corps?

7

Responding to Emergencies

8

Building Back Better

9

Why is Site Speed Important?10

Introduction to speed

11

Mobile was worse

12

Conversion rateFor every one second of improvement in load time, they experienced up to a 2% increase in conversions

For every 100 milliseconds of improvement, incremental revenues grew by up to 1%

Source: Walmart

13

Other negative effects● Negatively impacts SEO● Lowers perceived credibility and quality● Frustrates users● Increases bailout rate

14

Evaluating Performance & Engagement

15

What is Site Speed?

Evaluating Performance and Engagement

How fast a page loads (load time)How fast a page appears to load (start render)

● Page load● Time to first byte● Start render

16

It’s actually a pretty complex subject

Evaluating Performance and Engagement

● DNS Address Lookup● Establishing a Connection● CMS response time● Executing Javascript● Image optimization● Server environment● Downloading assets● Caching

17

Tools: What you need

Evaluating Performance and Engagement

● Analyze your page structure/behavior.● How optimized are your assets.● Load testing.

18

What we used

Evaluating Performance and Engagement

● WebPageTest.org● Google PageSpeed Insights● Apache Benchmark● New Relic● Google Analytics

Future consideration: JMeter

19

Script is available on GitHub

Evaluating Performance and Engagement

https://github.com/johnbburg/performance-testing

Content engagement script herehttp://cutroni.com/blog/2014/02/12/advanced-content-tracking-with-universal-analytics/

20

Process

21

Process

Process

1. Choose metrics and tests2. Decide on changes and prioritize3. Establish baseline 4. Develop and apply changes5. Measure6. Repeat

22

Metrics and tests

Process

1. Page load speed2. Conversion rate3. Engagement rate4. Response time (Apache)

23

Load

Begin

25%

50%

75%

100%

What to Improve?

24

Before we begin, here are some easy wins

Maximizing Performance

Page Cache for Anonymous Users

CSS/JS Aggregation and Page compression

See my blog post on forumone.com

25

Improvements for Mercy Corps

What to Improve?

1. Enable Views Caching2. Get Page Cache to be consistent3. Implement Memcache as the back-end

cache

26

First Measure: Views Caching

Maximizing Performance 27

10 Users 50 Users

Views Cache Disabled Vs. Enabled: Homepage

28

Page cache debugging

Maximizing Performance

Cached pages were served in an erratic way.

Use of the $_SESSION variable.

Expiration changed from 5 minutes to 1 hour.

29

Maximizing Performance

Second Measure: Memcache

31

Bonus: Entity Cache

Maximizing Performance 32

Impact

Maximizing Performance

Simulated load tests show Time to first byte went from 4.5 s to 1.5 s on the Donation page.

33

Responding in Nepal

Maximizing Performance

On April 26th, 2015, a 7.8 magnitude earthquake struck Nepal.

Another 7.3 earthquake struck Tuesday morning.

34

Responding in Nepal

Maximizing Performance

Traffic spiked over the weekend to 30-40x normal levels.

35

116,0004,000

Responding in Nepal

Maximizing Performance 36

Responding in Nepal

Maximizing Performance 37

DesktopResults

Before:

Load time

-1.344s

After:

First Byte

- 0.648sStart render

-0.744sVisually complete

-6.4sImpact:

38

MobileResults

Before:

Load time

-2.879s

After:

Start render

-2.516sImpact: Visually complete

0s

39

Content engagement - Haiyan & Nepal

40

-10.3%

-5.21%

-8.91%

+.08%

-8.85%

Content engagementBaseline vs. all changes

41

After changes41% of people reached 100%

Baseline46% of people reached 100%

Conversion rate Nepal earthquake

4/22/15 - 5/6/15Typhoon Haiyan

11/8/13 - 11/22/13

42

Baseline

5.57%2.83%3.11%

3.05%1.09%2.66%

For the future

Maximizing Performance

● Deferred Javascript● Varnish● Image compression● Spriting

43

Thank you!Q&A

44