Mobile apps and mobile video need to be delivered quickly to keep your customers happy. This presentation was given in Brasov on 13/02/2018
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.
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.
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.
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 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.
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.
<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>
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 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 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 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.
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 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.
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 delivering fast and beautiful images and video for mobile. It discusses 4 simple image optimizations: quality, format, sizing, and lazy loading. It also covers optimizing video delivery by reducing file sizes, only downloading video that will be displayed, and being mindful of data costs and network conditions for mobile users. The presentation provided examples and metrics on how these optimizations can significantly improve page load speeds and reduce data usage.
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.
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 mobile and web performance. It provides tools for testing performance, such as Video Optimizer and WebPageTest. It also gives best practices for optimizing content delivery, such as using CDNs to reduce delivery time, compressing text, resizing and optimizing image quality and format, and choosing appropriate video bitrates. The overall goals are to improve loading speed, reduce bandwidth usage, and create engaging mobile experiences.
The document discusses optimizing mobile and web performance. It provides tools for testing performance, such as Video Optimizer and WebPageTest. It also gives best practices for optimizing content delivery, such as using CDNs to reduce delivery time, compressing text, resizing and optimizing image quality and format, and choosing appropriate video bitrates. The overall goals are to improve loading speed, reduce bandwidth usage, and create engaging mobile experiences.
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 adjusting video bitrates. The goal is to improve delivery speed and reduce stalls to provide fast, rich mobile experiences for customers.
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.
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 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 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 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.
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.
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.
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 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.
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
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.
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.