I have recently added a blog and a shop to my website www.crismatthews.com and despite it being on a load balanced host (fasthosts.co.uk) I think it's loading pretty slow for such a simple site.

It's becoming apparent now I have galleries in the shop with over 400 pictures, I know another photographer who hosts with 1and1 and their site loads really quick with the same software running.

Does anyone have any advice on how I can speed the site up? I have looked into dedicated servers but that seems a little extreme to me, or is it?

Any pointers, tips, help or advice is very much welcomed. Even if it's only to point out my shoddy HTML

Cheers

Cris.

It's your personal ISP, IMO. The site and image loading seems plenty fast to me on my connection from Canada.

Even your blog which has a shite-load of images comes up pretty quickly. I don't think a load balanced server is helping nor hindering you in this case, nor would a faster server allow visitors to see the images any faster.

The only thing to do to gain real speed is to further compress the images. To gain fake speed or the illusion of speed, you can also segment your pages and pre-cache images that will later be displayed (after displaying the one(s) for the current page obviously).

If you'd like, post the link to the other photographer and I'll let you know if his site seems any faster from here.

BTW, I quite like the site and images. You have some really great ones in fact.

Here are some general suggestions: I would increase the contrast on your contact information at the bottom of the page. It's quite hard to see against the white page background and you don't want to give anyone a reason not to ring you up. On your blog, remove the links from the photos unless you definitely have a larger image to display when clicked. And if you do, use a javascript image loader so that the image zooms into a floating frame and then can be closed by clicking.

The pages with mostly text need some work. I'm not a fan of the white on light grey background. I know the contrast is supposed to be fairly low, but it's too low, IMO. And Helvetica seems a little heavy at its current size/weight. I would toss in Helvetica Nueue in front of it in your CSS for a much lighter/cleaner look. It won't make a difference for every viewer, but it will for some. The contact form text and input boxes would do well with some styling to better match the feel of the rest of the site.

If you write your email address as plain text on the web page, even if it's not linked with a mailto: you're going to increase the amount of spam you receive. You may want to consider using an image instead which you can still link to your contact form and which will still be readable.

In your Package section, avoid the use of the word "here" when providing a link. Just link within the body of your sentence on the appropriate words.

Now the only issue is I can't seem to find the shop you mentioned. The pages with the most images are the blog entries.

One problem might be that on the front page (and others) I think the 10x images are being loaded simultaneously, meaning that the first image is slow to load because it's in parallel with the rest. If you can get it to load the others only when the first is complete that might help.

Another problem - in FF3.5 the whole site is vertically centred, so when the viewport is not tall enough the top and bottom fall off the screen. Not a huge problem but your name gets cut off.

WebSiteOptimization.com is pretty handy if you want some basic info about how much and what is being downloaded along with estimated times.

In this case, your entire main page is 1.3MB in size and will take nearly 5 minutes for somebody who is still stuck with the horrors of dialup. Even with a broadband connection, it will take between 5-10 seconds to load that page completely.

What Bruno said about your contact details. Its tiny and really hard to see.

Apart from that tho, it loads reasonably quick here. I'm not waiting around too long but I've got 4+Mbps ADSL.

Nice site however and the pictures look great!

No need to. The W3 Validator will do that for us.

Thanks guys, that has given me a couple of things to go and look at.

I can't find a better way to load the images on the front screen, I don't want to use flash and all the java I found does as the one I am using now. Any suggestions?

I don't want to reduce the quality of the images anymore, as high quality images are what my business should be about.

It's mainly the speed of the blog and the shop (demo password - demo) if you go look at Lawson Photography's Blog you may get an idea of what I am on about, it loads super super fast for me. My blog on the other hand is taking a few seconds after you click on it to do anything it all.

I hate that W3 Validator, 54 errors, god damm!!!!!

Cheers

Cris.

Oooh, really? I can't stand those things. And they break (at least) the forward and back buttons, plus open-in-new-tab and open-in-new-window. Is there some upside to them, then?

Peter

The "thumbnails" that appear inline in your blog posts are the same as if you clicked that image. Might as well take out the click part.

The other photographers blog is similar size to your blog. They've got 3MB and you're slightly over 3MB. They've got a couple Flash video containers near the top though so you might not notice the pictures loading as much since they're further down?

Everything loads appropriately quickly for me, considering that it's using large images. The important thing is that the general layout loads up quickly and the images come in later.

FANTASTIC photography work, by the way. Really impressive.

The majority of them appear to be because its gotten confused since you've not closed some of the tags properly like img. It should be <img blahblahblah /> instead of <img blahblahblah> if you're aiming for XHTML 1.0 compliance.

Oh and it should all be lowercase.

I can't stand some of them either. But the good ones don't have the issue of messing up navigation in the browser and will work very effectively for this type of site. Only useful if clicking should enlarge the image. Otherwise, as I mentioned early on, there's no point to clicking on the images and their links should be removed. That will save a bunch of HTML/text.

Take a look at http://panic.com

I don't have any specific tips, but Safari does have some handy debug tools built in to show how long things take to load, and what amount of time is spent on each element. Under Advanced Preferences in Safari, turn on the Develop menu. Attached is the breakdown I get, sitting on a 40mbit connection at work.

I can't make any specific suggestions about which js package(s) to use, except for what we've said should happen, which is that the first image should display immediately with subsequent ones being cached in the background. I don't think you have a big issue on your site's main page though.



Absolutely. However, if speed is important to you, spend some type optimizing the images with the Save For Web feature in Photoshop or other similar tools to see how much quality you can keep while trying to squeeze the file size. You might save a few K here and there which may help people with slower connections. Just balance the time you take on this with what you perceive to be the payback.

I don't think you have anything to worry about with regards to the speed of your site in relation to the other you linked. I don't think the other site loaded appreciably faster on my internet connection. I'll also say that the other site puzzled me with the amount of grain in the majority of the images displayed. Maybe puzzled isn't strong enough a word though. It put me off. So did all the Flash content. And music when you go to the main page. Fail. Not to mention the blog isn't integrated with the rest of the site. Meh.

One thing you may be concerned about with regards to speed however is where your potential clients are coming from. I suppose it doesn't really matter if the site loads quickly for me here in Canada when all your clients will be accessing it from the same ISP you're checking from. And potentially seeing whatever you're evaluating as slowness. If you have the opportunity you may consider copying your site to a different host and running some benchmarks.

Wow even more to think about, thanks

I am working on 2 areas of the site also, I'm a bit behind the times when it comes to HTML so forgive me.

As it's already been pointed out if opened in a small browser window the logo at the top gets cut off. I am currently messing around in CSS trying to find a solution for that, but I can't find an answer on Google at the moment, is there a simple solution?

Also, the menu on the left is repeated throughout the site, I'd like to have that in a separate HTML file that is included in each page, so when I add menu options I don't have to go and add them to the other pages too. Although it would have to know what page it is on and keep the current page hi-lighted so maybe I am better off sticking to my current long winded method?

Thanks for the feedback on the Photos, always nice to hear good things. They are the results of a years hard work learning the trade (still learning!!!) and just about every penny I had in the bank

Cheers

Cris.

I don't really have anything to add to the optimization side of things, but I wanted to say you've got some great photos!

I (sort of) tried to get into that field, and I just don't think I have the personality for it.

I'd drop Helvetica altogether. It doesn't have the right feel for your site, which, since it's geared towards weddings, should have a more formal feel, and no grotesque font is going to give you that. I think a light serifed font, or if you feel like you need some weight, a humanist font, would work much better.

Also, not that anyone asked, you should probably improve the grammar and puctuation on the web site. And you misspelled "Mobile" in the contact information at the bottom.

Also, I'll point out that modern browsers can "embed" fonts in the web page, which would allow you to be rid of rendered images of text, yet still have your web site not seem generic.

The support for embedded fonts seem to be nearly as horrific as CSS in general. Hacks to work around broken browsers *cough*IE*cough* and stuff like that.

Use the force link, Luke Trevor.

Also, if you're not into … reading … there's an automatic @font-face generator.

Good point, and well spotted.

I am going to replace almost all off the graphics on the site next week, the girl I got to do them for me is useless and I don't like my logo anymore so that's going to change too.

On the font side, can anyone suggest a good standard font?

Cheers

Cris.

Oh I know theres that font generator tool and the page you linked to mentions how to get the exact syntax necessary. It is just another fuck up like CSS is all. I wouldn't be surprised if you have to come back to the font-face code and update it because <random other browser but most probably IE> is badly broken.

If you mean one you don't have to embed, there's this list of "web-safe" fonts.

If you want a general suggestion that you could embed, I was thinking of something like ITC Berkeley Oldstyle for the serifed font, or Laudatio for the humanist sans.

I don't have all that much to add, but I do have one issue:

When I click on "Weddings" I see a series of photos (very nice, BTW). But then when I click on "Portfolio" under the "Weddings" category, I'm getting the same images. That's a little confusing to me. It would make more sense if you did one of two things:

1) make the "portfolio" section something more interact-able, like a series of thumbnails the user can click on

2) the easy way, just make the word "portfolio" automatically bolded when the user clicks on "Weddings."

Right now they look like they should be two different pages, but they just show the same thing...unless I'm not seeing the site correctly...

And I agree about the text-only pages, that contrast is WAY too low. I couldn't read it and it hurt my eyes. I don't mind the white on gray, but a darker gray.

*edit*
Your main site loads pretty quickly for me, but the blog does have an initial delay where nothing happens, then loads really fast. Not sure why that is. And I have a 20Mbps connection.

Font choice is a very subtle and touchy subject, and is entirely subjective. Personally, I think the site looks great with a san-serif font like Helvetica. I don't think it's a bad font at all. I only bring this up to make the point that fonts are a personal and stylistic choice, and that opinions will vary.

Outside of the subjective part of the font choice, one possible logical argument *for* Helvetica could be: The photographs on a photographer's web site should be garnering all the attention, and that the font should be as plain and as neutral as possible, as another way to deliberately draw attention to the images and away from the text.

To be clear, I'm not talking about the Helvetica Ultra Light for the links on the left. That does look good, surprisingly. I'm talking about the text in, for example, the About page.

CSS support is fairly decent in most browsers now. Just not in one specific one that has large market share.

Citation: Acid3 results for major browsers here.

Any chance, perhaps, that the pages could use a higher contrast font/background? Grey on grey is difficult to read with old eyes, especially for small fonts on a hi-rez screen.

Cheers

All browsers support CSS. I wouldn't call it "decent" in any of them though. Some of that has to do with CSS itself not being decent enough though.

But yeah, IE is a total POS, with or without respect to CSS.

Ok, I have made some changes.

The site is now completely in php, I figured out a way to get the menu system doing what I want and it will make it easier to do the changes I have planned.

I also found a way to get the CSS to centre vertically properly (at least on the browsers I have here!)

I have darkened the background so the contrast is higher, I am also going to redo the tiny info at the bottom once I have picked a font scheme. For now I am trying something different, and once I am settled on something I will alter the blog template to match

Thanks for all the help on this, I love this place for stuff like this. If you spot anything else please let me know.

Cheers

Cris.

This is an area I am working on, when I first designed the site I didn't havea range of weddings covered, now I do there are plan afoot to improve this section.



Done



Also done



I am worried now that I have moved it all over to php that there is a delay before every page now, I may ring fasthosts in the morning to see what they say. It's only a slight delay but enough to be annoying to me at least.

Cheers

Cris.

Mmm yeah... It would be reasonable IF people kept up to date on browsers. IE6 is still used by a lot of people and IE6 has awful support for everything. As the article points out, the goal of passing the Acid3 test isn't something that IE8 was designed to do.