Posts Tagged ‘web browsing’

You forgot to include kitchensink.com

Tuesday, December 1st, 2009

Sometimes strange things catch my attention. As a web professional, sometimes web sites acting strangely catch my attention.  Over the last couple of days, two different sites did things that not only caught my attention, but completely blew my mind. And not in the good way.

One of the sites (which will remain nameless) is a tech blog I normally read via RSS, but I found myself actually reading from the site recently.  As I did, I noticed the status bar flickering, and the load progress bar not quite all the way to the end.  The page was obviously still loading, but it appeared that the page was complete.  As I scrolled down the page, I noticed that the blogroll used the favicon of each blog listed in a very long list.  Because I do not visit many of the sites on that blogroll (apparently), my browser had to go to each site and download the favicon for each blog. The good news about that is now that I’ve fully downloaded the page, I have all those favicons cached, and subsequent loads of that page should be snappy, but I have to wonder if there isn’t a better way to do that.

It could be possible to put all the favicons into a sprite image, and download the single image file and let the browser’s CSS do it’s magic.  However, there are (at least) two things wrong with doing that.  First, if the blog’s owner decides to change the favicon, the incorrect icon will appear in the blogroll until the sprite image is updated. Second, copying somebody else’s graphic handiwork onto your server is ethically shady. Ethically, the blog’s designer did the right thing and reference the favicon from each of the remote sites. Unfortunately, the ethical thing to do was not the speediest thing to do. In this case, the blog’s designer would have to ask the question “does including the favicon from each of these remote blogs add any value worth the hit in performance?”  In my mind, the answer would probably be no.too-many-includes

The first attention-grabbing site was a personal blog site.  The second, however, is a high-traffic tech news site (which will also remain unnamed). This site is big into embedding JavaScript or Flash from other sites on their page.  The reason I know this is because I use a Firefox extension called No Script that blocks all JavaScript and Flash content unless I have explicitly allow a given hostname.  The image to the right is the No Script status bar. Note the number of sites. That’s a lot. (An aside: The sites with the blue S icon are those that I have not allowed to load, and the sites with the red circle and slash through them are being allowed.) Many of the includes are for site tracking or commenting, but in my mind, there are way too many includes here.  All of these things take time to load.  This, too, would be another one of those situations where the site’s designer has to ask if the value added by all these includes is worth the extra time it takes to load the site.

This same site doesn’t come close to having well-formed HTML, either.  Below is the output of HTML Validator, showing not just a large number of errors, but several frames as well.  I had thought frames died in 1999. Apparently not.

too-many-errors

Blank your web browser to avoid distractions

Wednesday, September 16th, 2009

DistractedHave you ever had something urgent to do, fire up your web browser, then get totally sidetracked by something on your browser’s default home page? I do. Or, I should say, I did, and quite often.

For as long as I can remember, I’ve always had some sort of news portal as my start page. Back in the day, it was a Yahoo! page, and more recently it was a Google page personalized with several news and RSS feeds. It didn’t contain “fluff” like comics or a joke of the day; instead, it was local news headlines, finance stuff and a few tech RSS feeds. But often, too often, I would see a tantalizing headline or link that would divert my attention from the task at hand.

The worst type of distraction would be when I had a really good idea about how to fix a nagging defect or a way to make a page’s layout flow easier, only to forget what it was after getting five minutes deep into the latest breaking news story. Not only did I lose the five minutes I spent reading the story, I lost the incalculable amount of time it took to remember what it was I was thinking of earlier.

Then one day, just after a Firefox upgrade, it dawned on me: Get rid of the start page. After Firefox is updated, it shows a splash screen telling you about the update. Your normal start page is opened in another tab, but it was hidden by the splash. Since I wasn’t bombarded by Google’s personalized start page, I had no opportunity to lose focus. The answer was clear: don’t use Google’s personalized start page.

I then started thinking of a “proper” start page. Perhaps the home page for my site? No, a single out-of-place pixel would eventually start screaming at me to fix it, causing the same problems as the Google start page. I started thinking about posting a blank page to my site, and point to that, but that triggered something from my memory. Blank.

Both Firefox and IE have a special page called ‘about:blank’ that displays, as you might have guessed, a blank page. I set my home page to be about:blank, and now I’m greeted by a blank page that has no content whatsoever to steal my time. It doesn’t even hit a server.

The fact that about:blank doesn’t hit a server reveals a pleasant side-effect: starting the browser is now quicker. Granted, it’s not showing anything, and to get to where I want to go I have to select a bookmark, do a search or enter something in the address bar, which takes a bit more time. But it’s the page I want to see, and without distraction.

To set Firefox to open with a blank page, go to the Tools menu and select “Options…”. If it’s not already selected, click on the “Main” icon. In the dropdown labeled “When Firefox Starts”, select “Show a blank page”. Doing this allows you still set a certain page as your home page, allowing quick access by hitting Alt+Home.

The instructions are similar for IE. Select “Internet Options” from the Tools menu (or from the Control Panel), and click the ‘Use Blank’ button.