Latency-friendly customized bullets using Unicode characters

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.

Bullet methods

Let's look at a few typical ways to control bullets on a list, and then a latency-friendly way using Unicode characters.

A typical bullet list using standard bullets

The default bullet is a filled circle. In CSS, set the list-style on the <li> tag to select between bullet shapes and numbering schemes (not discussed here). The three available shapes are usable, but uninspired.

• Disc
• Circle
• Square

A typical bullet list using image bullets

To use a custom bullet image, set the list-style to an image URL. Keep the image about the same size as the font.

Alternatively, disable the list-style bullet and add a CSS background image to each list item. Background image bullets can use CSS sprites to combine multiple bullets into one image file, but they don't print if the visitor has disabled background printing (the default in most browsers).

Custom bullet images are usually small, so the download time is negligable. But every image has a network latency cost as the browser asks for and waits to get the image from the web server. Typical latencies range from 1/10 to 1/2 second. While these seem small, they add up quickly. If you have a dozen different custom bullets, the latency alone can add several seconds to your page's load time. That's very expensive for a few little bullets. To help the page load faster, use Unicode bullets instead of images.

A latency-friendly bullet list using Unicode symbol characters

Unicode has over 100,000 characters for letters, numbers, punctuation, and symbols that span the world's languages. In HTML, use � to insert a Unicode character, replacing 0000 with its unique hex number. For example, ✓ is a check mark symbol ✓, ✶ is a six-pointed star ✶, and ➔ is a right arrow ➔. There are thousands of symbols to choose from. FileFormat.info has excellent pages listing Unicode characters. A sampling of bullets is shown below and at the end of this article.

To use a Unicode bullet symbol, add it within a <span> in each list item. Float the span left and give it a 2em width (to make bullet spacing uniform). Disable normal bullets with list-style: none; and set the line-height a bit taller than the bullets or the floats will stair-step the bullet list.

You can also use CSS 2.0 content insertion to add bullets. Add an empty <span> for each list item, float it left and give it a 2em width. Give each bullet type its own class and use a CSS :before selector and a content value to insert the bullet symbol. Use \0000 in CSS to select a Unicode character. This will work in current Safari, Opera, and Firefox browsers, but not Internet Explorer 7 and earlier. In older browsers, and IE, the bullets won't be shown.

Alternatively, use a bit of Javascript to scan the DOM and insert bullets for <span> tags with specific class names. Use \u0000 in Javascript to select a Unicode symbol character. Of course, if the visitor's browser doesn't have Javascript enabled, the bullets won't show up. But according to browser statistics, 94% of web visitors now enable Javascript.

Comparisons

Comparing features

Standard bullets and image bullets work in all web browsers on all platforms. Unicode works in all modern browsers, but no browser supports all of Unicode's 100,000+ characters yet. Most browsers support all of the "dingbats" and other common symbols that make interesting bullets.

The standard bullets method is, well, standard. It's what all HTML authoring tools know how to do. The other methods require hand-coding.

Custom image bullets are obviously the most flexible. Graphic designers can create anything they like. But for simpler bullets, the Unicode approach gets thousands of bullet symbols cheaply without any images.

Image bullets can use multiple colors, but standard and Unicode bullets have a single color. Standard bullets take on the color of the list text. Unicode bullet colors are set by CSS and can differ from the list text. Image bullet colors are set once in the image, so if you need multiple bullets of different colors, you need multiple bullet images.

Image bullet sizes are fixed when the images are created. Standard bullet sizes match that of the list text. Unicode bullet sizes are set in CSS and can be larger or smaller than the neighboring text.

Since standard bullets and Unicode bullets are symbol characters in a font, they scale up and down smoothly. They are all anti-aliased and are crisp at any size. Image bullets, however, don't scale, and won't print as crisply.

Comparing sizes

The table below summarizes the size of a list with one bullet for each method. Image bullets add an image, of course, plus about 250 bytes for a HTTP response header sent by the web server along with the image file. Not surprisingly, image bullets have a bigger total size. But a few hundred bytes is too little to worry about.

Comparing load times

To load a web page, the browser asks for the page's files, waits for a response, then reads their bytes off the network. Network latency increases the wait time, while low bandwidth increases the read time. The ideal network has zero latency and infinite bandwidth. In the real world, latencies are about 1/10th of a second between a US home and a US web site. Overseas visitors to the same site may see 1/5th of a second in latency, and a cell phone may pause for 1/2 second or more. Bandwidths vary from about 500 kilobytes/second for a US home, down to just 30 kilobytes/second for a cell phone.

The table below uses these numbers to estimate the load time impact of a list with just one bullet.

Since the number of bytes for each method is tiny, the time spent reading them is trivial. It's the latency part of the load time that matters here, not the download time.

Custom image bullets require an external image file, while the other methods do not. The time spent waiting for the network to deliver that file is 100 times longer than it takes to read the file's bytes. If the page has lots of custom bullet images, this can have a noticable impact on the total page load time. Because Unicode bullets do not have external files to load, they have no latency delays. This makes them hundreds of times faster than image bullets.

These load times are just estimates. The real world is more complicated. Bandwidths and latencies vary from moment to moment based upon network and web server load. The latency on a cell phone can vary from 1/2 second to 3 seconds or more, depending upon signal strength. Pipelining, keep alives, caches, and parallel downloads also affect the results.

Conclusions

For today's Internet connections, latency is a bigger problem than bandwidth. Latency-friendly design reduces page load times by reducing the number of files required by a page. Pages load faster and demand less of the visitor's network connection and the web site's server.

Unicode bullets are less flexible than image bullets. But there are still thousands of Unicode bullet symbols to choose from, the method is simple, it avoids latency costs to download bullet images, and it has faster page load times.

Clearly, the bullet images can be cached. But recent performance studies by Yahoo! found that visitors rarely arrive with your content already in their cache. Instead, they have to download it again on every visit. For that initial download, the Unicode bullets are much faster. For subsequent page loads, the methods are all about the same.

Appendix: Gallery of bullets

There are literally thousands of Unicode symbol characters that could be used as bullets. Here are a few:

Not all browsers or operating systems support all of these symbols. When a symbol isn't supported, a browser may show an empty box (Safari and Opera), a question mark (Firefox), or an incorrect character (Firefox). Currently, Safari has the best Unicode support, followed by Opera, Firefox, and Internet Explorer. Macs and Windows Vista have more complete Unicode fonts than Windows XP or Linux. But this improves with each new software update.

Further reading

• Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests. The first in a series of articles from Yahoo! about increasing web site performance. This one discusses the impact of making a large number of HTTP requests for individual files, and the latency cost they incur.
• Performance Research, Part 2: Browser Cache Usage - Exposed! The second in the Yahoo! series of web site performance. This article discusses the browser cache, and how little it actually helps.
• Latency-friendly bar charts using Unicode characters. Instead of using bar chart images, use a row of Unicode block characters to create bar charts that are faster to download and scale up or down with changes to the font size.
• Latency-friendly hierarchical menus using Unicode bullets and a bit of JavaScript. Use Unicode bullets as icons for open and closed states for nested menus, and a bit of JavaScript to toggle between bullets and show and hide the corresponding menu.