@SimonHearne

Five Surprising Techniques to
Improve Online Engagement


Simon Hearne

Web Performance Consultant

Coming up...

  1. Measuring Engagement
  2. Defining Site Speed
  3. IT Levers on Speed
  4. Tips to Maximize Engagement
  5. What you can do today

Data Source 1 πŸ“Š

Akamai mPulse

Data Source 2 πŸ“Š

HTTP Archive

How do we make money? πŸ’΅

  • Ad impressions & clicks (circulation)
  • Advertorials & sponsored content
  • Subscriptions & paywalls
  • Conversions

How do we make more money? πŸ’Έ

  • More visitors
  • Longer sessions
  • Better experience
  • Better products

We know that speed matters

The BBC loses an additional 10% of users for every additional second it takes to load
Pinterest improved load time by 40% and saw 15% increase in SEO traffic and 15% increase in conversions
Financial Times added a one second delay to every page view and saw a 4.9% drop in the number of articles users read over a 7 day window

wpostats.com/tags/engagement/

We know that speed matters

COOK increased conversion rate by 7% after cutting average page load time by 0.85 seconds. Bounce rate fell by 7% and session length increased by 10%.
For every 100ms decrease in homepage load speed, Mobify's customer base saw a 1.11% lift in session based conversion
GQ cut load time by 80% and saw an 80% increase in traffic. Median time spent on the site also increased by 32%

wpostats.com/tags/engagement/

What do we mean by speed?

POLL 1: What do you measure?

  1. Page Load
  2. Paint Timing
  3. Custom Timer
  4. Don't know / don't measure

What actually matters?

  • Is it working?
  • Is it useful?
  • Is it interactive?

Is it working?

Is it working?

  • Time to First Byte
  • First Paint

Is it useful?

Is it useful?

  • DOM Content Loaded
  • DOM Complete
  • First Contentful Paint
  • Time to Visually Ready*

*mPulse only

Is it interactive?

Is it interactive?

  • Time to Interactive
  • First Input Delay
  • Time to First Interaction
  • Rage Clicks*

*mPulse only

Timer Summary

Time to First Byte (TTFB)The speed of the delivery stack
DOM Content Loaded (DCL)The speed of critical dependencies
First Paint (FP)The first time something is rendered
First Contentful Paint (FCP)When the user might first see content
Time To Visually Ready (TTVR)When key content is rendered
Page Load Time (PLT)When the page is complete
Time To Interactive (TTI)When the app is first responsive to input
First Input Delay (FID)How long it takes to respond to input

developer.akamai.com/mpulse/whats-in-a-beacon/

Performance Levers 🎚

How can we measure engagement?

  • Bounce Rate
  • Session Length
  • Retention Rate*

* rate of visitors who visit another page after this one

POLL 2: How do you measure engagement?

  1. Bounce Rate
  2. Session Length
  3. Subscriptions / Registrations
  4. Don't know / don't measure

Performance vs. engagement

Source: Akamai mPulse (May 2019)

Performance vs. engagement

Source: Akamai mPulse (May 2019)

Goals for maximum engagement

TimerGoal Speed
First Input Delay (FID)200ms
Time to First Byte (TTFB)500ms
First Contentful Paint (FCP)1,000ms
DOM Ready2,500ms
Time To Visually Ready (TTVR)2,500ms
Page Load Time (PLT)3,000ms
Time To Interactive (TTI)4,000ms

Based on aggregate data - what are yours?

Five tips to improve
speed & engagement

1: Manage third-parties 🚸

Domain count vs. TTI

Source: Akamai mPulse (May 2019)

JavaScript count vs. visual readiness

Source: HTTP Archive (May 2019)

Third-party scripts are responsible for
>70% of requests

requestmap.webperf.tools

How many scripts are redundant?

we had a collection of very old scripts and couldn’t track the original requester. We removed those on the premise that, if they were important, people would get back in touchβ€Šβ€”β€Šno one did.

Improving third-party web performance at The Telegraph

Proxy through Akamai!

Optimizely Self Hosting with Akamai

Proxy through Akamai!

How we shaved 1.7 seconds off casper.com by self-hosting Optimizely

Use Akamai Script Manager
to police execution

Manage the Impact of Scripts and Get Protection From Unresponsive Third Parties

1: Manage third-parties 🚸

  1. Remove unnecessary scripts
  2. Defer non-critical scripts
  3. Use Akamai features to reduce risk

2: Serve critical content ASAP ⚑️

TTFB vs. TTI

Source: Akamai mPulse (May 2019)

Cache HTML with prefresh

Always serve quickly, with minimum risk of stale content

Achieving Great Offload and Performance using Prefresh

Font load vs. TTI

Source: Akamai mPulse (May 2019)

Font weight vs. visual readiness

Source: HTTP Archive (May 2019)

Cheat by preloading fonts

<link rel="preload" as="font" type="font/woff2" href="font.woff2">

Preloading Fonts and the Puzzle of Priorities

Show text as soon as you can

Swap in the brand font when it downloads

font-display: [swap|fallback|optional]

Controlling Font Performance with font-display

2: Serve critical content ASAP ⚑️

  1. Cache HTML with prefresh
  2. Show text as soon as you can

3: Optimize image delivery πŸŒ„

Image count vs. TTI

Source: Akamai mPulse (May 2019)

Image count vs. visual readiness

Source: HTTP Archive (May 2019)

Image size vs. visual readiness

Source: HTTP Archive (May 2019)

Automate image management

Akamai Image Manager

Defer below-the-fold images

Native image lazy-loading for the web!

3: Optimize image delivery πŸŒ„

  1. Automate image managemenr
  2. Defer below-the-fold images
  3. Reconsider low-quality placeholders
  4. Use SVG and CSS wherever possible

4: Reduce DOM complexity 🧠

DOM complexity vs. TTI

Source: Akamai mPulse (May 2019)

DOM complexity vs. TTI

Source: HTTP Archive (May 2019)

4: Reduce DOM complexity 🧠

  1. Render on the server
  2. Avoid infinite scroll
  3. Adopt a CSS methodology
  4. Aim for <1,500 nodes

5: Reduce or defer JavaScript execution βš™οΈ

JavaScript size vs. TTI

Source: Akamai mPulse (May 2019)

JavaScript size vs. visual readiness

Source: HTTP Archive (May 2019)

Let the browser focus

The single biggest improvement
(and easiest to implement technically)
came from deferring all JavaScript,
including our own.

Improving third-party web performance at The Telegraph

5: Reduce or defer JavaScript execution

  1. Only ship necessary JavaScript
  2. Consider differential serving for low-end devices
  3. Defer everything?!

Conclusions ✍️

  • Actively measure site speed!
  • Correlate speed with behavior
  • Set speed goals based on behavior
  • Maximize the Akamai Platform
  • Help the browser render quickly

Thank you πŸ™

simon@hearne.me

simonhearne.com/presentations/improving-engagement/