Book Image

Instant PageSpeed Optimization

By : Sanjeev Jaiswal
Book Image

Instant PageSpeed Optimization

By: Sanjeev Jaiswal

Overview of this book

PageSpeed is an important aspect of web design and site management. It is a Google measure of how well the site performs to technical measurements. PageSpeed can be measured using Google's own tool or a browser plugin. It is used to score sites in indices, and is important from a UI view as it forms a large part of the success of your site.Instant PageSpeed Optimization is a practical, hands-on guide that provides you with a number of clear, step-by-step exercises, which will help you to take advantage of the real power that is behind web optimization techniques, and give you a good grounding in using it in your websites.The book explores topics like HTML standards used for optimization, minifying scripts, and taking care of images, and solves the common errors that users do unknowingly. It will take you through a number of clear, practical recipes that will help you to take advantage of all the possible technologies to make your websitess efficient, fast, and accurate. You will not only learn basic standards to optimize your websites, but you will also learn some advanced level methods such as Apache handling, Flush methods, making AJAX cacheable, setting up browser caches, and reducing image size using CSS sprites. If you want to take advantage of all the necessary methods to make your website faster and efficient, then this book is a must-have.
Table of Contents (7 chapters)

Reducing DOM elements (Intermediate)


If you are going to have a nicely presented website with a lot of animations, images, and contents, you will surely have thousands of DOM elements to be parsed by web browsers to display the page properly. More the number of DOM elements, more the time it would take to load. So, we need to reduce it to a minimal count through different methods. If your website loads slowly and any event is getting delayed due to JavaScript DOM access, it may happen due to excess number of DOM elements. This can be improved by taking care of and by adjusting HTML tags without hampering the actual content or its functions or display.

How to do it...

Run the following command on Firebug's console under the Script tab on whichever website you wish to check the total number of DOM elements:

alert(document.getElementsByTagName('*').length);

For Google.com, it came up to be 325 and for Aliencoders.com, it came up to be 2411.

There is scope of eliminating a few unnecessary tags that are not going to participate in the website's content, layout, and functions, such as nested <div> and <span> tags, which can arrange things properly. This can be done even without making unnecessary nested div tags.

If you are using tables or even nested ones, immediately switch to tableless layout with the help of CSS. If any tag is written for comment purposes, we can remove it in our production website.

How it works...

When any web page uses JavaScript or a JavaScript library, such as jQuery, to display the content or to search the content, it would always start the search from the beginning of the DOM elements. More DOM elements would mean you are compromising with the page loading time and patience of the users.

So, when your website's layout is dependent on CSS and JavaScript, which is but obvious in this era, every DOM elements would be matched with CSS to display it in the desired way. So, less DOM elements means spending less time on CSS and JavaScript matching, which will display the page faster to the end users.

Note

DOM, that is, Document Object Model elements are nothing but HTML tags.

You may try the YUI framework (http://yuilibrary.com/) for your JavaScript and CSS files provided by Yahoo!.