improving the digital ux - by optimizing for performance
TRANSCRIPT
![Page 1: Improving the Digital UX - By Optimizing for Performance](https://reader031.vdocuments.net/reader031/viewer/2022022001/58d024201a28ab97708b630f/html5/thumbnails/1.jpg)
IMPROVING THE DIGITAL UX
BY OPTIMIZING FOR PERFORMANCE
Digital Media LATAM 2015 – Mexico CityCraig Hyde, CEO, Rigor
October 24, 2015
![Page 2: Improving the Digital UX - By Optimizing for Performance](https://reader031.vdocuments.net/reader031/viewer/2022022001/58d024201a28ab97708b630f/html5/thumbnails/2.jpg)
![Page 3: Improving the Digital UX - By Optimizing for Performance](https://reader031.vdocuments.net/reader031/viewer/2022022001/58d024201a28ab97708b630f/html5/thumbnails/3.jpg)
• Read more stories
• Visit more pages
• Return more often
• Click more ads
VISITORS OF FAST SITES:
![Page 4: Improving the Digital UX - By Optimizing for Performance](https://reader031.vdocuments.net/reader031/viewer/2022022001/58d024201a28ab97708b630f/html5/thumbnails/4.jpg)
LOAD TIME↓ 80% UNIQUES ↑ 80%
http://digiday.com/publishers/gq-com-cut-page-load-time-80-percent/
![Page 5: Improving the Digital UX - By Optimizing for Performance](https://reader031.vdocuments.net/reader031/viewer/2022022001/58d024201a28ab97708b630f/html5/thumbnails/5.jpg)
AGENDA
1. The rise of mobile consumption
2. Problems with digital UX
3. Improving performance and UX
![Page 6: Improving the Digital UX - By Optimizing for Performance](https://reader031.vdocuments.net/reader031/viewer/2022022001/58d024201a28ab97708b630f/html5/thumbnails/6.jpg)
MOBILE CONSUMPTION HAS ECLIPSED DESKTOP
![Page 7: Improving the Digital UX - By Optimizing for Performance](https://reader031.vdocuments.net/reader031/viewer/2022022001/58d024201a28ab97708b630f/html5/thumbnails/7.jpg)
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
![Page 8: Improving the Digital UX - By Optimizing for Performance](https://reader031.vdocuments.net/reader031/viewer/2022022001/58d024201a28ab97708b630f/html5/thumbnails/8.jpg)
MOBILE DEVICES ARE NOT DESKPTOP COMPUTERS
• Unequal Devices
• CPU/RAM
• Screen Size/Orientation
• User Interaction
• Unequal Networking• Slower
• Intermittent
![Page 9: Improving the Digital UX - By Optimizing for Performance](https://reader031.vdocuments.net/reader031/viewer/2022022001/58d024201a28ab97708b630f/html5/thumbnails/9.jpg)
USAGE AND CONTEXT ARE DIFFERENT
• Unequal Usage - all about “right now”
• Consuming content
• Weather or traffic
• Messaging or email
• Directions
• Context makes delays worse
![Page 10: Improving the Digital UX - By Optimizing for Performance](https://reader031.vdocuments.net/reader031/viewer/2022022001/58d024201a28ab97708b630f/html5/thumbnails/10.jpg)
RESULT: Digital UX is Difficult
![Page 11: Improving the Digital UX - By Optimizing for Performance](https://reader031.vdocuments.net/reader031/viewer/2022022001/58d024201a28ab97708b630f/html5/thumbnails/11.jpg)
Then... We get ads
RESULT: Digital UX is Difficult
![Page 12: Improving the Digital UX - By Optimizing for Performance](https://reader031.vdocuments.net/reader031/viewer/2022022001/58d024201a28ab97708b630f/html5/thumbnails/12.jpg)
![Page 13: Improving the Digital UX - By Optimizing for Performance](https://reader031.vdocuments.net/reader031/viewer/2022022001/58d024201a28ab97708b630f/html5/thumbnails/13.jpg)
imore.com
Without ads
• 2 seconds
• 45 requests
• 1.7 MB
![Page 14: Improving the Digital UX - By Optimizing for Performance](https://reader031.vdocuments.net/reader031/viewer/2022022001/58d024201a28ab97708b630f/html5/thumbnails/14.jpg)
imore.com
With ads
• 11 seconds
• 236 requests
• 11 MB
Without ads
• 2 seconds
• 45 requests
• 1.7 MB
![Page 15: Improving the Digital UX - By Optimizing for Performance](https://reader031.vdocuments.net/reader031/viewer/2022022001/58d024201a28ab97708b630f/html5/thumbnails/15.jpg)
Source: http://www.nytimes.com/interactive/2015/10/01/business/cost-of-mobile-ads.html
![Page 16: Improving the Digital UX - By Optimizing for Performance](https://reader031.vdocuments.net/reader031/viewer/2022022001/58d024201a28ab97708b630f/html5/thumbnails/16.jpg)
USERS ARE NOT HAPPY
![Page 17: Improving the Digital UX - By Optimizing for Performance](https://reader031.vdocuments.net/reader031/viewer/2022022001/58d024201a28ab97708b630f/html5/thumbnails/17.jpg)
MARKET IS REACTING
![Page 18: Improving the Digital UX - By Optimizing for Performance](https://reader031.vdocuments.net/reader031/viewer/2022022001/58d024201a28ab97708b630f/html5/thumbnails/18.jpg)
MARKET IS REACTING TO A BAD UX
![Page 19: Improving the Digital UX - By Optimizing for Performance](https://reader031.vdocuments.net/reader031/viewer/2022022001/58d024201a28ab97708b630f/html5/thumbnails/19.jpg)
YOU CAN’T GET RID OF YOUR ADS
MARKET IS REACTING TO A BAD UX
![Page 20: Improving the Digital UX - By Optimizing for Performance](https://reader031.vdocuments.net/reader031/viewer/2022022001/58d024201a28ab97708b630f/html5/thumbnails/20.jpg)
HOW CAN YOU IMPROVE DIGITAL UX?
YOU CAN’T GET RID OF YOUR ADS
MARKET IS REACTING TO A BAD UX
![Page 21: Improving the Digital UX - By Optimizing for Performance](https://reader031.vdocuments.net/reader031/viewer/2022022001/58d024201a28ab97708b630f/html5/thumbnails/21.jpg)
MEASURE AND IMPROVE PERFORMANCE
![Page 22: Improving the Digital UX - By Optimizing for Performance](https://reader031.vdocuments.net/reader031/viewer/2022022001/58d024201a28ab97708b630f/html5/thumbnails/22.jpg)
IMPORTANT CONCEPTS
![Page 23: Improving the Digital UX - By Optimizing for Performance](https://reader031.vdocuments.net/reader031/viewer/2022022001/58d024201a28ab97708b630f/html5/thumbnails/23.jpg)
FRONT-END (3RD PARTIES, IMAGES, CSS)
![Page 24: Improving the Digital UX - By Optimizing for Performance](https://reader031.vdocuments.net/reader031/viewer/2022022001/58d024201a28ab97708b630f/html5/thumbnails/24.jpg)
WATERFALL CHARTS
• Server Time
• Render Time
• Time to Interaction
• Full Page Load
![Page 25: Improving the Digital UX - By Optimizing for Performance](https://reader031.vdocuments.net/reader031/viewer/2022022001/58d024201a28ab97708b630f/html5/thumbnails/25.jpg)
1. Focus on Front-end
2. Measure Performance
3. Prioritize Changes rigor.com/CHECKLIST
OPTIMIZING PERFORMANCE
![Page 26: Improving the Digital UX - By Optimizing for Performance](https://reader031.vdocuments.net/reader031/viewer/2022022001/58d024201a28ab97708b630f/html5/thumbnails/26.jpg)
OPTIMIZING PERFORMANCE
3 SIMPLE TIPS
![Page 27: Improving the Digital UX - By Optimizing for Performance](https://reader031.vdocuments.net/reader031/viewer/2022022001/58d024201a28ab97708b630f/html5/thumbnails/27.jpg)
1. Appear Faster
2. Fewer Resources
3. Smaller Files
3 SIMPLE TIPS
![Page 28: Improving the Digital UX - By Optimizing for Performance](https://reader031.vdocuments.net/reader031/viewer/2022022001/58d024201a28ab97708b630f/html5/thumbnails/28.jpg)
#1. APPEAR FASTER
![Page 29: Improving the Digital UX - By Optimizing for Performance](https://reader031.vdocuments.net/reader031/viewer/2022022001/58d024201a28ab97708b630f/html5/thumbnails/29.jpg)
#1. APPEAR FASTER
• Show page to user fast
• Load 3rd party content after page renders
• Lazy load below the fold or hidden content
![Page 30: Improving the Digital UX - By Optimizing for Performance](https://reader031.vdocuments.net/reader031/viewer/2022022001/58d024201a28ab97708b630f/html5/thumbnails/30.jpg)
#2. FEWER RESOURCES
![Page 31: Improving the Digital UX - By Optimizing for Performance](https://reader031.vdocuments.net/reader031/viewer/2022022001/58d024201a28ab97708b630f/html5/thumbnails/31.jpg)
#2. FEWER RESOURCES
• Consolidate CSS and JavaScript files
• Leverage browser caching
• Combine style images into CSS sprites
• Reduce 3rd party tags
• Remove slow ads
![Page 32: Improving the Digital UX - By Optimizing for Performance](https://reader031.vdocuments.net/reader031/viewer/2022022001/58d024201a28ab97708b630f/html5/thumbnails/32.jpg)
#3. REDUCE FILE SIZES
![Page 33: Improving the Digital UX - By Optimizing for Performance](https://reader031.vdocuments.net/reader031/viewer/2022022001/58d024201a28ab97708b630f/html5/thumbnails/33.jpg)
#3. REDUCE FILE SIZES
Optimize/Compress images
ORIGINAL:3.6 MB4s over 3G
OPTIMIZED:39 KB0.04s over 3G
![Page 34: Improving the Digital UX - By Optimizing for Performance](https://reader031.vdocuments.net/reader031/viewer/2022022001/58d024201a28ab97708b630f/html5/thumbnails/34.jpg)
• Websites are getting slower
• Mobile users are impatient
• You can fix it:
1. Appear Faster
2. Fewer Resources
3. Reduce File Sizes
SUMMARY
![Page 35: Improving the Digital UX - By Optimizing for Performance](https://reader031.vdocuments.net/reader031/viewer/2022022001/58d024201a28ab97708b630f/html5/thumbnails/35.jpg)
YOUR Performance Checklist
rigor.com/CHECKLIST