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

Reduce the number of DOM elements


If we have a sophisticated website, that means we have to download more bytes and slower DOM access in JavaScript. There is a difference between looping through 500 DOM elements versus 5,000 DOM elements, if you need to add an event handler to an element.

If a page has a huge number of DOM elements, it means that there is room for improvement. So, you should go through with your code and enhance it without removing valuable content.

Using a CSS framework such as Bootstrap or Foundation can eliminate those issues, because they have a proper structure. Also, using the reset.css style sheet file, the developer can remove default browser formatting. Additionally, if you are going to use a new HTML tag, use it only when it makes sense semantically, and not because it renders.

Finally, testing the number of DOM elements on a page is easy. Simply type the following command in browser toolbar console:

document.getElementsByTagName('*').length