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
Drew BettsUX Designer, Mercy [email protected]
John BrandenburgDeveloper, Forum One