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

Performance tools in Firefox, Safari, and IE


We discussed Google Chrome's Developer Tools, which we can use to debug our website. However, if you are an IE, Safari, or Firefox user, don't worry, as those browsers offer their own developer's toolbar for developers as well.

Firefox Developer Tools

The same as Chrome, Firefox has a feature called paint flashing, which can be used to find the areas that require repainting. When we turn this feature on, it will tint each region with a random color so we can identify the section easily. Regions that have a heavy paint flashing are the areas that we have to worry about. So, we have to minimize them as much as possible.

To enable paint flashing:

  1. Open Firefox.

  2. Type about:config in the address bar and press Enter.

  3. Accept the warning.

  4. Right click and select New | Boolean.

  5. Type nglayout.debug.paint_flashing.

  6. Set the option to True.

You will see something like the following screenshot when you turned on paint_flashing:

IE 11 Developer Tools

Surprisingly, the IE...