This document discusses optimizing content delivery for mobile performance. It begins by introducing common tools for testing mobile performance like Video Optimizer and WebPageTest. It then discusses best practices for optimizing delivery speed such as using content delivery networks (CDNs) and image compression. Other topics covered include optimizing images, responsive delivery, animations, and video streaming. The overall message is that optimizing these areas can significantly improve mobile performance and user experience.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
<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>
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
This document summarizes Doug Sillars' presentation on optimizing mobile and web performance. It discusses using tools like Video Optimizer and WebPageTest to test performance. It then provides best practices for optimizing content delivery through techniques like image optimization, text compression, lazy loading images, optimizing animated GIFs and video. It discusses how to prevent startup delays and stalls for video streaming.
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.
The document summarizes best practices for optimizing mobile and web performance based on testing tools and results. It discusses how delays of just a few seconds can negatively impact user experience and conversion rates. It then provides guidance on testing tools like Video Optimizer and WebPageTest to analyze performance. Specific optimization techniques covered include delivery speed, content delivery networks, image optimization, text compression, responsive images, and optimizing video streaming through adaptive bitrate selection. The overall message is that mobile experiences need to be fast to be engaging for users.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
<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 EdinburghDoug Sillars
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.
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.
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.
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.
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.
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.
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.
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.
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 VideoDoug Sillars
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Doug Sillars gave a presentation on using AI to optimize images for the web. He discussed how images dominate web content and explained techniques like cropping, blurring objects, and generating alt text using machine learning models. Sillars also demonstrated how to train custom models for tasks like detecting sunglasses and adding filters to photos. The presentation concluded by emphasizing how AI and ML can simplify and automate image preparation and processing for digital content.
This document provides tips for optimizing images on websites to deliver fast loading speeds while maintaining image quality. It discusses optimizing image quality, format, sizing through responsive images, and lazy loading images below the fold. Key recommendations include using JPEG format at 85% quality, responsive images through picture tags, and lazy loading images to improve page load times and reduce data usage. Tools mentioned for optimizing images include ImageMagick, SSIM, LazySizes, and Cloudinary.
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 objects, object removal, and generating alt text. It also provides examples of training custom models for tasks like automatically adding sunglasses to faces in images. The conclusion emphasizes that image processing with AI and ML can automate tasks like cropping, blurring, object removal, and alt text generation for image preparation.
This document summarizes a presentation about building augmented reality (AR) and virtual reality (VR) experiences in the browser. It discusses using the A-Frame framework to create VR galleries and scenes that can be viewed today. It also covers adding AR capabilities using AR.js by placing 3D objects using markers. The presentation provides examples of optimizing assets for AR/VR experiences, such as resizing images, compressing formats, and using services like Cloudinary. Upcoming capabilities discussed include AR hit testing using the WebXR Device API in Chrome Canary. The document aims to demonstrate that AR does not need to be processor intensive or rely on large amounts of data.
The document discusses optimizing images for fast loading on mobile websites. It outlines 4 simple image optimizations: 1) reducing image quality, 2) using optimized file formats like WebP and JPEG, 3) sizing images appropriately for the viewport, and 4) lazy loading images below the fold. The document provides examples of how each technique can significantly reduce image file sizes and page load times. Testing of real-world websites shows widespread room for improvement in mobile image optimization.
This document summarizes Doug Sillars' presentation on building augmented reality experiences in the browser. Sillars discusses using A-Frame to create VR galleries that can be viewed today in the browser. He then explains how to add AR functionality using AR.js by placing 3D objects with markers. Sillars also covers optimizing assets for AR/VR experiences by reducing file sizes and formats. Finally, he demonstrates early AR capabilities with WebXR by hitting 3D objects in a gallery on mobile.
Doug Sillars discusses using AI and machine learning to simplify image preparation for the web. He describes how object detection can be used for automatic cropping, blurring, object removal, and generating alt text. Sillars also demonstrates training a model to detect sunglasses and apply transparent sunglasses overlays to images. The techniques discussed provide shortcuts for common image editing tasks over manually processing large numbers of images.
The document discusses optimizing images for fast loading on mobile websites. It recommends four simple image optimizations: 1) reducing image quality to 85%, 2) using optimized formats like JPEG, WebP and SVG, 3) sizing images appropriately for the viewport, and 4) lazy loading images below the fold. Implementing these techniques can significantly reduce data usage and speed up page load times. The document also provides examples and tools for implementing each optimization technique.
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
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.
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
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
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
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
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