improving the digital ux - by optimizing for performance
TRANSCRIPT
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
