SlideShare a Scribd company logo
It’s Time to Stop Stalling:
Doug Sillars
PentaBAR
February 15, 2018
Mobile/Web Performance and You
@DougSillars
Its timetostopstalling pentabar
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
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

Recommended for you

Its timetostopstalling gdg_hamburg
Its timetostopstalling gdg_hamburgIts timetostopstalling gdg_hamburg
Its timetostopstalling gdg_hamburg

The document discusses optimizing mobile and web performance. It provides tools and best practices for testing performance, including Video Optimizer, WebPageTest, and WebsiteSpeedTest. It covers optimizing content delivery through techniques like CDNs, text compression, responsive images, and selecting appropriate video bitrates. The goal is to improve delivery speed and reduce stalls to provide fast, rich mobile experiences for customers.

Its Time To Stop Stalling BerlinDroid
Its Time To Stop Stalling BerlinDroidIts Time To Stop Stalling BerlinDroid
Its Time To Stop Stalling BerlinDroid

This document discusses optimizing mobile and web performance. It recommends testing websites and apps using tools like WebPageTest and Video Optimizer to analyze loading speeds and identify optimization opportunities. Common issues include large file sizes, unnecessary redirects, low quality images, and high bitrate videos. The document provides best practices for faster content delivery such as text compression, responsive images, and adding multiple streaming options. The goal is to balance fast initial loads with smooth streaming by addressing these performance bottlenecks.

Its timetostopstalling gdg_bruxelles
Its timetostopstalling gdg_bruxellesIts timetostopstalling gdg_bruxelles
Its timetostopstalling gdg_bruxelles

The document discusses optimizing mobile and web performance. It provides tools and best practices for testing performance, optimizing content delivery, and reducing latency. Specifically, it recommends using CDNs to improve delivery speed, compressing text, optimizing image size and quality, and selecting appropriate video bitrates. Testing tools mentioned include WebPageTest, Video Optimizer, and Cloudinary for images. The goal is to deliver content as fast as possible to improve the user experience.

Its timetostopstalling pentabar
Your Customers Demand
Mobile experiences that
are:
Immersive
Rich
Fast
This can be hard.
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
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

Recommended for you

Its timetostopstalling gdgdusseldorf
Its timetostopstalling gdgdusseldorfIts timetostopstalling gdgdusseldorf
Its timetostopstalling gdgdusseldorf

The document discusses optimizing mobile performance. It recommends testing performance using tools like WebPageTest and Video Optimizer. It then provides tips for optimizing content delivery through techniques like text compression, responsive images at appropriate sizes and quality levels, and choosing optimal video bitrates. The overall goal is to balance delivery speed, network conditions and quality of experience for users.

Its timetostopstalling cambridgemot
Its timetostopstalling cambridgemotIts timetostopstalling cambridgemot
Its timetostopstalling cambridgemot

This document discusses optimizing mobile and web performance through testing, analyzing, and improving the delivery of content such as images, videos, and text. It provides an overview of common tools for testing performance, such as WebPageTest and Video Optimizer. It then covers best practices for optimizing different types of content, including compressing text and images, using responsive images, lazy loading images, optimizing video quality and formats, and configuring video streaming and delivery. The goal is to understand current performance and make targeted improvements to provide fast, high-quality experiences for users on mobile.

Its timetostopstalling limerick
Its timetostopstalling limerickIts timetostopstalling limerick
Its timetostopstalling limerick

Doug Sillars presented on optimizing mobile performance. He discussed common tools for testing performance like Video Optimizer and WebPageTest. Best practices for optimization included using HTTP/2, image formats like WebP and SVG, responsive images, lazy loading, and video format/quality adjustments. Factors that can impact video startup like manifest files, available bitrates, and 3rd party interference were also covered. The goal was to learn how to test mobile sites and apps, identify issues, and apply optimizations to deliver fast, high quality experiences to users.

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
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!
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.
Best Practices– Test Results
Connections
Files and Images
HTML
Security
Video

Recommended for you

Its timetostopstalling londroid
Its timetostopstalling londroidIts timetostopstalling londroid
Its timetostopstalling londroid

This document discusses optimizing mobile performance. It recommends testing performance with tools like WebPageTest and Video Optimizer. It then provides tips for optimizing content delivery such as compressing text, resizing and compressing images, preloading video correctly, and starting video streams at a low bitrate for faster loading. The document stresses the importance of mobile performance and outlines best practices.

Mot cph when its just too slow
Mot cph when its just too slowMot cph when its just too slow
Mot cph when its just too slow

This document discusses mobile application performance testing. It begins by explaining how fast is perceived by humans, with 100ms seen as instant, 1s as an acceptable delay, and 10s as the limit to maintain focus. It then discusses various performance studies showing user frustration and abandonment rates related to load speeds. The document goes on to describe benchmarking applications, identifying fixes, optimizing through various techniques, and retesting. Specific areas covered in more depth include optimizing images through size, quality, format, caching and lazy loading. Other topics include content delivery networks, animating GIFs, and network information.

Cork ux Meetup
Cork ux MeetupCork ux Meetup
Cork ux Meetup

Delivering images and video quickly and efficiently is important for user experience. Images make up 75% of web content and large downloads can cause delays and user frustration. Optimizing images involves choosing efficient formats like JPEG and PNG, compressing while maintaining quality, and making images responsive. Video startup delays over 2 seconds increase abandonment. Managing bandwidth and providing multiple quality streams allows balancing network conditions. Formats like MP4 and WebP are generally better than GIFs. Lazy-loading and previews further improve performance. With the right optimizations, images and video can be both beautiful and fast.

WebPageTest
Tests Websites on Remote
Browsers
1. Enter Website
2. Set Test Location
3. Choose Device & Browser
4. Options
5. GO!
WebPageTest Results
Optimizing Content Delivery
1.Delivery Speed
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

Recommended for you

Its timetostopstalling gdg_dublin
Its timetostopstalling gdg_dublinIts timetostopstalling gdg_dublin
Its timetostopstalling gdg_dublin

Doug Sillars presented on optimizing mobile and web performance. He discussed how delays of just a few seconds can negatively impact user experience and business metrics. He then provided best practices for testing performance, optimizing content delivery speed through techniques like CDNs, text compression, responsive images, and adjusting video bitrates. Sillars recommended tools like WebPageTest, Video Optimizer, and Cloudinary to help optimize and measure performance. The overall presentation focused on identifying and reducing delays to improve user experiences on mobile and web.

Mobile App Performance, Dublin MOT
Mobile App Performance, Dublin MOTMobile App Performance, Dublin MOT
Mobile App Performance, Dublin MOT

This document summarizes Doug Sillars' presentation on optimizing mobile and web performance. The presentation covered testing performance with tools like Video Optimizer and WebPageTest, optimizing content delivery through techniques like HTTP/2, image optimization, lazy loading images, and video delivery best practices. Sillars stressed the importance of performance, noting that slow load times can cause high abandonment rates and lost revenue.

Ux connect london_fastandbeautiful
Ux connect london_fastandbeautifulUx connect london_fastandbeautiful
Ux connect london_fastandbeautiful

This document discusses optimizing images and video for fast delivery on mobile. It recommends 4 simple image optimizations: reducing quality to 85%, using WebP format, resizing images responsively, and lazy loading images. For video, it suggests stripping audio from silent videos, resizing videos for mobile, and auditing third party videos. Testing sites with WebPageTest and analyzing trends with HttpArchive can help optimize content delivery.

Optimizing Content Delivery
1.Delivery Speed
Optimizing Content Delivery
1.Delivery Speed: Content Delivery Networks
CDNs cache your
content at
various locations
around the
world – reducing
the round trip
time
Optimizing Content Delivery
1.Delivery Speed
Optimizing Content Delivery
1.Delivery Speed

Recommended for you

Nl when its just too slow
Nl when its just too slowNl when its just too slow
Nl when its just too slow

<SUMMARY> The document provides tips for optimizing images and other content to improve performance on mobile devices. It discusses how humans perceive speed and common performance benchmarks. It then gives recommendations around profiling and benchmarking sites, optimizing image size, quality, format, caching, and lazy loading. Specific techniques include resizing images, adjusting quality levels, using responsive images, leveraging formats like WebP and SVG, image previews, and avoiding animated GIFs. The goal is to deliver content as fast as possible on slower mobile networks and devices. </SUMMARY>

Testing Mobile App Performance MOT Edinburgh
Testing Mobile App Performance MOT EdinburghTesting Mobile App Performance MOT Edinburgh
Testing Mobile App Performance MOT Edinburgh

This document discusses optimizing mobile application performance through testing. It begins by explaining that fast performance is a human perception, with delays of 100ms feeling instantaneous, 1s still allowing for an uninterrupted train of thought, and 10s being the limit to keep focus. It then discusses benchmarking applications to identify issues, making optimizations, testing fixes, and launching optimized versions. Specific techniques covered include profiling network conditions, testing on low-end devices, setting speed goals, optimizing JSON responses, image sizes/formats/quality, and caching. The overall message is that thorough testing across devices and networks is needed to optimize mobile application speed for the best user experience.

Threadneedle when its just too slow
Threadneedle when its just too slowThreadneedle when its just too slow
Threadneedle when its just too slow

This document discusses optimizing mobile application performance through testing. It begins by explaining that performance is a human perception, with delays of 100ms feeling instantaneous, 1s still allowing for an uninterrupted train of thought, and 10s being the limit to maintain focus. It then discusses benchmarking applications to understand current performance, identifying fixes, optimizing through things like image size and format, caching, and lazy loading. The overall message is that thorough testing across devices and networks is needed to optimize mobile applications for speed.

Optimizing Content Delivery
1.Delivery Speed: Redirects
Optimizing Content Delivery
1.Delivery Speed: Redirects
Optimizing Content Delivery
1.Delivery Speed: Redirects
Optimizing Content Delivery
1.Delivery Speed
2.Content Delivery

Recommended for you

Hamburg web perf meetup
Hamburg web perf meetupHamburg web perf meetup
Hamburg web perf meetup

1. Images and video make up 75% of web content and large file sizes can significantly slow down page loads and reduce user engagement. 2. Optimizing images by choosing efficient formats, compressing while maintaining quality, lazy loading, and responsive loading techniques can dramatically reduce file sizes while preserving visual quality. 3. For video, choosing appropriate streaming formats and bitrates to match network conditions and preloading content helps minimize startup delays that can cause users to abandon the video experience.

Imagesandvideo voxxeddays
Imagesandvideo voxxeddaysImagesandvideo voxxeddays
Imagesandvideo voxxeddays

This document discusses optimizing images and video for fast delivery on mobile websites. It provides four simple optimizations: adjusting image quality, format, sizing, and lazy loading. SVG, WebP and responsive images are recommended over other formats. Videos should be resized, have audio removed if unneeded, and only download what will be displayed. Background videos especially should be optimized for mobile screens. Network conditions and customer needs like data savings should also be considered. Tools like ImageMagick, Cloudinary and WebPageTest can help with optimizations.

Its Time To Stop Stalling Bucharest
Its Time To Stop Stalling BucharestIts Time To Stop Stalling Bucharest
Its Time To Stop Stalling Bucharest

This document summarizes Doug Sillars' presentation on mobile and web performance optimization. It discusses how delays impact user behavior, with 53% abandoning mobile sites after 3 seconds. Testing tools like Video Optimizer and WebPageTest are recommended. Best practices include optimizing delivery speed with CDNs, reducing redirects, compressing text, optimizing images for size and format, and choosing appropriate video bitrates. The summary highlights key areas of content delivery, testing, and tools to measure and improve performance.

Optimizing Content Delivery
Optimizing Content Delivery
Text Compression
Screen filled via:
130 KB JSON file
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"
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

Recommended for you

Android Network Performance
Android Network PerformanceAndroid Network Performance
Android Network Performance

A deck on how to improve performance of mobile apps and websites. Presented at DGD DevFest, Glasgow, March 17, 2018

mobileperformancenetwork
Its timetostopstalling mobilecologne
Its timetostopstalling mobilecologneIts timetostopstalling mobilecologne
Its timetostopstalling mobilecologne

The document discusses optimizing mobile and web performance. It recommends testing performance using tools like WebPageTest and Video Optimizer. Some key optimizations include using content delivery networks to improve delivery speed, compressing text files, optimizing image size and quality, and choosing appropriate video bitrates. The summary highlights testing and optimization strategies for delivery speed, content delivery, images, and video.

Devoxx be fast and beautiful images
Devoxx be fast and beautiful imagesDevoxx be fast and beautiful images
Devoxx be fast and beautiful images

This document provides an overview of optimizing images and video for delivery on mobile devices. It discusses four main optimizations for images: quality, format, sizing, and lazy loading. For quality, it recommends using 85% quality for JPEG images. For format, it suggests using formats like WebP, SVG and responsive images. For sizing, it discusses generating responsive image sizes. For lazy loading, it covers techniques to delay loading images until they are visible. For video, it discusses optimizations like preloading, resizing video, removing audio from non-playing videos, and optimizing video delivery through techniques like manifest files and adaptive bitrate streaming.

Optimizing Content Delivery
Text Compression: Trends
https://dougsillars.com/2017/10/18/text-compression-really-works-to-speed-your-app/
Optimizing Content Delivery
Images
Optimizing Content Delivery
Image EXIF
30 KB
5 KB of text data
16% potential savings
Optimizing Content Delivery
Images
2560 px
1440 px
1555x1200 pixels

Recommended for you

Mobile era fastandbeautiful
Mobile era fastandbeautifulMobile era fastandbeautiful
Mobile era fastandbeautiful

This document discusses optimizing images and video for mobile delivery. It begins by noting that images and video make up 75% of web content. It then outlines four simple optimizations for images: quality, format, sizing, and lazy loading. For each optimization, it provides examples and data on usage. It finds that adjusting quality to 85%, using responsive images, and lazy loading can significantly improve performance. For video, it discusses startup time, buffering, file size reduction techniques like removing audio and resizing, and delivery via streaming. The overall message is that minor optimizations to images and especially video can have large impacts on mobile performance and user experience.

Its time to stop stalling novi sad
Its time to stop stalling novi sadIts time to stop stalling novi sad
Its time to stop stalling novi sad

The document discusses optimizing content delivery for mobile performance. It begins with testing tools like Video Optimizer and WebPageTest to analyze mobile site performance. Common issues identified are long connection times, large files like images and videos, and lack of responsive delivery for different devices and network conditions. Best practices recommended to improve performance include using content delivery networks to cache content globally, compressing text and images, optimizing video formats and bitrates, and delivering the appropriate format and quality based on device and network. The goal is to minimize load times and avoid stalls during playback.

Devfest Siberia Fast and Beautiful Images and Video
Devfest Siberia Fast and Beautiful Images and VideoDevfest Siberia Fast and Beautiful Images and Video
Devfest Siberia Fast and Beautiful Images and Video

This document provides an overview of optimizing images and video delivery for mobile websites. It discusses four simple image optimizations: adjusting quality, choosing optimal file formats like WebP and SVG, resizing images responsively, and lazy loading images. It also covers optimizing video delivery through techniques like preloading strategically, resizing background videos appropriately, minimizing third party dependencies, and configuring adaptive bitrate streaming. The goal is to reduce payload sizes and improve load performance.

Optimizing Content Delivery
Image Pixel Count
2560 px
1440 px
720x556 pixels
Optimizing Content Delivery
Image Quality
2560 px
1440 px
85% Quality
Optimizing Content Delivery
Image Quality
2560 px
1440 px
85% Quality
Optimizing Content Delivery
Images: Putting it Together
2560 px
1440 px
85% Quality & 720x556 pixels

Recommended for you

Perf ug fastandbeautiful
Perf ug fastandbeautifulPerf ug fastandbeautiful
Perf ug fastandbeautiful

This document provides an overview of optimizing images and video delivery for mobile websites. It discusses four image optimization techniques: reducing quality to 85%, using formats like WebP and SVG, resizing images responsively, and lazy loading. It also covers optimizing video delivery through techniques like preloading strategically, reducing background video size, using third-party players carefully, and providing multiple bitrate streams in manifest files. The goal is to reduce data usage and delays to improve the mobile user experience.

Bordeaux js fastandbeautiful
Bordeaux js fastandbeautifulBordeaux js fastandbeautiful
Bordeaux js fastandbeautiful

This document discusses optimizing images and video delivery for mobile websites. It provides 4 simple optimizations for images: quality, format, sizing, and lazy loading. For image quality, it recommends 85% quality for most images. For format, it suggests using webp, svg, and jpeg. For sizing, it discusses using responsive images at different breakpoints. For lazy loading, it notes the performance benefits. It also covers optimizing video delivery through formats, sizing, preloading, and streaming using adaptive bitrates in the manifest file. The goal is to reduce file sizes, speed up loading, and improve the user experience on mobile.

Notts js fastandbeautiful
Notts js fastandbeautifulNotts js fastandbeautiful
Notts js fastandbeautiful

This document discusses optimizing images and video for fast delivery on mobile websites. It provides 4 simple optimizations for images: quality, format, sizing, and lazy loading. For video, it recommends stripping audio from silent videos, resizing videos for mobile, and starting video streaming at lower bitrates. Testing tools mentioned include WebPageTest, HTTPArchive, ImageMagick, and libraries for lazy loading and responsive images. The overall message is that images and video can be both beautiful and fast with the right optimizations.

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!
Optimizing Content Delivery
Images and Devices
https://twitter.com/paulcalvano/status/928751141843808256
Optimizing Content Delivery
Responsive Images
<picture>
<source media="(max-width: 480px)"
srcset="http://res.cloudinary.com/dougsillars/image/upload/c_scale,e_sepia:80,q_auto,w_320/v1517928
350/AlbaIulia.jpg">
<source media="(max-width: 768px)"
srcset="http://res.cloudinary.com/dougsillars/image/upload/c_scale,q_auto,w_488/v1517928350/AlbaIul
ia.jpg">
<source media="(max-width: 1024px)"
srcset="http://res.cloudinary.com/dougsillars/image/upload/c_scale,e_sepia:80,q_auto,w_768/v1517928
350/AlbaIulia.jpg">
<img src="http://res.cloudinary.com/dougsillars/image/upload/c_scale,q_auto,w_1024/v1517928350/AlbaIulia.jpg"
alt="Alba Iulia.">
</picture>
http://www.responsivebreakpoints.com/
Optimizing Content Delivery
Animated GIFs
Original MP4
1.4 MB

Recommended for you

Fast and Beautiful Images and Video
Fast and Beautiful Images and VideoFast and Beautiful Images and Video
Fast and Beautiful Images and Video

This document discusses how to optimize images and video for fast delivery on mobile websites. The key points covered are: 1. Images and video make up 75% of web content and large downloads can cause delays, frustration for users, and loss of engagement and revenue. 2. Image compression techniques like lossy compression and adjusting quality levels can significantly reduce file sizes while maintaining acceptable quality levels. 3. Responsive images ensure the right sized image is delivered for different screen sizes. 4. Vector images are infinitely scalable and can reduce file sizes compared to raster images like JPEGs. 5. Techniques for video like optimizing the manifest file and balancing delivery across available streams can reduce startup

imagesresponsive imagespreview images
Dublin Tech Talks
Dublin Tech TalksDublin Tech Talks
Dublin Tech Talks

Doug Sillars presented on mobile and web performance optimization at the Dublin Tech Talks on July 10, 2018. He discussed how slow loading times negatively impact user experience and engagement. Sillars recommended tools like Video Optimizer and WebPageTest to audit performance, and emphasized optimizing delivery speed through content delivery networks and image/text compression. He also provided tips for optimizing images, videos, and animations to reduce payload sizes and startup delays. The goal is to create fast, rich mobile experiences for users.

Its timetostopstalling androidcork
Its timetostopstalling androidcorkIts timetostopstalling androidcork
Its timetostopstalling androidcork

The document discusses various tools and techniques for optimizing mobile and web performance, including testing sites using tools like WebPageTest and Video Optimizer, optimizing delivery of content like images, videos and text through techniques like compression and CDNs, and best practices for mobile video streaming to reduce startup delays and prevent stalls. Common issues covered include large file sizes, unnecessary connections, and choosing video streams appropriate for available bandwidth.

Optimizing Content Delivery
Animated GIFs
Animated GIF
3.8 MB
270% larger
Optimizing Content Delivery
Animated GIFs
Optimizing Content Delivery
Animated GIFs
MP4: 256 colors
247KB
93% smaller
Optimizing Content Delivery
Animated GIFs
Video Tags are slow:
Video is not pre-loaded, will be last to download
<video autoplay loop muted controls = "false” src="goats.mp4" />
Img tags are fast!
<picture>
<source type="video/mp4" srcset="cats.mp4">
<source type="image/webp" srcset="cats.webp">
<img src="cats.gif">
</picture>
https://calendar.perfplanet.com/2017/animated-gif-without-the-gif/

Recommended for you

Beautiful and Fast Images
Beautiful and Fast Images Beautiful and Fast Images
Beautiful and Fast Images

This document discusses optimizing images and video for fast delivery on mobile devices. It begins by outlining how delays in loading content can negatively impact users and business metrics. It then provides recommendations for optimizing four aspects of images: quality, format, sizing, and lazy loading. Specific techniques are presented for each along with data showing their real-world impact. Video delivery optimization is also covered, including strategies to improve startup times. The document concludes by stating that images and video can be both beautiful and fast with the right optimizations.

Edi react fastandbeautiful
Edi react fastandbeautifulEdi react fastandbeautiful
Edi react fastandbeautiful

This document discusses optimizing images for faster page loads. It recommends four simple optimizations: reducing image quality to 85%, using smaller file formats like WebP and SVG, sizing images appropriately through responsive images, and lazy loading images not initially visible. Implementing these optimizations can significantly reduce page weight and load times. The document provides examples and tools for each technique and data on their real-world impacts on mobile sites.

Waterford fast images
Waterford fast imagesWaterford fast images
Waterford fast images

The document discusses optimizing images and video for fast delivery on websites. It provides tips for improving image quality, format, sizing and lazy loading. For video, it discusses optimizing startup time by preloading strategically and balancing network usage. Testing tools mentioned include WebPageTest, HttpArchive, ImageMagick and SSIM. The goal is to make images and video both beautiful and fast loading.

Optimizing Content Delivery
46
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
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
Video Startup Delay
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

Recommended for you

Fastandbeautiful belfast
Fastandbeautiful belfastFastandbeautiful belfast
Fastandbeautiful belfast

This document discusses optimizing images for fast delivery on mobile websites. It outlines four simple image optimizations: quality, format, sizing, and lazy loading. For each optimization, it provides examples and data on current usage. Quality recommends compressing to 85% without significant quality loss. Format suggests using webp and svg where supported. Sizing involves generating responsive images at appropriate breakpoints. Lazy loading delays image loading to above the fold content. Together, these techniques can significantly improve performance without compromising quality.

Fastandbeautiful gdg sacremento
Fastandbeautiful gdg sacrementoFastandbeautiful gdg sacremento
Fastandbeautiful gdg sacremento

The document discusses optimizing images for fast loading on mobile websites. It provides 4 simple optimizations: 1) reducing image quality, 2) using optimized formats like WebP and SVG, 3) proper sizing of images for different screen sizes, and 4) lazy loading images that are not immediately visible. The document shows how these techniques can significantly reduce image file sizes and page load times based on analyzing millions of mobile sites. It also discusses alternatives to animated GIFs like using video formats and preview images to improve performance.

Fastandbeautiful gd glittlerock
Fastandbeautiful gd glittlerockFastandbeautiful gd glittlerock
Fastandbeautiful gd glittlerock

This document discusses optimizing images for fast loading on mobile devices. It recommends four simple image optimizations: 1) reducing image quality to 85%, 2) using efficient formats like WebP and SVG, 3) sizing images appropriately for the viewport, and 4) lazy loading images below the fold. Data from the HTTP Archive is presented showing the prevalence and impact of these optimizations. Specific techniques like responsive images and image processing tools are also outlined.

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
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:
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
Optimizing Content Delivery
Video Streaming: Test on Fast Wi-Fi

Recommended for you

Fastandbeautiful webinale
Fastandbeautiful webinaleFastandbeautiful webinale
Fastandbeautiful webinale

This document provides tips for optimizing images for fast loading on mobile websites. It discusses 4 key optimizations: image quality, format, sizing, and lazy loading. For quality, it recommends reducing to 85% quality, which can significantly reduce file sizes with little quality loss. For format, it promotes webp and svg over jpeg and png. For sizing, it stresses responsive images at different breakpoints to reduce file sizes. And for lazy loading, it shows how delaying non-critical image loads can improve performance. Measurements are given for how widely these techniques have been adopted and the potential savings in load times and data usage. Tools are also listed for implementing the various optimizations.

Ai powered images-pythonljubjana
Ai powered images-pythonljubjanaAi powered images-pythonljubjana
Ai powered images-pythonljubjana

Doug Sillars discusses using AI and machine learning to simplify image preparation for the web. He describes how object detection can be used for cropping, blurring objects, object removal, and generating alt text. Sillars also provides examples of using these techniques like detecting and adding sunglasses to images. He concludes that image processing with AI and ML can automate tasks like cropping, blurring, object removal, and alt text generation for image optimization.

Fastandbeautiful zagrebtechsauna
Fastandbeautiful zagrebtechsaunaFastandbeautiful zagrebtechsauna
Fastandbeautiful zagrebtechsauna

Doug Sillars presented techniques for optimizing image performance on mobile websites. He discussed 4 key optimizations: 1) reducing image quality to 85%, 2) using efficient formats like WebP and SVG, 3) sizing images responsively, and 4) lazy loading images below the fold. Testing of millions of sites showed these techniques can reduce page load times by up to 15 seconds and data usage by up to 2.4 MB. Sillars recommended tools like ImageMagick, responsive breakpoints generator, and Cloudinary to help automate image optimizations.

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
Optimizing Content Delivery
As long as Video download is faster than Playback….
What Leads to Stalls?
Optimizing Content Delivery
What Leads to Stalls?
Video Download
slower than playback,
so the video stalls
Buffer is filling, but
video has not resumed
Optimizing Content Delivery
Balancing the Network with Playback
Player uses available streams to balance download with playback

Recommended for you

Video js zagreb
Video js zagrebVideo js zagreb
Video js zagreb

This document provides best practices for optimizing video delivery and streaming on the web. It discusses how video files are large and can negatively impact page load times and user data plans. Some key recommendations include resizing videos appropriately for different screens, avoiding downloading hidden or unnecessary videos, using video streaming with a low starting bitrate for faster startup times, stripping audio from silent videos, and auditing third party video hosts for performance issues. The document emphasizes optimizing video delivery to respect mobile users' limited data plans.

Vkmdp cologne
Vkmdp cologneVkmdp cologne
Vkmdp cologne

The document discusses optimizing video delivery for performance and reducing data usage. It provides examples of HTML code to embed video on a webpage and control playback behavior. It also summarizes techniques for resizing and encoding videos to different formats and bitrates to reduce file sizes while maintaining quality, such as using services like Cloudinary. Optimizing factors like video size, bitrate, and delivery method can help videos start faster and reduce stalling to improve the user experience.

Ai powered images-gdgtirana
Ai powered images-gdgtiranaAi powered images-gdgtirana
Ai powered images-gdgtirana

Doug Sillars discusses using AI and machine learning to simplify image preparation for the web. He covers how object detection can be used for cropping, blurring, object removal, and generating alt text. Sillars also demonstrates training a model to add sunglasses to faces in images without manually editing thousands of photos. In summary, AI and ML techniques can automate many image editing tasks previously done manually to optimize images for websites and apps.

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
Optimizing Content Delivery
Video Streaming
Large jumps in
throughput
can lead to
streaming
issues
Optimizing Content Delivery
Video Streaming
Large throughput gaps can lead to
many stream changes – which can be
visible to user
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

Recommended for you

A rt gallery pantalks
A rt gallery pantalksA rt gallery pantalks
A rt gallery pantalks

The document discusses building augmented reality (AR) and virtual reality (VR) experiences in the browser. It demonstrates how to create a VR art gallery using A-Frame, optimize images and 3D models for AR/VR, and add AR functionality using AR.js markers. It also covers upcoming AR capabilities using WebXR, such as hit testing. Optimizations like resizing images, format and quality adjustments, cropping, and Draco compression are recommended to reduce file sizes and loading times. The talk concludes with resources for setting up a sample AR art gallery project and suggestions for art assets to include.

Ai powered images-sarajevo
Ai powered images-sarajevoAi powered images-sarajevo
Ai powered images-sarajevo

This document discusses using AI and machine learning to simplify image preparation for the web. It describes how object detection can be used for cropping, blurring, object removal, and generating alt text. It provides examples of using these techniques to automatically add sunglasses to faces in images. The document concludes by mentioning that image processing with AI and ML can simplify tasks like cropping, blurring, object removal, and alt text generation for images on the web.

A rt gallery hub387
A rt gallery hub387A rt gallery hub387
A rt gallery hub387

The document discusses building augmented reality (AR) and virtual reality (VR) experiences in the browser. It begins with an overview of what can currently be done with AR and VR using the A-Frame framework, including examples of building VR art galleries and scenes. It then covers adding AR capabilities using AR.js by placing 3D objects with markers. The document emphasizes optimizations needed for AR and VR like reducing file sizes and optimizing image quality and format. It also discusses the potential for building AR experiences using the emerging WebXR standard. Throughout it provides links to code samples and resources.

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
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
Contest
1.Examine top websites from Alexa 500 with
https://Webspeedtest.cloudinary.com
1.https://www.alexa.com/topsites
2.Find the site with the most potential savings for
images.
3.Tweet the result URL with hashtags #PentaBAR
#Cloudinary
4.Whoever finds the biggest savings will win a prize
courtesy of Cloudinary
Questions or issues? @dougsillars on twitter or e-mail highperformanceandroid@gmail.com

More Related Content

What's hot

Its timetostopstalling mot_paris
Its timetostopstalling mot_parisIts timetostopstalling mot_paris
Its timetostopstalling mot_paris
Doug Sillars
 
Mobile web perf Amsterdam Tech Tips
Mobile web perf Amsterdam Tech TipsMobile web perf Amsterdam Tech Tips
Mobile web perf Amsterdam Tech Tips
Doug Sillars
 
GDG Manchester
GDG ManchesterGDG Manchester
GDG Manchester
Doug Sillars
 
Its timetostopstalling gdg_hamburg
Its timetostopstalling gdg_hamburgIts timetostopstalling gdg_hamburg
Its timetostopstalling gdg_hamburg
Doug Sillars
 
Its Time To Stop Stalling BerlinDroid
Its Time To Stop Stalling BerlinDroidIts Time To Stop Stalling BerlinDroid
Its Time To Stop Stalling BerlinDroid
Doug Sillars
 
Its timetostopstalling gdg_bruxelles
Its timetostopstalling gdg_bruxellesIts timetostopstalling gdg_bruxelles
Its timetostopstalling gdg_bruxelles
Doug Sillars
 
Its timetostopstalling gdgdusseldorf
Its timetostopstalling gdgdusseldorfIts timetostopstalling gdgdusseldorf
Its timetostopstalling gdgdusseldorf
Doug Sillars
 
Its timetostopstalling cambridgemot
Its timetostopstalling cambridgemotIts timetostopstalling cambridgemot
Its timetostopstalling cambridgemot
Doug Sillars
 
Its timetostopstalling limerick
Its timetostopstalling limerickIts timetostopstalling limerick
Its timetostopstalling limerick
Doug Sillars
 
Its timetostopstalling londroid
Its timetostopstalling londroidIts timetostopstalling londroid
Its timetostopstalling londroid
Doug Sillars
 
Mot cph when its just too slow
Mot cph when its just too slowMot cph when its just too slow
Mot cph when its just too slow
Doug Sillars
 
Cork ux Meetup
Cork ux MeetupCork ux Meetup
Cork ux Meetup
Doug Sillars
 
Its timetostopstalling gdg_dublin
Its timetostopstalling gdg_dublinIts timetostopstalling gdg_dublin
Its timetostopstalling gdg_dublin
Doug Sillars
 
Mobile App Performance, Dublin MOT
Mobile App Performance, Dublin MOTMobile App Performance, Dublin MOT
Mobile App Performance, Dublin MOT
Doug Sillars
 
Ux connect london_fastandbeautiful
Ux connect london_fastandbeautifulUx connect london_fastandbeautiful
Ux connect london_fastandbeautiful
Doug Sillars
 
Nl when its just too slow
Nl when its just too slowNl when its just too slow
Nl when its just too slow
Doug Sillars
 
Testing Mobile App Performance MOT Edinburgh
Testing Mobile App Performance MOT EdinburghTesting Mobile App Performance MOT Edinburgh
Testing Mobile App Performance MOT Edinburgh
Doug Sillars
 
Threadneedle when its just too slow
Threadneedle when its just too slowThreadneedle when its just too slow
Threadneedle when its just too slow
Doug Sillars
 
Hamburg web perf meetup
Hamburg web perf meetupHamburg web perf meetup
Hamburg web perf meetup
Doug Sillars
 
Imagesandvideo voxxeddays
Imagesandvideo voxxeddaysImagesandvideo voxxeddays
Imagesandvideo voxxeddays
Doug Sillars
 

What's hot (20)

Its timetostopstalling mot_paris
Its timetostopstalling mot_parisIts timetostopstalling mot_paris
Its timetostopstalling mot_paris
 
Mobile web perf Amsterdam Tech Tips
Mobile web perf Amsterdam Tech TipsMobile web perf Amsterdam Tech Tips
Mobile web perf Amsterdam Tech Tips
 
GDG Manchester
GDG ManchesterGDG Manchester
GDG Manchester
 
Its timetostopstalling gdg_hamburg
Its timetostopstalling gdg_hamburgIts timetostopstalling gdg_hamburg
Its timetostopstalling gdg_hamburg
 
Its Time To Stop Stalling BerlinDroid
Its Time To Stop Stalling BerlinDroidIts Time To Stop Stalling BerlinDroid
Its Time To Stop Stalling BerlinDroid
 
Its timetostopstalling gdg_bruxelles
Its timetostopstalling gdg_bruxellesIts timetostopstalling gdg_bruxelles
Its timetostopstalling gdg_bruxelles
 
Its timetostopstalling gdgdusseldorf
Its timetostopstalling gdgdusseldorfIts timetostopstalling gdgdusseldorf
Its timetostopstalling gdgdusseldorf
 
Its timetostopstalling cambridgemot
Its timetostopstalling cambridgemotIts timetostopstalling cambridgemot
Its timetostopstalling cambridgemot
 
Its timetostopstalling limerick
Its timetostopstalling limerickIts timetostopstalling limerick
Its timetostopstalling limerick
 
Its timetostopstalling londroid
Its timetostopstalling londroidIts timetostopstalling londroid
Its timetostopstalling londroid
 
Mot cph when its just too slow
Mot cph when its just too slowMot cph when its just too slow
Mot cph when its just too slow
 
Cork ux Meetup
Cork ux MeetupCork ux Meetup
Cork ux Meetup
 
Its timetostopstalling gdg_dublin
Its timetostopstalling gdg_dublinIts timetostopstalling gdg_dublin
Its timetostopstalling gdg_dublin
 
Mobile App Performance, Dublin MOT
Mobile App Performance, Dublin MOTMobile App Performance, Dublin MOT
Mobile App Performance, Dublin MOT
 
Ux connect london_fastandbeautiful
Ux connect london_fastandbeautifulUx connect london_fastandbeautiful
Ux connect london_fastandbeautiful
 
Nl when its just too slow
Nl when its just too slowNl when its just too slow
Nl when its just too slow
 
Testing Mobile App Performance MOT Edinburgh
Testing Mobile App Performance MOT EdinburghTesting Mobile App Performance MOT Edinburgh
Testing Mobile App Performance MOT Edinburgh
 
Threadneedle when its just too slow
Threadneedle when its just too slowThreadneedle when its just too slow
Threadneedle when its just too slow
 
Hamburg web perf meetup
Hamburg web perf meetupHamburg web perf meetup
Hamburg web perf meetup
 
Imagesandvideo voxxeddays
Imagesandvideo voxxeddaysImagesandvideo voxxeddays
Imagesandvideo voxxeddays
 

Similar to Its timetostopstalling pentabar

Its Time To Stop Stalling Bucharest
Its Time To Stop Stalling BucharestIts Time To Stop Stalling Bucharest
Its Time To Stop Stalling Bucharest
Doug Sillars
 
Android Network Performance
Android Network PerformanceAndroid Network Performance
Android Network Performance
Doug Sillars
 
Its timetostopstalling mobilecologne
Its timetostopstalling mobilecologneIts timetostopstalling mobilecologne
Its timetostopstalling mobilecologne
Doug Sillars
 
Devoxx be fast and beautiful images
Devoxx be fast and beautiful imagesDevoxx be fast and beautiful images
Devoxx be fast and beautiful images
Doug Sillars
 
Mobile era fastandbeautiful
Mobile era fastandbeautifulMobile era fastandbeautiful
Mobile era fastandbeautiful
Doug Sillars
 
Its time to stop stalling novi sad
Its time to stop stalling novi sadIts time to stop stalling novi sad
Its time to stop stalling novi sad
Doug Sillars
 
Devfest Siberia Fast and Beautiful Images and Video
Devfest Siberia Fast and Beautiful Images and VideoDevfest Siberia Fast and Beautiful Images and Video
Devfest Siberia Fast and Beautiful Images and Video
Doug Sillars
 
Perf ug fastandbeautiful
Perf ug fastandbeautifulPerf ug fastandbeautiful
Perf ug fastandbeautiful
Doug Sillars
 
Bordeaux js fastandbeautiful
Bordeaux js fastandbeautifulBordeaux js fastandbeautiful
Bordeaux js fastandbeautiful
Doug Sillars
 
Notts js fastandbeautiful
Notts js fastandbeautifulNotts js fastandbeautiful
Notts js fastandbeautiful
Doug Sillars
 
Fast and Beautiful Images and Video
Fast and Beautiful Images and VideoFast and Beautiful Images and Video
Fast and Beautiful Images and Video
Doug Sillars
 
Dublin Tech Talks
Dublin Tech TalksDublin Tech Talks
Dublin Tech Talks
Doug Sillars
 
Its timetostopstalling androidcork
Its timetostopstalling androidcorkIts timetostopstalling androidcork
Its timetostopstalling androidcork
Doug Sillars
 
Beautiful and Fast Images
Beautiful and Fast Images Beautiful and Fast Images
Beautiful and Fast Images
Doug Sillars
 
Edi react fastandbeautiful
Edi react fastandbeautifulEdi react fastandbeautiful
Edi react fastandbeautiful
Doug Sillars
 
Waterford fast images
Waterford fast imagesWaterford fast images
Waterford fast images
Doug Sillars
 

Similar to Its timetostopstalling pentabar (16)

Its Time To Stop Stalling Bucharest
Its Time To Stop Stalling BucharestIts Time To Stop Stalling Bucharest
Its Time To Stop Stalling Bucharest
 
Android Network Performance
Android Network PerformanceAndroid Network Performance
Android Network Performance
 
Its timetostopstalling mobilecologne
Its timetostopstalling mobilecologneIts timetostopstalling mobilecologne
Its timetostopstalling mobilecologne
 
Devoxx be fast and beautiful images
Devoxx be fast and beautiful imagesDevoxx be fast and beautiful images
Devoxx be fast and beautiful images
 
Mobile era fastandbeautiful
Mobile era fastandbeautifulMobile era fastandbeautiful
Mobile era fastandbeautiful
 
Its time to stop stalling novi sad
Its time to stop stalling novi sadIts time to stop stalling novi sad
Its time to stop stalling novi sad
 
Devfest Siberia Fast and Beautiful Images and Video
Devfest Siberia Fast and Beautiful Images and VideoDevfest Siberia Fast and Beautiful Images and Video
Devfest Siberia Fast and Beautiful Images and Video
 
Perf ug fastandbeautiful
Perf ug fastandbeautifulPerf ug fastandbeautiful
Perf ug fastandbeautiful
 
Bordeaux js fastandbeautiful
Bordeaux js fastandbeautifulBordeaux js fastandbeautiful
Bordeaux js fastandbeautiful
 
Notts js fastandbeautiful
Notts js fastandbeautifulNotts js fastandbeautiful
Notts js fastandbeautiful
 
Fast and Beautiful Images and Video
Fast and Beautiful Images and VideoFast and Beautiful Images and Video
Fast and Beautiful Images and Video
 
Dublin Tech Talks
Dublin Tech TalksDublin Tech Talks
Dublin Tech Talks
 
Its timetostopstalling androidcork
Its timetostopstalling androidcorkIts timetostopstalling androidcork
Its timetostopstalling androidcork
 
Beautiful and Fast Images
Beautiful and Fast Images Beautiful and Fast Images
Beautiful and Fast Images
 
Edi react fastandbeautiful
Edi react fastandbeautifulEdi react fastandbeautiful
Edi react fastandbeautiful
 
Waterford fast images
Waterford fast imagesWaterford fast images
Waterford fast images
 

More from Doug Sillars

Fastandbeautiful belfast
Fastandbeautiful belfastFastandbeautiful belfast
Fastandbeautiful belfast
Doug Sillars
 
Fastandbeautiful gdg sacremento
Fastandbeautiful gdg sacrementoFastandbeautiful gdg sacremento
Fastandbeautiful gdg sacremento
Doug Sillars
 
Fastandbeautiful gd glittlerock
Fastandbeautiful gd glittlerockFastandbeautiful gd glittlerock
Fastandbeautiful gd glittlerock
Doug Sillars
 
Fastandbeautiful webinale
Fastandbeautiful webinaleFastandbeautiful webinale
Fastandbeautiful webinale
Doug Sillars
 
Ai powered images-pythonljubjana
Ai powered images-pythonljubjanaAi powered images-pythonljubjana
Ai powered images-pythonljubjana
Doug Sillars
 
Fastandbeautiful zagrebtechsauna
Fastandbeautiful zagrebtechsaunaFastandbeautiful zagrebtechsauna
Fastandbeautiful zagrebtechsauna
Doug Sillars
 
Video js zagreb
Video js zagrebVideo js zagreb
Video js zagreb
Doug Sillars
 
Vkmdp cologne
Vkmdp cologneVkmdp cologne
Vkmdp cologne
Doug Sillars
 
Ai powered images-gdgtirana
Ai powered images-gdgtiranaAi powered images-gdgtirana
Ai powered images-gdgtirana
Doug Sillars
 
A rt gallery pantalks
A rt gallery pantalksA rt gallery pantalks
A rt gallery pantalks
Doug Sillars
 
Ai powered images-sarajevo
Ai powered images-sarajevoAi powered images-sarajevo
Ai powered images-sarajevo
Doug Sillars
 
A rt gallery hub387
A rt gallery hub387A rt gallery hub387
A rt gallery hub387
Doug Sillars
 
Ai powered images-zurichpydata
Ai powered images-zurichpydataAi powered images-zurichpydata
Ai powered images-zurichpydata
Doug Sillars
 
Fastandbeautiful vienna
Fastandbeautiful viennaFastandbeautiful vienna
Fastandbeautiful vienna
Doug Sillars
 
Ai powered images-opieaivienna
Ai powered images-opieaiviennaAi powered images-opieaivienna
Ai powered images-opieaivienna
Doug Sillars
 
A rt gallery devfestlondon
A rt gallery devfestlondonA rt gallery devfestlondon
A rt gallery devfestlondon
Doug Sillars
 
Fastandbeautiful devfest london
Fastandbeautiful devfest londonFastandbeautiful devfest london
Fastandbeautiful devfest london
Doug Sillars
 
A rt gallery cardiff
A rt gallery cardiffA rt gallery cardiff
A rt gallery cardiff
Doug Sillars
 
Ai powered images-mobileera
Ai powered images-mobileeraAi powered images-mobileera
Ai powered images-mobileera
Doug Sillars
 
Fastandbeautiful oredev
Fastandbeautiful oredevFastandbeautiful oredev
Fastandbeautiful oredev
Doug Sillars
 

More from Doug Sillars (20)

Fastandbeautiful belfast
Fastandbeautiful belfastFastandbeautiful belfast
Fastandbeautiful belfast
 
Fastandbeautiful gdg sacremento
Fastandbeautiful gdg sacrementoFastandbeautiful gdg sacremento
Fastandbeautiful gdg sacremento
 
Fastandbeautiful gd glittlerock
Fastandbeautiful gd glittlerockFastandbeautiful gd glittlerock
Fastandbeautiful gd glittlerock
 
Fastandbeautiful webinale
Fastandbeautiful webinaleFastandbeautiful webinale
Fastandbeautiful webinale
 
Ai powered images-pythonljubjana
Ai powered images-pythonljubjanaAi powered images-pythonljubjana
Ai powered images-pythonljubjana
 
Fastandbeautiful zagrebtechsauna
Fastandbeautiful zagrebtechsaunaFastandbeautiful zagrebtechsauna
Fastandbeautiful zagrebtechsauna
 
Video js zagreb
Video js zagrebVideo js zagreb
Video js zagreb
 
Vkmdp cologne
Vkmdp cologneVkmdp cologne
Vkmdp cologne
 
Ai powered images-gdgtirana
Ai powered images-gdgtiranaAi powered images-gdgtirana
Ai powered images-gdgtirana
 
A rt gallery pantalks
A rt gallery pantalksA rt gallery pantalks
A rt gallery pantalks
 
Ai powered images-sarajevo
Ai powered images-sarajevoAi powered images-sarajevo
Ai powered images-sarajevo
 
A rt gallery hub387
A rt gallery hub387A rt gallery hub387
A rt gallery hub387
 
Ai powered images-zurichpydata
Ai powered images-zurichpydataAi powered images-zurichpydata
Ai powered images-zurichpydata
 
Fastandbeautiful vienna
Fastandbeautiful viennaFastandbeautiful vienna
Fastandbeautiful vienna
 
Ai powered images-opieaivienna
Ai powered images-opieaiviennaAi powered images-opieaivienna
Ai powered images-opieaivienna
 
A rt gallery devfestlondon
A rt gallery devfestlondonA rt gallery devfestlondon
A rt gallery devfestlondon
 
Fastandbeautiful devfest london
Fastandbeautiful devfest londonFastandbeautiful devfest london
Fastandbeautiful devfest london
 
A rt gallery cardiff
A rt gallery cardiffA rt gallery cardiff
A rt gallery cardiff
 
Ai powered images-mobileera
Ai powered images-mobileeraAi powered images-mobileera
Ai powered images-mobileera
 
Fastandbeautiful oredev
Fastandbeautiful oredevFastandbeautiful oredev
Fastandbeautiful oredev
 

Its timetostopstalling pentabar

  • 1. It’s Time to Stop Stalling: Doug Sillars PentaBAR February 15, 2018 Mobile/Web Performance and You @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
  • 6. Your Customers Demand Mobile experiences that are: Immersive Rich Fast This can be hard.
  • 7. 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
  • 8. 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
  • 9. 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
  • 10. 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!
  • 11. 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.
  • 12. Best Practices– Test Results Connections Files and Images HTML Security Video
  • 13. WebPageTest Tests Websites on Remote Browsers 1. Enter Website 2. Set Test Location 3. Choose Device & Browser 4. Options 5. GO!
  • 16. 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
  • 18. Optimizing Content Delivery 1.Delivery Speed: Content Delivery Networks CDNs cache your content at various locations around the world – reducing the round trip time
  • 24. Optimizing Content Delivery 1.Delivery Speed 2.Content Delivery
  • 26. Optimizing Content Delivery Text Compression Screen filled via: 130 KB JSON file
  • 27. 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"
  • 28. 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
  • 29. Optimizing Content Delivery Text Compression: Trends https://dougsillars.com/2017/10/18/text-compression-really-works-to-speed-your-app/
  • 31. Optimizing Content Delivery Image EXIF 30 KB 5 KB of text data 16% potential savings
  • 32. Optimizing Content Delivery Images 2560 px 1440 px 1555x1200 pixels
  • 33. Optimizing Content Delivery Image Pixel Count 2560 px 1440 px 720x556 pixels
  • 34. Optimizing Content Delivery Image Quality 2560 px 1440 px 85% Quality
  • 35. Optimizing Content Delivery Image Quality 2560 px 1440 px 85% Quality
  • 36. Optimizing Content Delivery Images: Putting it Together 2560 px 1440 px 85% Quality & 720x556 pixels
  • 37. 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!
  • 38. Optimizing Content Delivery Images and Devices https://twitter.com/paulcalvano/status/928751141843808256
  • 39. Optimizing Content Delivery Responsive Images <picture> <source media="(max-width: 480px)" srcset="http://res.cloudinary.com/dougsillars/image/upload/c_scale,e_sepia:80,q_auto,w_320/v1517928 350/AlbaIulia.jpg"> <source media="(max-width: 768px)" srcset="http://res.cloudinary.com/dougsillars/image/upload/c_scale,q_auto,w_488/v1517928350/AlbaIul ia.jpg"> <source media="(max-width: 1024px)" srcset="http://res.cloudinary.com/dougsillars/image/upload/c_scale,e_sepia:80,q_auto,w_768/v1517928 350/AlbaIulia.jpg"> <img src="http://res.cloudinary.com/dougsillars/image/upload/c_scale,q_auto,w_1024/v1517928350/AlbaIulia.jpg" alt="Alba Iulia."> </picture> http://www.responsivebreakpoints.com/
  • 40. Optimizing Content Delivery Animated GIFs Original MP4 1.4 MB
  • 41. Optimizing Content Delivery Animated GIFs Animated GIF 3.8 MB 270% larger
  • 43. Optimizing Content Delivery Animated GIFs MP4: 256 colors 247KB 93% smaller
  • 44. Optimizing Content Delivery Animated GIFs Video Tags are slow: Video is not pre-loaded, will be last to download <video autoplay loop muted controls = "false” src="goats.mp4" /> Img tags are fast! <picture> <source type="video/mp4" srcset="cats.mp4"> <source type="image/webp" srcset="cats.webp"> <img src="cats.gif"> </picture> https://calendar.perfplanet.com/2017/animated-gif-without-the-gif/
  • 46. 46 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
  • 47. 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
  • 49. 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
  • 50. 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:
  • 51. 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
  • 52. Optimizing Content Delivery Video Streaming: Test on Fast Wi-Fi
  • 53. 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
  • 54. Optimizing Content Delivery As long as Video download is faster than Playback…. What Leads to Stalls?
  • 55. Optimizing Content Delivery What Leads to Stalls? Video Download slower than playback, so the video stalls Buffer is filling, but video has not resumed
  • 56. Optimizing Content Delivery Balancing the Network with Playback Player uses available streams to balance download with playback
  • 57. 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
  • 58. Optimizing Content Delivery Video Streaming Large jumps in throughput can lead to streaming issues
  • 59. Optimizing Content Delivery Video Streaming Large throughput gaps can lead to many stream changes – which can be visible to user
  • 60. 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
  • 61. 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
  • 62. 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
  • 63. Contest 1.Examine top websites from Alexa 500 with https://Webspeedtest.cloudinary.com 1.https://www.alexa.com/topsites 2.Find the site with the most potential savings for images. 3.Tweet the result URL with hashtags #PentaBAR #Cloudinary 4.Whoever finds the biggest savings will win a prize courtesy of Cloudinary Questions or issues? @dougsillars on twitter or e-mail highperformanceandroid@gmail.com

Editor's Notes

  1. 1.8 MP
  2. 0.4 MP
  3. file:///Users/demo/Documents/reponsiveimages.html
  4. file:///Users/demo/Documents/reponsiveimages.html