Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement

Post on 16-Jul-2015

121 views 0 download

Tags:

transcript

Tune Up or Be Tuned Out!Optimizing Site Performance for User Engagement

Forum One is a digital agency that partners with influential organizations to craft solutions for the world’s most pressing problems.

OpenSource Since

19962,000Successful

Projects

750Influential

Clients

100% Mission-driven

Nice to Meet You!

John BrandenburgDeveloper, Forum One

Heather VirgaManager of Support, Forum One

Drew BettsUX Designer, Mercy Corps

Introduction

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.

Introduction

Who is Mercy Corps, what they do, and why is site speed important for their mission?

Mercy Corps

Introduction

Who is Mercy Corps?

Responding to Emergencies

Building Back Better

Why is Site Speed Important?

Introduction to speed

Introduction

Mobile was worse

Introduction

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

Introduction

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

Introduction

Evaluating Performance & Engagement

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

It’s actually a prettycomplex subject

Evaluating Performance and Engagement

DNS Address LookupEstablishing a ConnectionCMS Software Run TimeExecuting JavascriptImage optimizationServer EnvironmentDownloading AssetsCaching

Tools: What you need

Evaluating Performance and Engagement

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

What we used

Evaluating Performance and Engagement

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

Future consideration: JMeter

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/

Process

Process

Process

1. Choose tests and metrics2. Establish baseline & goals3. Decide on changes and prioritize 4. Develop and apply changes5. Measure6. Repeat

Choose metrics and tests

Process

Page load speedConversion rateEngagement rate

Response time (Apache)

Engagement rate

Process

Tracks how far visitors read on a page

Additional metrics+ Bounce rate+ Pages per visit

Article loaded

Began reading

25%

100%

50%

75%

Bounce rate:

Pages per visit:

97%

39%

6.85%

1.47

Establish the baseline

Process

Conversion rate:

What to Improve?

Before we begin, here are some easy wins

What to Improve

● Enable Page Cache for Anonymous Users

● Use CSS/JS Aggregation and Page compression

Learn more from blog post on forumone.com: http://bit.ly/simplesiteboost

Improvements for Mercy Corps

What to Improve

1. Enable Views Caching.2. Get Page Cache to be consistent.3. Implement Memcache as the back-end

cache.

Maximizing Performance

First Measure: Views Caching

Maximizing Performance

In Drupal, in addition to caching an entire page, we can cache the parts of it that are generated by Views.

Views Cache Disabled vs. Enabled: Homepage (10)

Enabling Views Cache: Homepage (50)

Maximizing Performance

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.

Maximizing Performance

Drupal can use several different mechanisms for its “Back-end” cache. By default, it’s the database. But we can replace this with other tools, that utilize active memory for cache storage.

Measure: Memcache

Bonus: Entity Cache

Maximizing Performance

Impact

Maximizing Performance

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

Responding in NepalOn April 26th, 2015, a 7.8 magnitude earthquake struck Nepal.

Maximizing Performance

Responding in NepalTraffic spiked over the weekend to 5x normal levels.

4,000 30,000

Maximizing Performance

Content Engagement & Conversion Rate

Maximizing Performance

Impact of first round of changes

Content engagement: ~6%

Conversion Desktop: .09%Conversion Mobile: .02%

For the Future

Maximizing Performance

● Deferred Javascript● Varnish● Further work on Mobile

Lessons Learned● Watch your head-ers.● Performance testing is harder than it

looks.

Maximizing Performance

Thank you!

Heather VirgaManager of Support, Forum One

hvirga@forumone.com

Drew BettsUX Designer, Mercy Corpsdbetts@mercycorps.org

John BrandenburgDeveloper, Forum One

jbrandenburg@forumone.com