Speeding Up My Website - Hints & Tips

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.

The alt text for your blog logo says Chris.

The blog layout and the rest of the site layout is slightly different. The edges of the boxes don't line up when you switch between them.

Its hard to tell what are actually links.

It is possible that now you're using more PHP that it would be slower. If their webserver is slow or busy from other sites then you'll get a delay. I've got spotty internet at the moment and there is a pause or two but that might be something my side.

The site still seems very fast to me. I've cleared out my cache and done a reload. Pretty fast from here.

I was going to suggest using PHP with either passed parameters on the URL or (/and) custom ID tags on specific pages to delineate which section you're in and then change the navigation appropriately. You should be able to keep your nav in its own file which will help additionally with load times - because that file will get cached.

How the hell did you spot that? Now fixed



You are not supposed to notice that. I got someone else to do the blog template and it isn't 100% right, it's on the to do list somewhere.

It has been a very productive day at the end of it all. I think I may have sorted out the speed issues with my shop system, there was a .htaccess file in the thumbnail directory that shouldn't have been there, removing that has improved the page load times considerably.

Also loads of little bugs sorted (cheers fellas) along with some cool php lessons learned. I am using this bit of code to help the menu system know what to highlight...



Seems to work pretty well grabbing the file name, the rest is pretty crude but at least it works

Cheers

Cris.

On snow leopard / FF 3.5.7

Here is a snap of what I'm seeing. This was loading/rendering slowly enough that some text was initially showing large and blue. I was able to hit <esc> and do a screen grab.

The blue text did not show with Safari

Now that is very interesting, I've just cleared my FF cache and I get the same thing.

The text is the alt tag from the images not yet loaded, so I wonder if I some kind of formatting error. Now the page is cached again I'm not seeing the problem when I go back.

I can't remember the site doing this before I made all the changes yesterday, so I can only assume I've broken something, or the server is being a bit slow in presenting the images and FF initially thinks they are missing.

Hmmmm, wonder what to do?

Cheers

Cris.

By the way, at least on Windows machines, holding down the CTRL key while pressing the Refresh key (F5) will force-reload the page from scratch while bypassing the cache. So that's a quick way to check page loads without needing to do all the clicking to empty the cache. Macs have a similar feature I'm sure, but I don't know which keys to press.

Woo Hoo

I have removed the text from the alt tags that was causing the problem, according to the standards there was no need to duplicate the information as I was doing in the title tag.

What the hell is the point anyway of having "standards" if each browser has a different translation of the rule book? Corr Blimey Govnaa!

Cheers

Cris.

- "About" page produced an error when I first clicked - normal layout but it said something like "Sorry an error has occured", presumably a server error?

- Page vertical alignment now fine, but the main "/" front page is broken. I *think* you have an index.php and another older version of the front page (index.html?) which needs to be deleted to make the php version the default.

- On the packages page where it says "Mini Website - An exclusive website to share with your guests, example here" the "here" is the same colour as the background making it invisible.

- As mentioned make all the links a slightly different colour

- On the FAQ page(s) perhaps indent the FAQ/Contract links to make the more obvious too - I like to use a mini PDF icon like a bullet point to make it obvious that it's a separate document.

- Contact page - make your email address a mailto:link

- Overall perhaps slighly increase the leading (CSS line-height should do it), because the text is larger than normal it feels a bit "crowded".

Looks great Cris! Though I think the contrast change now highlights the need for a different font on those text-heavy pages even more. That text just doesn't seem as delicate as the feel of the rest of the site.

Hmm, I'm clicking around the site, and it does seem to take a while to load. Each time, it's not like it's taking a long time on each element, but like there's some initial hurdle it's trying to get over before the page loads, and then everything loads in an instant.

Clicking the logo brings up an error page. You said you are changing the logo anyway but I still had to point it out

It was loading slowly and I saw the alt text before it changed into an image.

You've taken out the meta keyword, description and author lines from the HTML? The validator complained about some of those lines but that was because you had NAME= instead of name= and I think because you didn't have <meta blahblahblah /> in there but I can't remember...

You've got 2 CSS files and 1 piece of CSS inline?

WAI Accessibility test

I like it - and I don't have any speed/performance comments. Just a wee grammar one. In this sentence on the About page, you should remove the first 'a':

My aim is simple, to produce a unique, creative and contemporary images of outstanding quality that will become a precious memory for many years to come.

Cheers

Rory

Thanks again guys, I have corrected most of the mistakes pointed out I think.

It's even slower with the php, I got told "that's just the way it is". I guess when it's time I'll be moving hosts.

Next week I'll be adding a few extra options and stuff, hopefully then all that background work will pay off.

Cheers

Cris.

PHP is interpreted on the server, so it's going to add a small penalty, depending on how much processing you do before you start to serve HTML. It's usually negligible however, and I would never think to myself or say to you "this site is slow."

You can affect the perceived speed by moving the logic around within the PHP as necessary/suitable and trying to output some HTML as early as possible.

On the About page you have a hyperlink to your Contact page in the email. It links to contact.html which doesn't exist. I believe you want contact.php which can be reached from the menu.

Now my ADSL is shoddy at the best of times, but it took nearly 20 seconds to load your Blog page. I also can't read your contact details at the bottom of the site, they're too small and too pale against the background.

But other than that, it's great!

Oh my god, if people in this thread hadn't pointed it out, I don't think I would have even noticed that your contact info was down there. That is really hard to see.

I wasn't going to mention it before, but this has happened to me twice now today. When I initially go to your site, the main content is way out of place. The two main boxes have ended up on the very top of the browser instead of in the middle, and this last time they were even moved to the left. When this happens I'm able to navigate, but the boxes never move. However, a simple page refresh fixes everything. Perhaps it's just my system/browser/add-ons, though.

Yep, 22 seconds here, averaging around 448 KBytes/sec over our 5-6 mb/sec link.

BIG page.

And what's that very faint scribbling at the bottom of the pages??

Oh.. that must be the contact info noted by others above.. sure enough, a little tweaking in an image editor, and there's definitely some micro-text there!

A few Firefox tools that'll help you out:

• Firebug both of the add-ons below require this
• Google Page Speed
• Yahoo! YSlow

Ctrl+Shift+R does it for FF in windows

Command+Shift+R for FF in Mac OSX

This is a design decision.

There has to be something there for the page to balance out, but if it's any heavier it becomes a distraction. We put in a contact page with all those details repeated for people to actually read.

I'm not very good at design and layout, so I asked someone to help me out. The greys are supposed to be low contrast to make sure that the focus is on the pictures, after all that is what is most important on the site.

Cheers

Cris.

Now that is really useful stuff. The Google one especially is making some really good suggestions. Thanks

Cheers

Cris.

Not sure how it compares with Page Speed, but Google Speed Tracer looks to be a very powerful optimisation tool for Chrome.

Needs fixing. Especially if you want your "hidden copyright notice" there to be legally valid.

Cheers

If you're not supposed to be able to read it, it should be removed completely. If you are supposed to be able to read it, it needs to be higher contrast or it's working as the reverse of what you intended. It becomes distracting because you can see that there's something there but you don't know what it is exactly.

I'm not suggesting putting it in black, but you should definitely darken up the text so someone can easily grab your phone number from it.

If it's not there to be read, but for stylistic balance, then how about replacing the text, with a flourish of some kind.