Could you give me five tips on how to make my web site load faster.
because i have designed my first ever site but forgotten about this major issue. hehhehehe my m8, whos on a 56k, said about 4 mins to load up the first page.
AS i said though its my first site, college project.
have a look here , if you dare, only fast connections need apply
2. Reduce number of images. Each image means a http request to the server.
3. Use plain text for navigation links instead of images. Use css (text?) rollovers instead of javascript image rollovers.
Eg: http://www.prism.gatech.edu/~gte207x...alternate.html
see the main tab links... the tab is a transparent gif. The color of tab that you see changing is not a new image... only the background color of <a> changes. Looks like javascript rollover but 6 tabs require only 1 image (266 bytes) and background: #ccc; (17 bytes * 6).
4. I prefer not to preload images. Always provide alt text for images. This is for acccessibility as well as to have text displayed to the visitor until the images get downloaded.
Experiment with changing .png files to .jpg or .gif
When saved correctly, PNG is always a better substitute than GIF.
However, Jertsy, I'm a little curious how you went about saving your images. I don't think I could make those images that large in file size (using the same format) if I tried.
Originally posted by jeffmott When saved correctly, PNG is always a better substitute than GIF.
However, Jertsy, I'm a little curious how you went about saving your images. I don't think I could make those images that large in file size (using the same format) if I tried.
Hi all
Thanks for your great help, its appreciated.
Well when saving images all i did was donwload the images from say google open them up with old Fireworks, crop them, and then just saved as, and then put them in my images folder.
PS: alt text. Do you just write what is on the link button...
The thing is, my buttons down the side have three layers, M over,M down and OnClick. I can take the Onclick layer away, I think. You see i made the buttons is Fireworks.
But you peeps are right my images are taking up some file size.
Right questions.
Would making the images files Thumbnails make them load quicker? Does the code have anything to do with the speed of the site, i mean invalid tags, bad indenting. I have been using edit plus to debug. I have noticed i have a lot of spacer gifs in my code ???? what are they.
Y do i have to learn everything, y cannot it be downloaded straight into my bald head
You see this is a project for the last stages of my course, Diploma in Computing, used to be a chef, so i still want it to look ok but load a little bit faster, so here's what i can do. Please correct me if wrong....
1) Make images thumbnails
2) Get rid of the OnClick layers of buttons.
3) Change images from JNP to Gif, JPG were applicable.
4) Check code for inconsistencies.
You could also apply some technology which we call DCL (Dynamic Content Loading). With this feature your site only loads new content, so there are no more new page refreshes.
We have released new interface technology which does that. It reduces the serverload up to 50 times (depending on a number of factors). This tech also 'remembers' which content has already been displayed, so it won't load again, but instead will be displayed instantly without connecting to the server.
Hi, I would say you also ad an preload images so that everythin appears on the same time cause it s terrible when you have an image every 4 sec...
with soemthing simple like that :
var yourimages=new Array()
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
yourimages[i]=new Image()
yourimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("put in here the src of your images","","")
Not sure if this already posted but ALWAYS make sure you save images exactly the size they will appear on your page. If you use a package like Dreamweaver or Fireworks to import and scale down an image, then you are being really inefficient because the browser has to download the large image and then scale it down.
What graphics application are you using to edit images first? Things like Photoshop and PS Pro have a feature which allows you to choose the amount of compression when saving, with a preview. That way you can choose the smallest file size without it reducing the quality. In fact Photoshop tends to work out the ratio and default to that compression anyway. If your college has Photoshop I recommend it.
Thanks for your reply, i have been using Fireworks and like you said I am scaling down images Doh. I have got a copy of photoshop & now a reason to use it.
Can I open the same images files, the ones on my site, with Photoshop the n save them again, in a smaller size.
Thanks for your help.
Originally posted by tobyw_1969
Good luck with the course.
Yes. Once you have edited the images, if you save them as the same name in the same folder, the web browser will just load the new images instead. A webpage doesn't have 'embedded' graphics - it just tells the browser where to find them, so if you change them outside Fireworks, the new image will be loaded into Internet Explorer or Netscape etc.
It's possible that when you open your document again in Fireworks the images will need to be sized again - it might get confusd because it's trying to scale down an image which is now a different size. If so, you will just need to set the width and height to the correct ones.
Its probably a good idea to make a copy of the images first off, just in case you decide you want to re-edit the original at any stage.
Photoshop has a feature called 'save for web' which you can use to optimise your images. I've never quite worked it out, but it seems to provide a number of different compression options in a preview window - you can just choose the one which is smallest and looks ok. Alternatively, if you choose normal save, it lets you slide a bar to change the compression, and it tells you the resulting file size, and shows the effect in the main window anyway - I find that easier cos you have more control.
One other point - when you scale down your image, make sure it's set to a resolution of 72dpi (dots per inch). The resolution is somewhere lower down the image->resize dialogue box. If you got it from the web it probably already is 72dpi, but if you use scanned images always make sure you stick to that resolution, which will keep the file size down. Monitors pretty well can't show higher resolution than 72dpi, so anything higher is just inefficient.
You could also apply some technology which we call DCL (Dynamic Content Loading). With this feature your site only loads new content, so there are no more new page refreshes.
We have released new interface technology, called Nebula , which does that. It reduces the serverload up to 50 times (depending on a number of factors). This tech also 'remembers' which content has already been displayed, so it won't load again, but instead will be displayed instantly without connecting to the server.
Using this technology will make your site inacessible to those with javascript disabled, javascript incapable browsers, spiders, etc.
Technology that relies on innerHTML property may not by compatible with future browsers since its not a part of the current DOM spec.
Bad idea with bad implementation.
Working web site is not the one that looks the same in a few graphical browsers, but the one that adequately delivers its content to any device accessing it.
Please do not use this forum for free advertisement, if you must you can target the general forum, A repeat of this can/will cause in banishment of your privileges to post on these forums.
Thanks
Here's a neat online tool for your website. If you run the check, there's an option for image sizes. You can then view each image in the site at different compression rates. Choose the best balance between quality and size, and save it in place of your old file.
I recommend you duplicate the folder your site is in, and make your changes in a new folder.
I agree with the css menus as well. Post back if you want the code.
dave
In a world without walls and fences - who needs Windows and Gates?! - Unknown Author
"And there's Bill Gates, the...most...famous...man in the...ah...Microsoft." -- A TV commentator for the 2000 Olympics.
5 tips on making my web site load faster.
Reply With Quote
Bookmarks