Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement
-
Upload
forum-one -
Category
Government & Nonprofit
-
view
124 -
download
0
Transcript of Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement
![Page 1: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/1.jpg)
Tune Up or Be Tuned Out!Optimizing Site Performance for User Engagement
![Page 2: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/2.jpg)
![Page 3: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/3.jpg)
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
![Page 4: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/4.jpg)
![Page 5: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/5.jpg)
![Page 6: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/6.jpg)
Nice to Meet You!
John BrandenburgDeveloper, Forum One
Heather VirgaManager of Support, Forum One
Drew BettsUX Designer, Mercy Corps
Introduction
![Page 7: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/7.jpg)
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
![Page 8: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/8.jpg)
Who is Mercy Corps, what they do, and why is site speed important for their mission?
Mercy Corps
Introduction
![Page 9: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/9.jpg)
Who is Mercy Corps?
![Page 10: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/10.jpg)
Responding to Emergencies
![Page 11: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/11.jpg)
Building Back Better
![Page 12: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/12.jpg)
Why is Site Speed Important?
![Page 13: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/13.jpg)
Introduction to speed
Introduction
![Page 14: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/14.jpg)
Mobile was worse
Introduction
![Page 15: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/15.jpg)
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
![Page 16: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/16.jpg)
Other negative effects● Negatively impacts SEO● Lowers perceived credibility and quality● Frustrates users● Increases bailout rate
Introduction
![Page 17: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/17.jpg)
Evaluating Performance & Engagement
![Page 18: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/18.jpg)
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
![Page 19: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/19.jpg)
It’s actually a prettycomplex subject
Evaluating Performance and Engagement
DNS Address LookupEstablishing a ConnectionCMS Software Run TimeExecuting JavascriptImage optimizationServer EnvironmentDownloading AssetsCaching
![Page 20: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/20.jpg)
Tools: What you need
Evaluating Performance and Engagement
● Analyze your page structure/behavior.● How optimized are your assets.● Load testing.
![Page 21: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/21.jpg)
What we used
Evaluating Performance and Engagement
● WebPageTest.org● Google PageSpeed Insights● Apache Benchmark● New Relic● Google Analytics
Future consideration: JMeter
![Page 22: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/22.jpg)
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/
![Page 23: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/23.jpg)
Process
![Page 24: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/24.jpg)
Process
Process
1. Choose tests and metrics2. Establish baseline & goals3. Decide on changes and prioritize 4. Develop and apply changes5. Measure6. Repeat
![Page 25: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/25.jpg)
Choose metrics and tests
Process
Page load speedConversion rateEngagement rate
Response time (Apache)
![Page 26: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/26.jpg)
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
![Page 27: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/27.jpg)
Establish the baseline
Process
Conversion rate:
![Page 28: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/28.jpg)
What to Improve?
![Page 29: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/29.jpg)
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
![Page 30: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/30.jpg)
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.
![Page 31: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/31.jpg)
Maximizing Performance
![Page 32: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/32.jpg)
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.
![Page 33: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/33.jpg)
Views Cache Disabled vs. Enabled: Homepage (10)
Enabling Views Cache: Homepage (50)
Maximizing Performance
![Page 34: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/34.jpg)
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.
![Page 35: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/35.jpg)
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
![Page 36: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/36.jpg)
Bonus: Entity Cache
Maximizing Performance
![Page 37: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/37.jpg)
Impact
Maximizing Performance
Simulated load tests show Time to first byte went from 4.5 s to 1.5 s on the Donation page.
![Page 38: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/38.jpg)
Responding in NepalOn April 26th, 2015, a 7.8 magnitude earthquake struck Nepal.
Maximizing Performance
![Page 39: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/39.jpg)
Responding in NepalTraffic spiked over the weekend to 5x normal levels.
4,000 30,000
Maximizing Performance
![Page 40: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/40.jpg)
Content Engagement & Conversion Rate
Maximizing Performance
Impact of first round of changes
Content engagement: ~6%
Conversion Desktop: .09%Conversion Mobile: .02%
![Page 41: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/41.jpg)
For the Future
Maximizing Performance
● Deferred Javascript● Varnish● Further work on Mobile
![Page 42: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/42.jpg)
Lessons Learned● Watch your head-ers.● Performance testing is harder than it
looks.
Maximizing Performance
![Page 43: Tune Up or Be Tuned Out! Optimizing Site Performance for User Engagement](https://reader030.fdocuments.net/reader030/viewer/2022032616/55a6f8851a28ab02718b45ad/html5/thumbnails/43.jpg)
Thank you!
Heather VirgaManager of Support, Forum One
Drew BettsUX Designer, Mercy [email protected]
John BrandenburgDeveloper, Forum One