Web authoring

CSS optimization (a.k.a. minimization, cleaning, or tidying) removes white-space and comments, merges similar selectors, removes redundant properties, and cleans up a CSS file to make it more compact. The optimized file is smaller and faster to send to a site visitor. This article uses the CSS Tidy optimizer and measures the improvement first for CSS from 30 popular web sites, and second for CSS from 30 site themes for the Drupal content management system. Unfortunately, in all cases the improvement is small and will not have a noticeable impact on page load times.

Removing HTML white-space (spaces, tabs, blank lines, and comments) makes a file slightly smaller and faster to send to a site visitor. The improvement you get depends upon how verbose your HTML is to start with. This article uses the HTML Tidy optimizer and measures the improvement for a sample web site and 22 different standard themes or page templates. Each theme generates different HTML and shows a different level of improvement from HTML optimization. Unfortunately, in all cases the improvement is tiny and probably not worth the effort.

Publishing an email address on a web page invites more spam. Protect your address by masking it from the email harvesters (spambots) used by spammers. This article tests 50 masking methods against 23 harvesters to see which methods work to stop spammers, and which do not.

A typical web page bar chart uses an image from a presentation or spreadsheet application. The network latency cost for the image is high, slowing down the web site. Instead, create bars using rows of Unicode block characters: █. The characters are much faster to download and they scale well as the font size is changed.

CSS defines only three bullet shapes: disc, circle, and square. To get custom bullets, web designers use small bullet images. The network latency cost for these images is high, slowing down the web site. Instead, avoid bullet images and use Unicode symbol characters as bullets. Unicode bullets require nothing extra to download and provide thousands of bullet shapes to choose from.

A typical web page color gradient uses a thin GIF or PNG image repeated for the width of the page. However, the network latency cost for the image is high, slowing down the site. Instead, skip the image and draw the gradient with a table and thin rows of varying background colors. The table is much faster to download and looks the same.

JavaScript can expand hierarchical menus in place, without a page reload, but often these scripts are too fancy for their own good. Large scripts and lots of pretty icon images slow down page loads while trying to make fast menus. The result is a net loss and a slower web site. The main problem is network latency, which slows down loading external icon image and JavaScript files. Instead, use Unicode symbol characters to replace custom image icons, then minimize and embed the JavaScript on the page. The result is smaller, it has no external files adding latency delays, and it enables web pages to load much faster.

Spammers use email harvesters (spambots) to scan the text of your web pages looking for email addresses. Protect those addresses by replacing the text address with an image or Flash animation that draws the email address. None of the harvesters tested in this article could read addresses drawn with images or Flash.

A plain email address on a web page is easily found by the email harvesters (spambots) used by spammers. To make it harder to find, split the address into pieces. Separate the pieces with HTML tags or spaces, insert the word “nospam”, replace the “@” with “at”, or put the pieces on separate lines or in separate table cells. The harvester tests reported in this article show that many of these methods work well to stop harvesters.

Email harvesters (spambots) scan your web pages for email addresses to add to spam mailing lists. Keep your address away from them by using JavaScript or CSS to insert your address after the web page has loaded into a visitor’s web browser. The harvester tests reported in this article show that harvesters do not run JavaScript or handle CSS styling, so they won’t find your address.