Improving the Digital UX - By Optimizing for Performance

IMPROVING THE DIGITAL UX

BY OPTIMIZING FOR PERFORMANCE

Digital Media LATAM 2015 – Mexico CityCraig Hyde, CEO, Rigor

October 24, 2015

• Read more stories

• Visit more pages

• Return more often

• Click more ads

VISITORS OF FAST SITES:

LOAD TIME↓ 80% UNIQUES ↑ 80%

http://digiday.com/publishers/gq-com-cut-page-load-time-80-percent/

AGENDA

1. The rise of mobile consumption

2. Problems with digital UX

3. Improving performance and UX

MOBILE CONSUMPTION HAS ECLIPSED DESKTOP

MOBILE CONSUMPTION HAS ECLIPSED DESKTOP

• Publishers have embraced responsive design

• No “Desktop” site or “Mobile” site• One site that “Adapts”

• Easier to maintain

• Better use of resources

MOBILE DEVICES ARE NOT DESKPTOP COMPUTERS

• Unequal Devices

• CPU/RAM

• Screen Size/Orientation

• User Interaction

• Unequal Networking• Slower

• Intermittent

USAGE AND CONTEXT ARE DIFFERENT

• Unequal Usage - all about “right now”

• Consuming content

• Weather or traffic

• Messaging or email

• Directions

• Context makes delays worse

RESULT: Digital UX is Difficult

Then... We get ads

RESULT: Digital UX is Difficult

imore.com

Without ads

• 2 seconds

• 45 requests

• 1.7 MB

imore.com

With ads

• 11 seconds

• 236 requests

• 11 MB

Without ads

• 2 seconds

• 45 requests

• 1.7 MB

Source: http://www.nytimes.com/interactive/2015/10/01/business/cost-of-mobile-ads.html

USERS ARE NOT HAPPY

MARKET IS REACTING

MARKET IS REACTING TO A BAD UX

YOU CAN’T GET RID OF YOUR ADS

MARKET IS REACTING TO A BAD UX

HOW CAN YOU IMPROVE DIGITAL UX?

YOU CAN’T GET RID OF YOUR ADS

MARKET IS REACTING TO A BAD UX

MEASURE AND IMPROVE PERFORMANCE

IMPORTANT CONCEPTS

FRONT-END (3RD PARTIES, IMAGES, CSS)

WATERFALL CHARTS

• Server Time

• Render Time

• Time to Interaction

• Full Page Load

1. Focus on Front-end

2. Measure Performance

3. Prioritize Changes rigor.com/CHECKLIST

OPTIMIZING PERFORMANCE

OPTIMIZING PERFORMANCE

3 SIMPLE TIPS

1. Appear Faster

2. Fewer Resources

3. Smaller Files

3 SIMPLE TIPS

#1. APPEAR FASTER

#1. APPEAR FASTER

• Show page to user fast

• Load 3rd party content after page renders

• Lazy load below the fold or hidden content

#2. FEWER RESOURCES

#2. FEWER RESOURCES

• Consolidate CSS and JavaScript files

• Leverage browser caching

• Combine style images into CSS sprites

• Reduce 3rd party tags

• Remove slow ads

#3. REDUCE FILE SIZES

#3. REDUCE FILE SIZES

Optimize/Compress images

ORIGINAL:3.6 MB4s over 3G

OPTIMIZED:39 KB0.04s over 3G

• Websites are getting slower

• Mobile users are impatient

• You can fix it:

1. Appear Faster

2. Fewer Resources

3. Reduce File Sizes

SUMMARY

YOUR Performance Checklist

rigor.com/CHECKLIST

THANK YOU.

rigor.com/CHECKLIST

craig.hyde@rigor.com@craighyde