Home » Cut the Comments

Cut the Comments

Summary:

Eliminating comments within your HTML, CSS, and JavaScript code helps optimize your web pages for maximum speed.

Computer classes teach “structured programming” with well-commented code as one requirement of good programming practice. However, easily understood code doesn’t make for fast downloads on the Web. By cutting your comments you can shrink your XHTML, CSS, and JavaScript to download faster.

Would You Care to Comment on That?

Comments in code can be safely abbreviated or eliminated without any change in functionality. Comments make it easier for developers and editors to change and maintain content. However, users must download your comments each time they load your page. An example:

<!-- main navigation header goes here -->

An editor can easily find where the main navigation header goes with this verbose comment. However, your users don’t normally see this comment, they just want to quickly view your web page. One solution is to abbreviate comments to save bandwidth, but still give editors clear checkpoints.

<!-- main nav bar -->

No Comment

Even better, use a CMS or script to eliminate comments on the fly. Some sites use commented templates where content is inserted automatically with a content management system. That same CMS or a script can automatically strip out commented code, and even optimize the code by removing whitespace (see http://www.webreference.com/scripts/). This gives you the best of both worlds: heavily commented templates that are easy to understand and change, and optimized code that downloads quickly.

Commented Code

Another common practice we’ve observed on the Web is to leave commented code stored within home pages like some invisible digital graffiti.

<!-- <dt>Dewey Defeats Truman!</dt><dd>In a surprise upset Thomas Dewey defeated Harry Truman...</dd> -->

While this may save the next shift some typing time, it wastes bandwidth and can cause some embarrassing reporting errors with the passage of time.

Conclusive Comments

It pays to act like a dirty politician when commenting your code. By cutting extraneous comments you can streamline your HTML, CSS, and JavaScript to help optimize your web pages. By using commented templates and automatically stripping comments before going live you can have the best of both worlds. One added benefit of terse or “no comment” comments, your sound bytes will become shorter and more appealing.

About the Author

Andy King is the founder of five developer-related sites, and the author of Speed Up Your Site: Web Site Optimization (http://www.speedupyoursite.com) from New Riders Publishing. He publishes the monthly Bandwidth Report, the weekly Optimization Week, and the weekly Speed Tweak of the Week.

Further Reading

Dewey Defeats Truman
American treasures of the Library of Congress, Chicago Daily Tribune, November 3, 1948.
HTML Optimization
Chapter summery from Speed Up Your Site on improving page display speed with optimized HTML for faster page downloads.

Leave a Comment