Mobile web perf Amsterdam Tech Tips
Download as POTX, PDF0 likes829 views
Mobile and web performance is critical for user experience. Testing tools like WebPageTest and Video Optimizer can identify optimization opportunities such as slow delivery speeds, large files, and inefficient content. Key best practices include using content delivery networks to cache content globally, compressing text and images, resizing images appropriately, and choosing optimal video bitrates. Adhering to these performance best practices can significantly improve load times and user engagement.
Mobile web perf Amsterdam Tech Tips
- 1. Mobile/Web Performance Doug Sillars Digital Data Tips Tuesday May 29, 2018 @DougSillars
- 3. 0.5 0.6 0.7 0.8 0.9 Standing in Line Standing on the edge of a virtual cliff Experiencing Mobile Delays Solving a Math Problem https://www.ericsson.com/res/docs/2016/mobility-report/emr-feb-2016-the-stress-of-steaming-delays.pdf Stress
- 4. How Much Do Customers Hate Delays? 3s: 53% of Users Abandon Mobile Sites 500ms: 26% Frustration 8% Engagement 100ms: 1% Revenue Walmart & Amazon (Desktop 2001) 4% Mobile Users Throw Their Phones https://www.doubleclickbygoogle.com/articles/mobile-speed-matters http://bit.ly/mobileWebStress http://www.globaldots.com/how-website-speed-affects-conversion-rates/ https://www.mobilejoomla.com/blog/172-responsive-design-vs-server-side-solutions-infographic.html
- 5. Your Customers Demand Mobile experiences that are: Immersive Rich Fast This can be hard.
- 6. Cellular Networks Are High Latency Environments • Connection Establishment 500-2500ms 50-250ms 1-10ms • Round Trip Time (RTT) 200ms 100ms 8-50ms 3G 4G Wi-Fi
- 7. Today’s Goals Test where your app/site is today Common Tools Learn best practices for speed Learn from existing tests See the results of performance fixes
- 8. Testing Your Mobile Performance Native Web Free & Open Source Tools Video Optimizer https://developer.att.com/ Video-Optimizer WebPageTest https://www.webpagetest.org https://webspeed.cloudinary.com
- 9. Testing With Video Optimizer Run network traces on your phone 1. Pick device 2. Collector type 3. Set network conditions 4. Decrypt HTTPS 5. Record screen? 6. Name 7. GO!
- 10. Video Optimizer Video Optimizer establishes a VPN connection on Device Collects all Traffic in/out Device screen displayed on your computer Click Stop to end trace. Files copied over to computer for analysis.
- 11. Best Practices– Test Results Connections Files and Images HTML Security Video
- 12. WebPageTest Tests Websites on Remote Browsers 1. Enter Website 2. Set Test Location 3. Choose Device & Browser 4. Options 5. GO!
- 14. Optimizing Content Delivery 1.Delivery Speed
- 15. Optimizing Content Delivery 1.Delivery Speed Coin-hive.com is a cryptocurrency mining script that is used in coin-jacking websites They have one server in Germany. Munich, DE ping: 10ms San Jose, US ping: 150ms Singapore ping: 200ms Data Collected with Circonius
- 16. Optimizing Content Delivery 1.Delivery Speed
- 17. Optimizing Content Delivery 1.Delivery Speed: Content Delivery Networks CDNs cache your content at various locations around the world – reducing the round trip time
- 18. Optimizing Content Delivery 1.Delivery Speed: Redirects
- 20. Pokémon Go! Quick notes: GPS: always on (green) Packet traffic: radio nearly always on
- 21. Pokémon Go! Cellular Radio Usage HTTP (ARO can read): Location images 50-80kb each HTTPS (ARO can only see packets): maps.googleapis.com - Map data <10KB each Storage.googleapis.com – maps and game data ~500kb per batch Pgorelease.niananticlabs.com – uplink – player info ~35kb per batch Several analytics companies: unity3d, crittercism <10KB each We’ll focus on these
- 22. Pokémon Go! Cellular Radio Usage Storage.googleapis.com – maps and game data ~500kb per batch Pgorelease.niananticlabs.com – uplink – player info ~35kb per batch
- 23. Pokémon Go! Chatty Connections 5th connection to same server!
- 24. Pokémon Go! Chatty Connections Connections recur @ ~30s intervals What if these transmissions could be combined into 1 transmission every 30s? Cellular radio is off more often – Battery Savings Fewer Network connections, fewer bursts of traffic
- 25. As a Developer, Why Should I Care? Niantic servers are having trouble with Pokémon Go! Traffic loads Assumption: Server can handle 1,000 simultaneous connections Today: 5 connections per customer = 200 customers/server Tomorrow: 1 connection per customer = 1,000 customers/server
- 26. Optimizing Content Delivery 1.Delivery Speed 2.Content Delivery
- 28. Optimizing Content Delivery Text Compression Screen filled via: 130 KB JSON file
- 29. Optimizing Content Delivery Text Compression 130 KB JSON file populates screen "primaryImageUrl":"/db_photos/showcards/v5/AllPhotos/1394 9024/p13949024_b_v5_aa.jpg" "title":"America's Got Talent"
- 30. Optimizing Content Delivery Text Compression 131 KB Uncompressed: • Gzip: 16 KB (88% smaller!) • Brotli: 12 KB (91% smaller!) Screen is populated with data and images faster
- 31. 3 1 Clean Up Your Data JSON files downloaded have many duplicate entries – adding KB to the download: Identical data repeated 20x for each channel
- 34. Optimizing Content Delivery Images 2560 px 1440 px 1555x1200 pixels
- 35. Optimizing Content Delivery Image Pixel Count 2560 px 1440 px 720x556 pixels
- 36. Optimizing Content Delivery Image Quality 2560 px 1440 px 85% Quality
- 37. Optimizing Content Delivery Image Quality 2560 px 1440 px 85% Quality
- 38. Optimizing Content Delivery Images: Putting it Together 2560 px 1440 px 85% Quality & 720x556 pixels
- 39. Optimizing Content Delivery Image Quality Tooling http://res.cloudinary.com/dougsillars/image/upload/c_scale,q_85,w_720/ v1517843228/bigFrankSinatraImage_c1mnff.jpg http://res.cloudinary.com/dougsillars/image/upload/c_scale,q_auto,w_720/ v1517843228/bigFrankSinatraImage_c1mnff.jpg Auto Quality: 128 KB 91.7% savings! http://res.cloudinary.com/dougsillars/image/upload/c_scale,q_auto,r_0,w_720/ v1517843228/bigFrankSinatraImage_c1mnff.webp WebP: 84 KB 94.6% savings!
- 40. Optimizing Content Delivery Images and Devices https://twitter.com/paulcalvano/status/928751141843808256
- 41. Optimizing Content Delivery Responsive Images http://www.responsivebreakpoints.com/
- 42. Optimizing Content Delivery Preview Images
- 45. Optimizing Content Delivery Animated GIFs Original MP4 1.4 MB
- 46. Optimizing Content Delivery Animated GIFs Animated GIF 3.8 MB 270% larger
- 47. Optimizing Content Delivery Animated GIFs
- 48. Optimizing Content Delivery Animated GIFs MP4: 256 colors 247KB 93% smaller
- 49. Optimizing Content Delivery Animated GIFs Video Tags are slow: Video is not pre-loaded, will be last to download <video autoplay loop muted playsinline controls = "false” src="goats.mp4" /> Img tags are fast! <picture> <source type="video/mp4" srcset=”goats.mp4"> <source type="image/webp" srcset=”goats.webp"> <img src=”goats.gif"> </picture> https://calendar.perfplanet.com/2017/animated-gif-without-the-gif/
- 51. 51 Buffer Rage a state of uncontrollable fury or violent anger induced by delayed or interrupted streaming video content http://www.ineoquest.com/press-releases/new-research-reveals-buffer-rage-as-techs-newest-epidemic
- 52. Video <video Preload = “auto” src="goats.mp4" /> Best to use ”metadata” or “none”
- 53. Video Startup Delay After 2 seconds, every additional second corresponds to 5.8% increase in abandonment https://www.akamai.com/kr/ko/multimedia/documents/technical-publication/video-stream-quality-impacts-viewer-behavior-inferring-causality-using-quasi-experimental-designs-technical-publication.pdf
- 55. 55 Streaming Video on Demand • User clicks “Adventure Time” episode • Industry Target: <3s delay • 73s Screen flips to landscape at (blue bar) • 75s Ad for Lego Batman downloads • ~80-105s Lego Batman ad plays • 108s, get DTV Authorizing screen • 116s. Blank player • 121s video begins playing
- 56. 56 Breaking it down: Part 1 Video Ad Download
- 57. 57 Breaking it down: Part 1 Video Ad Download • Connections prior to ad download account for ~ 50% of latency to ad play • Latency for ad play doubles below 5 MBPS • Ad file size does not decrease as network quality decreases. • Measured Times • First analytics • First ad packet • “ad playback start” • Based on analytics reporting ad start
- 58. 58 Breaking it down: Part 2 Video Ad Playback
- 59. 59 Breaking it down: Part 3 THE MOVIE!!!
- 60. 60 Breaking it down: Movie startup
- 61. 61 Breaking it down: Movie startup Ad Play Movie Starts DL Customer “buffering” Movie Starts playing 3rd Quartile of ad
- 62. Optimizing Content Delivery What Leads to Startup Delay? Manifest File: List of Available Streams Player Chooses a Stream Stream Manifest: List of Video Segments Player Downloads Segments into buffer Video Plays
- 63. Optimizing Content Delivery What Leads to Startup Delay? #EXTM3U# EXT-X-STREAM-INF:BANDWIDTH=8500000,RESOLUTION=1920x1080,sunflower1080/index1080.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=200000,RESOLUTION=416x234,sunflower234/index234.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=400000,RESOLUTION=480x270,sunflower270/index270.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=600000,RESOLUTION=640x360,sunflower360_600k/index360_600k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=1200000,RESOLUTION=640x360,sunflower360_1200k/index360_1200k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=3500000,RESOLUTION=960x540,sunflower540/index540.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=5000000,RESOLUTION=1280x720,sunflower720_5000k/index720_5000k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=6500000,RESOLUTION=1280x720,sunflower720_6500k/index720_6500k.m3u8 Example Manifest file:
- 64. Optimizing Content Delivery Video Streaming Manifest File: List of Available Streams Player selects 8.5 MBPS stream Stream Manifest: List of Video Segments Buffer takes a long time to fill Video Does Not Play Player immediately changes the stream choice to 600KBPS
- 65. Optimizing Content Delivery What Leads to Startup Delay? #EXTM3U# EXT-X-STREAM-INF:BANDWIDTH=8500000,RESOLUTION=1920x1080,sunflower1080/index1080.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=200000,RESOLUTION=416x234,sunflower234/index234.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=400000,RESOLUTION=480x270,sunflower270/index270.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=600000,RESOLUTION=640x360,sunflower360_600k/index360_600k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=1200000,RESOLUTION=640x360,sunflower360_1200k/index360_1200k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=3500000,RESOLUTION=960x540,sunflower540/index540.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=5000000,RESOLUTION=1280x720,sunflower720_5000k/index720_5000k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=6500000,RESOLUTION=1280x720,sunflower720_6500k/index720_6500k.m3u8 Example Manifest file: 8.5 MBPS is HIGH throughput for initial streaming Best Practice: Pick middle throughput to balance startup time and quality
- 66. Optimizing Content Delivery As long as Video download is faster than Playback…. What Leads to Stalls?
- 67. Optimizing Content Delivery What Leads to Stalls? Video Download slower than playback, so the video stalls Buffer is filling, but video has not resumed
- 68. Optimizing Content Delivery Balancing the Network with Playback Player uses available streams to balance download with playback
- 69. Optimizing Content Delivery Video Streaming Large jumps in throughput can lead to streaming issues
- 70. Optimizing Content Delivery Video Streaming Large throughput gaps can lead to many stream changes – which can be visible to user
- 71. Optimizing Content Delivery Video Streaming #EXTM3U# EXT-X-STREAM-INF:BANDWIDTH=8500000,RESOLUTION=1920x1080,sunflower1080/index1080.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=200000,RESOLUTION=416x234,sunflower234/index234.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=400000,RESOLUTION=480x270,sunflower270/index270.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=600000,RESOLUTION=640x360,sunflower360_600k/index360_600k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=1200000,RESOLUTION=640x360,sunflower360_1200k/index360_1200k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=3500000,RESOLUTION=960x540,sunflower540/index540.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=5000000,RESOLUTION=1280x720,sunflower720_5000k/index720_5000k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=6500000,RESOLUTION=1280x720,sunflower720_6500k/index720_6500k.m3u8
- 72. Performance Summary 1.Delivery Speed 1.CDNs 2.Reduce redirects 2.Content Delivery 1) Text Compression 2) Image Sizing, Quality and Format 3) Video Bitrate
- 73. Summary Web: WebPageTest https://www.webpagetest.org WebsiteSpeedTest https://Webspeedtest.cloudinary.com Native: Video Optimizer https://developer.att.com/Video-Optimizer High Performance Android Apps http://bit.ly/HighPerformanceAndroidApps Images: Cloudinary https://www.cloudinary.com http://www.responsivebreakpoints.com/ Tooling