Book Image

Mobile Web Performance Optimization

By : S. S. Niranga
Book Image

Mobile Web Performance Optimization

By: S. S. Niranga

Overview of this book

With users increasingly accessing the web on mobile devices, it’s crucial to make sure your website is built to seamlessly fit this radical change in user behavior. Mobile Web Performance Optimization is designed to help you do exactly that – it’s been created to help you build fast, and mobile-user-friendly websites and applications. Featuring guidance through a range of techniques and tools essential to modern mobile development, this accessible guide will make sure you’re delivering a seamless and intuitive experience for your website’s users. Begin by exploring the fundamental components of mobile web design and website optimization, before learning how to put the concepts into practice. Featuring cross-platform solutions, insights on developing lightweight yet robust UI, and insights on how to successfully manage data, this application development book takes you through every stage in the development process – so you can be confident that you’re asking the right questions and using the best tools in the most effective way. By the end, you’ll understand implicitly what it means to ‘build for performance’- you’ll be a more confident developer, capable of building projects that adapt to a changing world.
Table of Contents (14 chapters)
Mobile Web Performance Optimization
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface
Index

Video and images via media queries


Media assets' weight is one of the biggest enemies of mobile devices. It says that roughly 60 to 70 percent of a site's weight is consumed by images, and this has been growing rapidly due to high-density displays.

When we build responsive websites, we remove the width and height attribute of an image, and we set the max-width 100 percent using CSS. By doing this, we make this image responsive and whatever the screen size is, the image will be resized for that screen.

Of course, this strategy requires developers to use images that are at least as large as the largest screen size at which they'll be displayed; if an image is expected as part of a layout, that could be anywhere from 320 px to 1,600 px, and the developer still requires to serve an image with an inherent width of at least 1,600 px. That's a tremendous amount of drained bandwidth and processing power for a mobile device, with no obvious advantage to the user. This bandwidth cost is increased by...