Tips to speed up website loading time. pls help

Ive just completed a website and it take along time to load a page after i publish it .i sliced and converted most of the images from Adobe Fireworks

and save them and png, the file size for the home page is over 800mb is this too high . pls can some one help as im new to the site and sort of new to webdesign
thank u Nicky

Hi nicky. Welcome to the forums. :slight_smile:

:eek: :eek: :eek: :eek:

Yes, that’s about 10000 times bigger than it should be—seriously.

One thing you need to do with images is use the Save for Web feature, which strips out all of the unnecessary data. You should be able to get the images to well under 100kb each. Also, be careful not to use more images than necessary. The word “slice” is kind of out of date, in my opinion, as you mostly shouldn’t need to slice images at all with modern CSS.

Thank you Ralph .m .is there a way on fireworks I can convert.the images.and also shall I convert to jpg?

I don’t use Fireworks, but yes, it does have a Save for Web option, and you can choose any format—jpg, gif, png etc. I usually choose whicherver version turns out smaller. :slight_smile:

I used to do that but now make a special point of saving all web images as JPGs. The reason is that the PHP thumbnail software I use reduces the dimensions of a PNG but the file size is huge compared to an equivalent JPG formatted imagel.

Yeah, usually pngs are bigger, but only by a little bit in Ps/Fw. So I tend to use them only if I need a crisper image or transparancy. I alwasy like to check the versions, just to see what’s available.

Biggest web page ever!

It might sound obvious but are you sizing the images to be the right size? Usually when I come across vast pages they have images 3000px wide for 100px thumbnails, all they need to do is size the images properly and the file size comes right down.

Talk about big. That is one big image. I usually go for smaller types but are easy on the eyes. Sometimes average sizes are best for a website.

Greetings, here’s a few tips:

If you have linear gradients in your background, try slicing an image 1px wide (if vertical) or high (if horizontal), and use with CSS background repeat property. This can dramatically reduce the size of images for the background. There’s another way to do it without images in CSS3, but some old browsers won’t support it.

Put as much text as possible in the HTML as text instead of image. This would probably save you lots of megabytes. You can format it with CSS also.

If you have a large image that really has to be left as an image, try saving it as JPG (lower the quality if possible to get an optimal file size) and turn Progressive on. If it’s still too large, slice it into smaller images so they could load separately, but in most cases this is unnecessary.

Hope this helps. :slight_smile:
Cheers!

I used PunyPNG website - it’s quite good for this task

I am still guessing that most of your content has not been sliced and coded properly and you are using large PNG slices. Quite difficult to get a page size that huge upon slicing.

But the only older browsers that are still in use are all versions of Internet Explorer which have their own proprietary way of creating linear gradients and so if you use IE conditional comments you can create linear gradients in all modern browser without needing any images at all.

Try to turn on gzip compression on your webserver. Also nginx with LAMP most likely will improve speed of website loading.

yes used gzip compression, the use page cache for your website…I’ve write in brief on this here if you want to read.

Next thing is, separate image file with high size in different location. I always use 3rd party storage provider to store images, then place the link to the images on your website. This means you will have just a lines of code to refer to the image instead of store the image with you main website.

Next, use css, separate widget or javascript content

You can test your website performance here, I always test using this site SEO site Checkup

it’s great to use gzip, etc for compressing a site down, but before any of that ensure the site is optimised as much as possible first.

for images follow this general rule of thumb:

JPG: photos or images containing gradients
GIF: images of flat colour
PNG images of flat colour or image containing transparency

using PNGs throughout isn’t recommended - they are great for images containing only flat colour but as soon as you have a gradient or blend of colours the file size goes through the roof.

if you post a link to the site, it will help people see specifically where you’re going wrong to offer better advice.

After you’ve fixed your image problem - put all JS in one file at the bottom of your website - and cache and gzip your site via htaccess http://www.visibilityinherit.com/code/yslow-&-google-page-speed-htaccess-code-how-to-speed-up-your-website.php

My site doesn’t even load. It just pops open all at once

if you want to make your website quickly accessible try not much showing on the home page, try setting it on the homepage only a few are displayed.