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 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.
The document discusses optimizing mobile and web performance. It provides tips for testing performance using tools like Video Optimizer and WebPageTest. It also gives best practices for content delivery such as compressing text, optimizing image size and quality, and choosing appropriate video bitrates. The summary highlights reducing redirects, using CDNs, text compression, responsive images, and selecting the right video bitrate to improve performance.
Its timetostopstalling sw_mobile_bristolDoug Sillars
Optimizing mobile performance is important to provide users with fast, immersive experiences. Testing tools like WebPageTest and Video Optimizer can identify opportunities to improve delivery speed through techniques like content compression, responsive images, and adaptive video bitrates. Reducing page weight by optimizing images, video formats and removing unnecessary redirects and third party interference can help speed load times and reduce frustration.
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, responsive images, lazy loading, and video streaming. Specific techniques covered include using Scalable Vector Graphics (SVG), WebP format, appropriate image sizes and quality levels, and optimizing video formats and manifest files.
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 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 like using a content delivery network to improve delivery speed, compressing content, optimizing images, and improving video streaming. The key points are that delivery speed, proper content sizing, and balancing network conditions are important for optimizing content and avoiding delays that hurt the user experience.
Mobile App and Web Performance TestingDoug Sillars
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.
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.
The document discusses optimizing mobile and web performance. It provides tips for testing performance using tools like Video Optimizer and WebPageTest. It also gives best practices for content delivery such as compressing text, optimizing image size and quality, and choosing appropriate video bitrates. The summary highlights reducing redirects, using CDNs, text compression, responsive images, and selecting the right video bitrate to improve performance.
Its timetostopstalling sw_mobile_bristolDoug Sillars
Optimizing mobile performance is important to provide users with fast, immersive experiences. Testing tools like WebPageTest and Video Optimizer can identify opportunities to improve delivery speed through techniques like content compression, responsive images, and adaptive video bitrates. Reducing page weight by optimizing images, video formats and removing unnecessary redirects and third party interference can help speed load times and reduce frustration.
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, responsive images, lazy loading, and video streaming. Specific techniques covered include using Scalable Vector Graphics (SVG), WebP format, appropriate image sizes and quality levels, and optimizing video formats and manifest files.
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 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 like using a content delivery network to improve delivery speed, compressing content, optimizing images, and improving video streaming. The key points are that delivery speed, proper content sizing, and balancing network conditions are important for optimizing content and avoiding delays that hurt the user experience.
Mobile App and Web Performance TestingDoug Sillars
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 selecting appropriate video bitrates. The goal is to improve delivery speed and reduce stalls to provide fast, rich mobile experiences for customers.
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 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.
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 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 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.
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.
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, 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.
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 provides tips for optimizing images for fast loading on mobile devices. It recommends profiling network conditions and device capabilities to understand real-world performance. Images should be compressed and resized for different devices. Formats like JPEG, PNG, and WebP work best. Lazy loading and responsive images can further improve speed. Caching, gzip encoding, and a quality focus on differences imperceptible to humans can make large files much smaller without reducing quality.
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.
Delivering Fast and Beautiful Images outlines 4 simple optimizations for image performance: 1) reducing image quality, 2) using optimized formats like WebP and JPEG, 3) sizing images appropriately, and 4) lazy loading images. The document provides data on current image usage and the significant performance benefits realized by implementing these optimizations, such as reducing page load times by up to 15 seconds. Proper image optimization is key to delivering both fast and visually appealing content.
<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>
Doug Sillars discusses optimizing image performance on websites. He outlines 4 simple optimizations: 1) reducing image quality, 2) using optimized formats like WebP and SVG, 3) sizing images appropriately, and 4) lazy loading images below the fold. Properly implementing these techniques can significantly improve page load times and reduce data usage. Sillars also provides tips on monitoring image usage in the wild and considerations for different network conditions and user expectations.
Delivering Fast and Beautiful Images outlines 4 simple optimizations for image performance:
1) Reduce image quality for smaller file sizes without noticeable quality loss. 2) Use optimized formats like WebP and responsive images. 3) Resize images to actual display size. 4) Lazy load images to speed page loads. The document provides examples and data showing these techniques can significantly reduce data usage and page load times.
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.
This document provides an overview of optimizing images for faster page loads and better user experience. It discusses four main image optimizations: quality, format, sizing, and lazy loading. For each optimization, it explains the technique, provides examples, and shows data on adoption rates and typical page load improvements. Key points covered include compressing JPEG quality, using responsive images and formats like WebP, resizing images to actual displayed sizes, and lazy loading images below the fold. The document emphasizes that even small optimizations across an entire site can yield significant speed and data savings.
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.
Doug Sillars discusses optimizing images for fast delivery on mobile websites. He outlines 4 simple optimizations: 1) reducing image quality, 2) using optimized formats like JPEG, PNG and WebP, 3) sizing images appropriately through responsive images, and 4) lazy loading images below the fold. Formats like SVG and GIFs can further reduce file sizes. Tools like ImageMagick and libraries like LazySizes can help automate optimizations to deliver fast and beautiful images.
Doug Sillars presented optimizations for delivering fast and beautiful images 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 based on screen size, and 4) lazy loading images not visible on the screen. Sillars showed that these techniques can significantly reduce image file sizes and page load times without compromising visual quality for the user. He also provided recommendations for additional optimizations like avoiding animated GIFs and base64 encoding of images.
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.
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 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.
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 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 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.
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.
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, 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.
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 provides tips for optimizing images for fast loading on mobile devices. It recommends profiling network conditions and device capabilities to understand real-world performance. Images should be compressed and resized for different devices. Formats like JPEG, PNG, and WebP work best. Lazy loading and responsive images can further improve speed. Caching, gzip encoding, and a quality focus on differences imperceptible to humans can make large files much smaller without reducing quality.
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.
Delivering Fast and Beautiful Images outlines 4 simple optimizations for image performance: 1) reducing image quality, 2) using optimized formats like WebP and JPEG, 3) sizing images appropriately, and 4) lazy loading images. The document provides data on current image usage and the significant performance benefits realized by implementing these optimizations, such as reducing page load times by up to 15 seconds. Proper image optimization is key to delivering both fast and visually appealing content.
<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>
Doug Sillars discusses optimizing image performance on websites. He outlines 4 simple optimizations: 1) reducing image quality, 2) using optimized formats like WebP and SVG, 3) sizing images appropriately, and 4) lazy loading images below the fold. Properly implementing these techniques can significantly improve page load times and reduce data usage. Sillars also provides tips on monitoring image usage in the wild and considerations for different network conditions and user expectations.
Delivering Fast and Beautiful Images outlines 4 simple optimizations for image performance:
1) Reduce image quality for smaller file sizes without noticeable quality loss. 2) Use optimized formats like WebP and responsive images. 3) Resize images to actual display size. 4) Lazy load images to speed page loads. The document provides examples and data showing these techniques can significantly reduce data usage and page load times.
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.
This document provides an overview of optimizing images for faster page loads and better user experience. It discusses four main image optimizations: quality, format, sizing, and lazy loading. For each optimization, it explains the technique, provides examples, and shows data on adoption rates and typical page load improvements. Key points covered include compressing JPEG quality, using responsive images and formats like WebP, resizing images to actual displayed sizes, and lazy loading images below the fold. The document emphasizes that even small optimizations across an entire site can yield significant speed and data savings.
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.
Doug Sillars discusses optimizing images for fast delivery on mobile websites. He outlines 4 simple optimizations: 1) reducing image quality, 2) using optimized formats like JPEG, PNG and WebP, 3) sizing images appropriately through responsive images, and 4) lazy loading images below the fold. Formats like SVG and GIFs can further reduce file sizes. Tools like ImageMagick and libraries like LazySizes can help automate optimizations to deliver fast and beautiful images.
Doug Sillars presented optimizations for delivering fast and beautiful images 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 based on screen size, and 4) lazy loading images not visible on the screen. Sillars showed that these techniques can significantly reduce image file sizes and page load times without compromising visual quality for the user. He also provided recommendations for additional optimizations like avoiding animated GIFs and base64 encoding of images.
The document discusses optimizing image delivery for fast page loads by covering techniques like reducing image quality, using smaller file formats, sizing images responsively, and lazy loading images below the fold to reduce initial payload size and speed up rendering. It provides examples and metrics on how these optimizations can significantly improve page load speeds and reduce data usage.
The document discusses optimizing images for fast delivery on mobile websites. It outlines 4 simple optimizations: 1) reducing image quality, 2) using efficient formats like JPEG, WebP and SVG, 3) sizing images appropriately for devices, and 4) lazy loading images below the fold. The author analyzes real-world usage and savings from these techniques, such as median page load time reductions of 2.83 seconds. Additional tips include avoiding animated GIFs and encoding videos instead, and adapting images based on user's network and device capabilities. Tools mentioned for optimizing and analyzing images include ImageMagick, SSIM, Responsive Breakpoints and Cloudinary.
This document summarizes techniques for optimizing image delivery for fast page loads, including: reducing image quality, using optimized formats like WebP and SVG, sizing images appropriately, and lazy loading images below the fold. It provides examples of each technique and data on their impact, such as median savings of 2.83 seconds and 419KB from quality optimization. Recommended tools for optimizing and measuring performance are also listed. The overall message is that with the right optimizations, images can be both beautiful and fast loading.
The document discusses optimizing images for fast delivery on mobile websites. It recommends 4 simple optimizations: 1) reducing image quality to 85%, 2) using efficient formats like JPEG, PNG and WebP, 3) sizing images appropriately for different screens, and 4) lazy loading images below the fold. Implementing these optimizations can significantly reduce data usage and speed up page loads. The document also provides tips on vector images, responsive images and converting animated GIFs to video.
The document discusses optimizing images for fast loading on mobile websites. It recommends 4 simple image optimizations: 1) reducing image quality to 85%, 2) using efficient formats like JPEG, PNG and WebP, 3) sizing images appropriately for the viewport, and 4) lazy loading images below the fold. Implementing these techniques, such as optimizing quality, format, sizing and lazy loading, can significantly improve page load speeds and reduce data usage.
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 provides a summary of techniques for optimizing image performance on mobile websites. It discusses optimizing image quality, format, sizing through responsive images, and lazy loading images. The techniques can significantly reduce data usage and improve page load speeds. Optimizing images is one of the most effective ways to improve mobile performance.
The document provides 4 simple optimizations for delivering fast and beautiful images on mobile: 1) Reduce image quality for smaller file sizes without significant quality loss, 2) Use efficient formats like WebP and SVG, 3) Optimize image sizes for different breakpoints, and 4) Lazy load images to speed up page loads. It discusses each optimization in detail and provides examples and tools to implement them. Overall, the document aims to help optimize image delivery for improved mobile performance.
This document provides an overview of optimizing image delivery for faster page loads. It discusses four main techniques: adjusting image quality, choosing optimal file formats like WebP and SVG, sizing images responsively, and lazy loading images below the fold. For each technique, the document shows how widespread adoption has led to significant median savings in page load times and data usage based on analyzing millions of mobile sites. It also provides examples and tools for implementing each optimization.
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 four simple optimizations for delivering fast and beautiful images and video on mobile: 1) reduce image quality, 2) use optimized formats like WebP and SVG, 3) size images appropriately, and 4) lazy load images below the fold. He demonstrated how these techniques can significantly reduce page load times and data usage. Sillars also discussed best practices for video delivery and alternatives to animated GIFs that can reduce file sizes substantially. Throughout, he provided real-world examples and tools to help optimize multimedia content for mobile performance.
Similar to Its timetostopstalling gdgdusseldorf (13)
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 building augmented reality (AR) and virtual reality (VR) experiences in the browser. It introduces AR.js and A-Frame for creating AR and VR using web technologies. Examples are provided of building a VR art gallery in A-Frame and adding AR functionality using AR.js and marker-based tracking. Optimization techniques for images, 3D models, and video are covered to improve performance for AR and VR. Upcoming capabilities for AR in WebXR are previewed. The document aims to demonstrate what can be done with AR and VR today in the browser and highlights areas that will continue advancing.
Communications Mining Series - Zero to Hero - Session 1DianaGray10
This session provides introduction to UiPath Communication Mining, importance and platform overview. You will acquire a good understand of the phases in Communication Mining as we go over the platform with you. Topics covered:
• Communication Mining Overview
• Why is it important?
• How can it help today’s business and the benefits
• Phases in Communication Mining
• Demo on Platform overview
• Q/A
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
Threats to mobile devices are more prevalent and increasing in scope and complexity. Users of mobile devices desire to take full advantage of the features
available on those devices, but many of the features provide convenience and capability but sacrifice security. This best practices guide outlines steps the users can take to better protect personal devices and information.
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...SOFTTECHHUB
The choice of an operating system plays a pivotal role in shaping our computing experience. For decades, Microsoft's Windows has dominated the market, offering a familiar and widely adopted platform for personal and professional use. However, as technological advancements continue to push the boundaries of innovation, alternative operating systems have emerged, challenging the status quo and offering users a fresh perspective on computing.
One such alternative that has garnered significant attention and acclaim is Nitrux Linux 3.5.0, a sleek, powerful, and user-friendly Linux distribution that promises to redefine the way we interact with our devices. With its focus on performance, security, and customization, Nitrux Linux presents a compelling case for those seeking to break free from the constraints of proprietary software and embrace the freedom and flexibility of open-source computing.
Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...Zilliz
Join us to introduce Milvus Lite, a vector database that can run on notebooks and laptops, share the same API with Milvus, and integrate with every popular GenAI framework. This webinar is perfect for developers seeking easy-to-use, well-integrated vector databases for their GenAI apps.
UiPath Test Automation using UiPath Test Suite series, part 5DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 5. In this session, we will cover CI/CD with devops.
Topics covered:
CI/CD with in UiPath
End-to-end overview of CI/CD pipeline with Azure devops
Speaker:
Lyndsey Byblow, Test Suite Sales Engineer @ UiPath, Inc.
“An Outlook of the Ongoing and Future Relationship between Blockchain Technologies and Process-aware Information Systems.” Invited talk at the joint workshop on Blockchain for Information Systems (BC4IS) and Blockchain for Trusted Data Sharing (B4TDS), co-located with with the 36th International Conference on Advanced Information Systems Engineering (CAiSE), 3 June 2024, Limassol, Cyprus.
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc
How does your privacy program stack up against your peers? What challenges are privacy teams tackling and prioritizing in 2024?
In the fifth annual Global Privacy Benchmarks Survey, we asked over 1,800 global privacy professionals and business executives to share their perspectives on the current state of privacy inside and outside of their organizations. This year’s report focused on emerging areas of importance for privacy and compliance professionals, including considerations and implications of Artificial Intelligence (AI) technologies, building brand trust, and different approaches for achieving higher privacy competence scores.
See how organizational priorities and strategic approaches to data security and privacy are evolving around the globe.
This webinar will review:
- The top 10 privacy insights from the fifth annual Global Privacy Benchmarks Survey
- The top challenges for privacy leaders, practitioners, and organizations in 2024
- Key themes to consider in developing and maintaining your privacy program
20 Comprehensive Checklist of Designing and Developing a WebsitePixlogix Infotech
Dive into the world of Website Designing and Developing with Pixlogix! Looking to create a stunning online presence? Look no further! Our comprehensive checklist covers everything you need to know to craft a website that stands out. From user-friendly design to seamless functionality, we've got you covered. Don't miss out on this invaluable resource! Check out our checklist now at Pixlogix and start your journey towards a captivating online presence today.
Pushing the limits of ePRTC: 100ns holdover for 100 daysAdtran
At WSTS 2024, Alon Stern explored the topic of parametric holdover and explained how recent research findings can be implemented in real-world PNT networks to achieve 100 nanoseconds of accuracy for up to 100 days.
Essentials of Automations: The Art of Triggers and Actions in FMESafe Software
In this second installment of our Essentials of Automations webinar series, we’ll explore the landscape of triggers and actions, guiding you through the nuances of authoring and adapting workspaces for seamless automations. Gain an understanding of the full spectrum of triggers and actions available in FME, empowering you to enhance your workspaces for efficient automation.
We’ll kick things off by showcasing the most commonly used event-based triggers, introducing you to various automation workflows like manual triggers, schedules, directory watchers, and more. Plus, see how these elements play out in real scenarios.
Whether you’re tweaking your current setup or building from the ground up, this session will arm you with the tools and insights needed to transform your FME usage into a powerhouse of productivity. Join us to discover effective strategies that simplify complex processes, enhancing your productivity and transforming your data management practices with FME. Let’s turn complexity into clarity and make your workspaces work wonders!
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024Neo4j
Neha Bajwa, Vice President of Product Marketing, Neo4j
Join us as we explore breakthrough innovations enabled by interconnected data and AI. Discover firsthand how organizations use relationships in data to uncover contextual insights and solve our most pressing challenges – from optimizing supply chains, detecting fraud, and improving customer experiences to accelerating drug discoveries.
Sudheer Mechineni, Head of Application Frameworks, Standard Chartered Bank
Discover how Standard Chartered Bank harnessed the power of Neo4j to transform complex data access challenges into a dynamic, scalable graph database solution. This keynote will cover their journey from initial adoption to deploying a fully automated, enterprise-grade causal cluster, highlighting key strategies for modelling organisational changes and ensuring robust disaster recovery. Learn how these innovations have not only enhanced Standard Chartered Bank’s data infrastructure but also positioned them as pioneers in the banking sector’s adoption of graph technology.
4. 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
5. 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.
38. Optimizing Content Delivery
Images
A random sample of 1,000 Twitter
images:
67% had room for optimization
(q_auto, f_auto)
Of 63,000 Twitter images, 1: 1000 >
50 KB (as high as 550KB)
https://dougsillars.com/2018/02/27/twitter-and-facebook-profile-images-already-optimized-or-is-
there-room-for-improvement/
50. Video Tags are slow:
Video is not pre-loaded, will be last to download
<video autoplay loop muted playsinline controls = "false” src="goats.mp4" />
Img tags are fast!
<picture>
<source type="video/mp4" srcset=”goats.mp4">
<source type="image/webp" srcset=”goats.webp">
<img src=”goats.gif">
</picture>
Optimizing Content Delivery
Animated GIFs
https://calendar.perfplanet.com/2017/animated-gif-without-the-gif/
52. 52
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
53. Video Startup Delay
After 2 seconds,
every additional
second corresponds
to 5.8% increase in
abandonment
https://www.akamai.com/kr/ko/multimedia/documents/technical-publication/video-stream-quality-impacts-viewer-behavior-inferring-causality-using-quasi-experimental-designs-technical-publication.pdf
56. 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
57. 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:
58. 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
60. 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
62. Optimizing Content Delivery
What Leads to Stalls?
Video Download
slower than playback,
so the video stalls
Buffer is filling, but
video has not resumed