MS FrontPage —

Code Cleanup: Optimizing HTML

A lot of Web purists will give you an earful on how FrontPage produces sloppy, overloaded HTML code. While older versions of the program were definitely guilty of this crime, the accusation has lost some of its bite with FrontPage 2003. The code the program now produces is relatively clean and efficient.

However, FrontPage still gives you an opportunity to clear out HTML elements that you don't want around. A lot of these elements happen to be FrontPage-specific HTML that rankles the aforementioned purists.

This section helps you decide whether or not you'll want to optimize, and what all your options are.

Should You Optimize?

The main reason you'd optimize is to trim the size of your pages so they download faster. Also, if you are using FrontPage to create simple HTML pages and don't want to include any of the program's FrontPage-specific coding, you should optimize.

As you read in Testing Your Site, FrontPage lets you optimize HTML in your development environment. Since many optimization options disable important editing abilities, you should never do this. The only time to even think about using this code cleanup tool is at publish time.

But, unless you have a specific code-cleaning goal in mind, you're better off bypassing most of these cleanup options. Optimizing has two important ramifications you should consider:

  • Most optimizations will render parts of your site uneditable. For instance, removing Dynamic Web Template comments cuts connections between Dynamic Web Templates and dependant files.

    Many a misguided author counts on using a published site as a backup for the development site. This is a very bad idea, because the act of publishing changes some files. In other words, your published site differs slightly from your development site. Turning optimization options on exacerbates the difference. If you optimize, your published site will differ drastically from your development siteturning what was just a bad idea (using the live Web copy of your site as backup) into a catastrophically bad idea.

  • If you let FrontPage strip elements out of your HTML, your pages may end up looking and functioning quite differently than they did on the development site. Check your site's pages thoroughly after you've published.

Simple alternatives to optimization

Before you resort to code cleanup options, there are some simple things you can do to reduce download time. The following basic practices are more effective in reducing download time than most of the optimization settings.

  • Small image sizes. Make sure that all your images are smallin byte size, that is. JPEG and GIF formats already give you a head start. None of these images are going to be very big. However, if you're asking FrontPage to display a file with large dimensions (say, 500 x 500 pixels) in a much smaller space (100 x 100 pixels), you're wasting precious download time. Make sure all your files are sized appropriately. (See Adding Pictures, Formatting Pictures, for details on resizing images.)

  • Use external style sheets to format your pages instead of inline formatting. Cascading Style Sheets tells you all about how to do this.

Optimizing HTML During Publish

If you want to include code cleanup as part of your publishing process, do the following:

  1. Select View » Remote Web site (or click the Web Site tab and, beneath the document window, click Remote Web Site view).

  2. Just above the document window, click the Optimize Published HTML button (if it's not grayed out), on the upper right; or click the Remote Web Site Properties button, and in the dialog box that opens, click the Optimize HTML tab (see Figure 13-7).

    Figure 13-7. HTML optimization options should be used only at publish time. Use them sparingly. If you publish with these options on and find that your site doesn't function correctly afterward, turn off optimization options and publish your site again.

  3. To activate options on this tab, turn on the "When publishing, optimize HTML by removing the following elements:" checkbox, and then choose from the following:

Most Optimize options will render many of your pages uneditable. This means that you'll never be able to copy them back to your development site. Also, letting FrontPage strip elements out of your HTML could result in your pages displaying differently than you expect.

  • All HTML comments. Activates all the "comment" options indented beneath it. You need to turn this on to choose further options.

  • Author-time Web Component comments. Deletes comments that go along with page elements like included content.

  • Browse-time Web Component comments. Clears comments out of all browse-time Web components, like site search boxes and hit counters. If you're publishing with FrontPage or SharePoint services, FrontPage won't let you turn off this option.

  • Theme and Shared Border comments. Removes all comments for themes and shared borders. If you're publishing with FrontPage or SharePoint services, FrontPage grays out this option.

  • Dynamic Web Template comments. Removes comments from Dynamic Web Templates and their linked HTML pages. Turning on this option turns the template into a regular HTML page and breaks the connection between the template and its associated pages.

  • Layout Tables and Cell Formatting comments. Gets rid of all comments FrontPage uses to handle layout tables.

  • Script comments. Clears out all comments from scripts.

  • All other HTML comments. Eliminates any comments in your code (that is all < !- - and - - > tags and their contents.) Developers use comments like this to speak with each other. However, as you read in Cascading Style Sheets (Creating Styles), embedded styles live within comment tags, so your page could lose these as well.

  • HTML leading whitespaces. Removes any empty spaces that begin a line of HTML. This option is the safest and least intrusive cleanup option.

  • HTML all whitespace. Gets rid of all multiple empty spaces in your site's code. This option turns returns and multiple spaces into one space. This can cause problems in some older browsers that can't handle very long lines of code.

  • FrontPage Tracing Image and Interactive Button attributes. Eliminates attributes from tracing images and FrontPage interactive buttons, rendering them uneditable.

  • Generator and ProgID tags. FrontPage plunks some <meta> tags down in the head section of every page. This option deletes them all. If you dislike these tags, you can stop FrontPage from adding them in the first place. "Authoring Modes" on Authoring Modes shows you how.

If you click "Set as Default," on the lower-left corner of the Optimize HTML tab, FrontPage saves your optimization settings for this site.