PDA

View Full Version : pages load sloooooow


zofiaphoto
08-04-2006, 02:26 AM
I've searched this, but it's such a broad question...

My website, http://www.zofiaphoto.com has many photographs and thumbnails on it, since it's a photography website. I created the pages using rollover layers. Each individual photo is tiny between 20-60kb, and the thumbnails are only 4kb each.

My pages take way too long to load. I use a high speed connection and a G4 processor, so I can only image how slow this must be on dial up.

This is the first and only site I've ever designed, it's also my own. I know squat about html and only a little more about computers. I read Dreamweaver 8 for Dummies, and went for it.

Any suggestions?

edbr
08-04-2006, 02:45 AM
I think only because of the number of images on the page actualy some images are loading quite fast but you only see them if you "mouseover". the thumbnails are loading last it seems.

Like the clean look of your site BTW

zofiaphoto
08-04-2006, 03:07 AM
Even on my index page and the others with only one picture each, the image also loads slow....

edbr
08-04-2006, 08:06 AM
The index page seemed Ok to me.
Can you optimxe your images more?

d a v e
08-04-2006, 08:36 AM
it's fine for me, though not lightening fast - and your pictures seem fairly well optimised, though on one or two pages your thumbnails were around 4k when they could easily be 1.5-2k.

although ideally you shuold aim for around a total page weight of 50k for a photography site i think what you have is fine: modem users would imo be prepared to wait long enough because of the type of site.

btw, don't forget to title your web pages something shows up if people bookmark a page and also you don't have any alt attributes on your images: so something like

thumbnails/sankatyhead.jpg

dthomsen8
08-04-2006, 05:50 PM
Your site looks really fine, but it is a bit slow to load, even on a fast cable connection.

One idea is to consider the <style> specifications for each web page, with the objective of putting all styles in common into an external style sheet. The external style sheet is loaded by the browser only once, so after the home page loads with the common style sheet, the browser refers to it for each of the linked pages, speeding up those linked pages somewhat.

As another forum member suggested, you want a descriptive title on every page. This is good for bookmarking, but also for search engine optimization.

Your meta tags on the home page are repetitive. Search engines in general do not use this information any more, so the only time these lines are read is by the odd human reader who examines your source HTML. Reduce the size of your pages by reducing this unused HTML.

You also want an alt and a title for each image, for the accessibility and information for other users.

zofiaphoto
08-04-2006, 08:01 PM
Ok, I added the alt's to each image. I took out the meta tags. I can't see how I can make the size of each thumbnail even smaller. They are currently 50x50 and 4k, what can I do to make them smaller?

I'm not sure what you all mean by "titles" for each page... Do you mean instead of "Tradition", I should write something like "Gallery of the Tradition of Weddings", (but better)?

Yes, I do need to optimize my photos. They are mostly bad scans, and I've got a new scanner now. No time or organization to do it, but I do have the equipment!

My screen is only a 14 inch, and it looks ok here. I saw my site on a BIG screen monitor and it looked gross. How can I keep the photo size digitally small, yet make it look ok?

I haven't yet synchronized these changes to the web, still working on them.

Oh, I wish I knew how to create a style sheet! Back to researching...

Thanks for everyone's help! Zofia.

dreamlynx
08-05-2006, 01:34 AM
use png that will load quicker. the file size is much smaller and would load quicker.

dthomsen8
08-05-2006, 01:47 AM
I'm not sure what you all mean by "titles" for each page... Do you mean instead of "Tradition", I should write something like "Gallery of the Tradition of Weddings", (but better)?
Zofia.

Titles go on each web page. After making sure I did a refresh, it seems to me that you have a good title on each page.

Titles also go on images, part of what makes for good information for both accessible requirements users and other users. For example:


images/stock01.jpg</td>

is an example from www.philadelphiacurves.com home page.

These changes, and the alt you also added, don't do much for improving the speed of loading. I am amazed that the photos we see online were all done with film printed on paper, and then scanned into the images on the web site. I have a 19" LCD monitor, and they don't look bad to me. Your experience apparently was different from mine.

I am not an expert on photograpy for the web, but most web images were taken with digital cameras, and edited with Paint Shop Pro or Photoshop. Exports from those tools can make the same image smaller with higher compression settings. I find that starting with very large images and resizing them radically produces poor results. Starting with a 5Mb image and reducing it down to 240x180 size for a real estate web site does not work very well.

Perhaps you would get better advice in other places than the general Dreamweaver part of this forum, though.

d a v e
08-05-2006, 06:28 AM
re: css take all the styles out of the pages and consolidate them in one external stylesheet and link to that stylesheet from each page
see http://www.w3schools.com/css/default.asp

and you need to specify more than one font in your font family if you don't have Lucida Calligraphy installed -you end up with the browser default which for most people is Times Ner Roman ;)

use something like (and refer to http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html)
font-family: "Lucida Calligraphy", Verdana, Geneva, Arial, Helvetica, sans-serif;
then the user's browser will work its way down that list til it gets to a font installed on the system


"use png that will load quicker. the file size is much smaller and would load quicker." DreamLynx: sorry but that simply isn't true for photographic images. at all ;)

i don't think the image sizes themselves are the main culprit, though some could be compressed more, it's just that the page preloads all the larger photos that are hidden and then revealed when the user mouses over the thumbnails.
of course compresssing the images more would help reduce the load on the page: *what image editing software are you using and what compression settings?*

i still find this site quite acceptable for a photography site, maybe with the large images fine-tuned it will be even more acceptable to modem users

dreamlynx
08-05-2006, 07:23 AM
we use png in the 3D world all the time because it's small. If you know what your doing with a png the end result can be much smaller. no mater what you say slappy.

d a v e
08-05-2006, 07:59 AM
i do know what i'm doing with pngs and jpegs having worked in the 2d world for 10 years, but i would be interested - as would everyone else reading this thread - to see your example of photo saved as a jpeg and as a much smaller png of the same quality ;)

and with an avatar like that who are you calling slappy? :)

zofiaphoto
08-05-2006, 04:56 PM
Yes, I will save my pics as pngs and see if that helps. I'm using CS2 and my images are 420px at their largest width/height, with a 72dpi. I've also tried style sheets for the links last night, and cleaned up previous styles and layers that don't belong. I'm even peeking at my HTML codes, which I've never done before. I'm getting there. I'll post back after I've finished what I can and we'll see if it's any better. Thank you guys and girls SO much for your help!!! Z

domedia
08-07-2006, 01:31 PM
If you know what your doing with a png the end result can be much smaller. no mater what you say slappy. Of course it *can* be better, but not always, like you imply yourself. :)

zofiaphoto
08-07-2006, 02:51 PM
Well I must not know what I'm doing with a PNG because no matter how I tried, the resulting file ended up WAY bigger than a JPEG. 600k compared to the original 100k! That's a big difference. If I used a smaller PNG, say 8 bit, it looked terrible.

zofiaphoto
08-07-2006, 02:58 PM
I fixed quite a bit of info, added alt tags to all my images, erased current type styles and replaced them with style sheets, replaced default background color with white, and added alternatives to my current text. But the biggest thing I did was erase unwanted layers in each document. Now it seems a bit faster.

http://www.zofiaphoto

Any better?

domedia
08-07-2006, 04:21 PM
I checked the website. Your file sizes are not bad, but your website loads *really* slow.
I checked some other websites that are on the same server that you're using, they're all slow... Your problem is not with your website, but with your host. You should look into switching hosting company, currently you're not getting a good deal, at all :|

d a v e
08-07-2006, 04:22 PM
trust me: the best format for quality:file size for a *photo* is jpeg, NOT png. using 8-bit png is the same as using gif, as you found out ;)

domedia
08-07-2006, 04:32 PM
trust me: the best format for quality:file size for a *photo* is jpeg, NOT png. using 8-bit png is the same as using gif, as you found out ;) Don't forget png24..
I've followed PNG for some time.. every now and then I run some tests to check how well photoshop exports PNG's. I get the same result every time; it depends on the graphic/photo you have.. sometimes the png file will be smaller than the gif/jpg, other times not. Since the web graphics I'm making are so different in nature, it's much easier for me to stick to the old 'jpg for photos and gif for everything else' rule :)

But again, the file sizes are not this website's real issue.

d a v e
08-07-2006, 04:37 PM
domedia - i was referring to png24 (and then went on to mention png8)
i'd be interested to see a *photo* saved as a png that is smaller than jpeg! unless of course you're using 100% (or almost) quality/ 'zero' compression for the jpeg so that file size ishardly reduced to match the lossless quality of png 24 and even then i would be surprised if it the jpeg was larger. any takers?