Monday, March 19, 2007

5 Ways to Speed Up Your Site

1) Reduce Overall Latency by Reducing HTTP Requests

Every HTTP request, or loading each item on your website, has an average round-trip latency of 0.2 seconds. So if your site is loading 20 items, regardless of whether they are stylesheets, images or scripts, that equates to 4 seconds in latency alone (on your average broadband connection). If you have a portion on your site with many images within it, such as your footer, you can reduce the number of HTTP requests with image maps. If you are using K2, you can get rid on one extra HTTP request by using one stylesheet, style.css, and no schemes (integrate what was in your scheme in the main stylesheet).

Don’t Rely on Other Sites!

If you have several components on your site loading from other websites, they are slowing you down. A bunch of HTTP requests from the same server is bad enough, but having HTTP requests from different servers has increased latency and can be critical to your site’s loading time if their server is down. For example, when the Yahoo! ads server was acting weird one day my site seemingly hesitated to load as it waited on the Yahoo! server before loading the rest of my content. Hence, I don’t run Yahoo! ads anymore. I don’t trust anyone else’s server and neither should you. The only thing on this site served on another is the FeedBurner counter.

2) Properly Save Your Images

One huge mistake people do is save their image in Photoshop the regular way. Photoshop has a “save for web” feature for a reason, use it. But that’s not enough. You must experiment with different settings and file formats. I’ve found that my header/footers fare well as either PNGs or GIFs. One major contributor to image size is the palette or number of colors used in the image. Gradients are pure evil when it comes to image size. Just changing the way my header text was formatted and replacing the gradient with a color overlay (or just reducing the opacity of the gradient) saved a few kilobytes. However, if you must keep your gradient you can experiment with the websnap feature which removes similar colors from the palette. But if you get carried away, it can make your image look horrible. Spend sometime in Photoshop, saving image for web with different settings. Once you have honed this skill, you can shave off many kilobytes throughout your site. Also, if you use the FeedBurner counter chicklet you can save roughly 2.1kB by opting to use the non-animated, static version.

3) Compression

Along with reducing HTTP requests comes decreasing the size of each request. We covered this case when it comes to images, but what about other aspects of the site? You can save a good deal of space by compressing the CSS, JS and PHP used on your site. Ordinarily compressing PHP wouldn’t do anything since it’s a server-side scripting language, but when it’s used to structure your site or blog, as it commonly is, compressing the PHP in the form of removing all whitespace can help out. If you run WordPress, you can save 20kB or more by enabling WP Admin » Options » Reading » WordPress should compress articles (gzip) if browsers ask for them. Keep in mind, however, that if you receive mass traffic one day you might want to disable that setting if your webhost gets easily ruffled with high CPU usage.

The problem with compressing any of your files is that it makes editing them a pain. That’s why I try to keep two versions of the same file, a compressed version and an uncompressed version. As for PHP compression, I generally go through the files by hand and remove any whitespace. When it comes to CSS, I usually do the same thing but have found CSS Tweak to be helpful when dealing with larger files. But do keep in mind that if you compress your main style.css for WordPress with default CSS Tweak settings, it will remove the comments at the top that setup the theme. Be sure to add that piece back after you’ve compressed it or WordPress won’t recognize your theme. When it comes to compressing JavaScript, this site has you covered. However, use the “crunch” feature as I’ve received weird results using “compress.”

4) Avoid JavaScript Where Possible

In addition to adding HTTP requests and size to the site, the execution of the JavaScript (depends on what it does) can slow your site. Things like Live Search, Live Comments, Live Archives are tied to large JS files that like to keep your readers’ browsers busy. The less the better.

5) Strip Extraneous PHP Calls

This step is probably only worth pursuing once you have completely exhausted the other tips. The K2 theme my site is vaguely based upon originally comes with support for many plugins and features, many of which I don’t use. By going through each file and removing the PHP calls for plugins I’m not using or features I don’t need, I can take some of the load off of the server. When it comes time to hit the frontpage of Digg or Slashdot, your server will more than thank you. Some aspects of this can be exemplified by hardcoding items where feasible. Things in code that don’t change in your installation such as the name of your blog or your feed or stylesheet location, can be hardcoded. In K2 these items rely on a WordPress PHP tag such as bloginfo. It’s hard to explain what sorts of things you can strip from your website’s PHP framework, but be on the lookout for things you don’t use on your site. For example, in the K2 comments file there is a PHP if else that looks to see if live comments are enabled and utilize them if so. Since I don’t use live comments, I can completely remove the if part and write it so that regular comments are always used.

Wednesday, March 14, 2007

Why HTML renders differently in different browsers

The fundamental reason why your site may look slightly different in various browsers.

Margins and Padding

One of the main causes for the many positional differences between layouts in various browsers is due to the default stylesheet each browser applies to give styling to certain elements. This usually involves setting default margins and padding to some elements to make them behave in a certain way.

For instance, paragraph (p) tags will have a margin applied to them so that each paragraph is separated by vertical white space and do not run into each other. The same applies to many other tags including heading tags (h1 etc). The problem occurs because the amount of margin (or padding) applied to these elements is not consistent across browsers. On many occasions Mozilla/Firefox will add a top margin to the element as well as a bottom margin. IE will however only add a bottom margin. If you were then to view these two browsers side by side you would see that the alignment would be different due to the top margin applied by Mozilla which could make your design not line up as expected.

In some designs this may not be a problem but in cases where position is important, such as aligning with other elements on the page, then the design may look bad or at least not as expected.

Here are some styles taken from the default Firefox 2.0 stylesheet (html.css) and immediately shows what is going on here:

  1. body {
  2. display: block;
  3. margin: 8px;
  4. }
  5. p, dl {
  6. display: block;
  7. margin: 1em 0;
  8. }
  9. h1 {
  10. display: block;
  11. font-size: 2em;
  12. font-weight: bold;
  13. margin: .67em 0;
  14. }
  15. h2 {
  16. display: block;
  17. font-size: 1.5em;
  18. font-weight: bold;
  19. margin: .83em 0;
  20. }
  21. h3 {
  22. display: block;
  23. font-size: 1.17em;
  24. font-weight: bold;
  25. margin: 1em 0;
  26. }
  27. h4 {
  28. display: block;
  29. font-weight: bold;
  30. margin: 1.33em 0;
  31. }
  32. h5 {
  33. display: block;
  34. font-size: 0.83em;
  35. font-weight: bold;
  36. margin: 1.67em 0;
  37. }
  38. h6 {
  39. display: block;
  40. font-size: 0.67em;
  41. font-weight: bold;
  42. margin: 2.33em 0;
  43. }

As you can clearly see there are various properties that have been set but the most important are the margins and padding as they vary considerably. If you were to look at the default IE stylesheet you would find that there would indeed be few styles that were the same as the above.

What Can Be Done

Since we can never be sure whether the browser's stylesheet has applied margin or padding to an element the only real option is to explicitly set the margins and padding ourselves. This way we can over-ride the default stylesheet so that we know exactly how each element will behave in each browser.

As we don't really know what elements have default styling applied to them (across all browsers) we must set the margin and padding for every element we use. In most cases we are just talking about block level elements -- you do not need to do this for inline elements such as em, strong, a, etc which seldom have any margin or padding applied to them. Although em and strong will have some styling already applied to them to give them their strong and emphasized look.

Here is how you can reset the padding and margin of block elements when you use them:

  1. html,body{margin:0;padding:0}
  2. p {margin:0 0 1em 0;padding:0}
  3. h1{margin:0 0 .7em 0;padding:0}
  4. form {margin:0;padding:0}

Take the body element for example, and notice that we have included the html element also, and then we have re-set padding and margins to zero. As explained above, various browsers will apply different amounts of margin to the body to give the default gap around the page. It is important to note that Opera does not use margins for the default body spacing but uses padding instead. Therefore we must always reset padding and margins to be 100% sure we are starting on an even footing.

If you did not reset the margins or padding and you simply defined something like this:

  1. body{margin:1em}

Then in Opera you would now have the default padding on the body plus the extra margin you just defined there by doubling the initial space around the body in error.

Also be wary of doing things like this:

  1. html,body {margin:0;padding:1em}

You have now defined 1em padding on the html element and 1em padding on the body element giving you 2em padding overall which probably was not what you intended.

Global White Space Reset

These days it is common to use the global reset technique which uses the universal selector (*) to reset all the padding and margins to zero in one fell swoop and save a lot of messing around with individual styles.


  1. * {margin:0;padding:0}

The universal selector (the asterisk *) matches any element at all and to turn all elements blue we could do something like this:

  1. * {color:blue}

(Of course they would only be blue as long as they have not been over-ridden by more specific styles later on in the stylesheet.)

The global reset is a neat little trick that saves you having to remember to reset every element you use and you can be sure that all browsers are now starting on even footing.

Lists need a special mention here as it is not often understood that the default space or the bullet in lists is simply provided via the default stylesheet in the provision of some left margin. Usually about 16px left margin is added by default to the UL to allow the bullet image to show; otherwise there is nowhere for it to go. As with the problems already mentioned we also need to cater for some browsers that don't use left margin but use left padding instead.

This can be quite a big issue if, for instance, you have not reset the default padding and margin to zero and try something like this.

  1. ul {padding:1em}

In browsers that have a default margin applied you will now get the default left margin of 16px (approx) and a default padding of 1em, giving you approximately twice the amount of space on the left side of the list. This would, of course, make the design look quite different in the various browsers and not something you would wish to do.

In essence the margin should have been reset to zero, either initially with the global reset, or by simply doing the following:

  1. ul {margin:0;padding:1em}

Now all browsers will display the same, but you will need to ensure that the 1em is still enough room for the bullet to show. I usually allow 16px left margin (or padding) as a rough guide and that seems to work well. (You can use either padding or margin for the default bullet space.)


However, as with all things that make life easier there is a price to be paid.

First of all, certain form elements are affected by this global reset and do not behave as per their normal defaults. The input button in Mozilla will lose its "depressed when clicked effect" and will not show any action when clicked other than submitting the form, of course. IE and Opera do not suffer from this problem and it is not really a major issue but any loss of visual clues can be a detriment to accessibility.

You may think that you can simply re-instate the margin and padding to regain the depressed effect in Mozilla but alas this is not so. Once you have removed the padding then that changes the elements behavior and it cannot be restored even by adding more padding.

There is also an issue with select/option drop down lists in Mozilla and Opera. You will find that using the global reset will take away the right padding/margin on the drop down list items and that they will be flush against the drop down arrow and look a little squashed. Again, we have problems in re-instating this padding/margin in a cross browser way.

You can't add padding to the select element because Mozilla will add the padding all around which includes the little drop down arrow that now suddenly becomes detached from its position and has a big white gap around it. You can, however, add padding right to the option element instead to give you some space and this looks fine in Mozilla but unfortunately doesn't work in Opera. Opera in fact needs the padding on the select element which as we already found out messes up Mozilla.

Here is an image showing the problems in Firefox and Opera:

Select element in Firefox and Opera

There is no easy fix -- it's something you have to live with if you use the global reset method.

If you do not have any forms in your site (unlikely) then you don't have to worry about these issues or you can simply choose to ignore them if you think your forms are still accessible and don't look too bad. This will vary depending on the complexity of your form design and is something you will need to design for yourself. If you are careful with the amount of padding you add then you can get away with a passable design that doesn't look too bad cross-browser.

Another perceived drawback, of which there has been a lot of discussion, is whether the global reset method could have speed implications on the browsers rendering of the page. As the universal selector applies to every single element on the page, including elements that don't really need it, it has been put forward that this could slow the browser down in cases where the html is very long and there are many nodes for the parser to travel.

While I agree with this logic and accept that this may be true I have yet to encounter an occasion where this has been an issue. Even if it were an issue I doubt very much that in the normal scheme of things it would even be noticeable but of course is still something to be aware of and to look out for.

The final drawback of using the global reset method is that it is like taking a hammer to your layout when a screwdriver would have been better. As I have noted above there is no need to reset things like em, b , i, a, strong etc anyway and perhaps it's just as easy to set the margins and padding as you go.

As an example of what I mean take this code.

  1. * {margin:0;padding:0}
  2. p,ol,ul,h1,h2,h3,h4,h5,h5,h6 {margin:0 0 1em 0}

I have negated the padding on all elements and then given a few defaults for the most popular elements that I am going to use. However, when coding the page, I get to the content section and decide I need some different margins so I define the following:

  1. #content p {margin-top:.5em}

So now I have a situation where I have addressed that element three times already. If I hadn't used the global reset or the default common styling as shown above then I could simply have said:

#content p {margin:.5em 0 1em 0;padding:0}

This way I have addressed the element only once and avoided all issues related to the global reset method. It is likely that you will apply alternate styling to all the elements that you use on the page anyway and therefore you simply need to remember to define the padding and margin as you go.

  1. form{width:300px;margin:0;padding;0}
  2. h1{color:red;background:white;margin:1em; padding:2px;}


The safest method is simply to define the margins and padding as you go because nine times out of ten you will be changing something on these elements and more than likely, it will involve the padding and margins. This saves duplication and also solves all the issue that the global reset may have.

The global reset is useful for beginners who don't understand that they need to control everything or who simply forget that elements like forms have a great big margin in IE but none in other browsers.

In the end it's a matter of choice and of consistency. Whatever method you use make sure you are consistent and logical and you won't go wrong. It is up to the designer to take control of the page and explicitly control every element that is used. Do not let the browser's defaults get in your way and be aware that elements can have different amounts of padding and margin as determined by the browser's own default stylesheet. It is your job to control this explicitly.

Thursday, March 8, 2007

The Top 100 Alternative Search Engine List The search engine that keeps on looking.
Ask Mobile Mobile search engine from
ASK VOX A second talking female user interface.
AnswerBus Ask in English, French, Spanish, German or Italian.
Blabline Podcast / videocast search engine
blinkx Video Search
boing Search the Mobile web Searches for posts related to your keywords.
ChaCha Human Guides are available to aid in your search.
ClipBlast! Video Search
Clusty Clustering search engine
collarity Behavioral personalized search / Collarity Compass
CONGOO Searches for Premium Content
crossEngine Searches Search Engines; formerly mrSAPO
d e c i p h o Behavioral personalized search / Social Meter
Ditto Visual search engine
Dogpile MetaSearch Engine
dumbfind Featuring the Two-Box search method.
exalead Web / Image search with a European flavor
factbites Search Result snippets are complete sentences.
fazzle Search engine that emphasizes Boolean Search
filangy Personalized Search Engine
FIND FORWARD Multi-featured search engine; check this one out!
FindSounds Search for sound effects and musical samples.
FyberSearch Parent site for some interesting new search engines.
GIGABLAST A multi-featured search engine.
girafa Visual search engine - results are thumbnails
gnod Oustanding recommendation search engines
gnosh Metasearch engine
GoLexa "COMPLETE page analysis for each result."
goshme Beta 3.0 A search engine for search engines. Top 10 pick.
GoYams Metasearch engine where you select the mix.
grokker A multi-featured meta-search engine.
GRUUVE Groovy music recommendation search engine.
hakia "Meaning based" search engine
ICEROCKET Blog search engine
ixquick Metasearch engine
KartOO Visually appealling clustering search engine
Lexxe Natural language processing (NLP) search engine
like Visual shopping engine; see also riya
liveplasma Attractive music / movies clustering / recommendation engine Search for local businesses, products, and services
lurpo Searches for custom Google search engines
mamma metasearch engine
MetaGlossary Searches for definitions, phrases and acronyms.
mnemomap Clustering search engine
Mojeek Customize your own personal search engine.
Mooter Clustering search engine
mrquery Metasearch engine / metasearch providers
MS. DEWEY Unique user interface - enough said.
Omgili Social community search engine
onkosh Arabic / English Search Engine
Pagebull Visual results search engine
pipl People search engine
PlanetSearch Metasearch engine
PolyMeta Metasearch and clustering search engine Metasearch engine
qksearch Multi-featured "3-in-1" multi-search engine
Quintura Clustering search engine with a new interface
Quintura for kids Search engine for kids by Quintura
RedZee Search Engine with nice preview results
retrievr Visual search engine
riya Visual search engine; see also Like
scirus Scientific information only search engine
searchbots Have a little fun, create your own searchbot.
SearchTheWeb2 Search The Popular Head and The Long Tail
sidekiq Multi-category search engine. Very nice.
Slideshow Displays search results as a moving slideshow.
Slifter A mobile shopping search engine.
soople A simplified version of Google's search options.
Speegle The speeglebot talks to you.
Sphere A blog search engine.
Sproose Social search engine
S R C H R Metasearch engine
SurfWax Meaning-based search engine
Swamii Search engine that keeps on searching for you.
Swoogle Semantic Web search engine Shopping search engine
Trexy Follow "trails" and "trailblazers" with Trexy.
turboscout Metasearch engine
TWERQ Multi-category search engine with tabbed results.
UJIKO A fun interface where you can vote on the results. "Search with many" community metasearch engine. Vote on the search results with emoticons.
WASALive A new member of the list.
Web 2.0 Web 2.0 search engines
WEBBRAIN Clustering "see the web" search engine.
whonu? Deluxe metasearch engine.
WIKIO "Live information from 33981 media and blogs"
Windows Live Mobile Windows Live Mobile search engine
WiseNut Clustering search engine
Yahoo! Mobile Yahoo! Mobile search engine
Yahoo! MINDSET Intention-driven search; commercial versus research
yoono People-rated community web search
yoople Yoople! = Yahoo! + Google + People
yubnub Use command lines to search the web.
ZABASEARCH People and Public Information Search Engine.
zapmeta Metasearch engine
Zippy Search engine for webmasters
ZUULA Multi-category, multi-search engine, with good tabs.