I launched my websites just days ago... It has recently been VERY slow. Could it be the graphics? the link is: http://britobmarketing.com The onMouseOver effects just take too long to occur. The background also takes a while to load. it is all just slow... does someone know why may this be happening?
Thank you very much!
-Brito.
Absolutely, You have 2 images that are over 1.5meg each! that is huge for the web.
You MUST reduce the size of plainbgndwall.jpg and bgndwall.jpg below at least 250kb each.
Yes, images are like any other computer resource. They take up memory, and they take up CPU processing cycles to render them. The larger the resource, the larger memory use, and the more CPU cycles it takes to render.
I suggest you make low quality, compressed versions of the images. Some imaging tools, like Adobe Fireworks (no advertising, it's just the one I use) have options to compress images without significant detail degradation. You can also reduce or remove unused colors also.
Also, it's not the main cause of all slow effects. DOM manipulation and bad code can also affect performance.
I have checked your page browsing time in a web based load test and it took about 11 seconds to load the page, not a great experience. Here are the results:
In above screen you can see the most of the time taken is by images so u can understand where u need to work. You can also run similar test by yourself at link below by entering your URL, you will learn lot more about what is happening while your page is loading:
http://www.uptrends.com/aspx/free-html-site-page-load-check-tool.aspx
Those images are huge. Asking your user to download 4+MB on page load and then animating over it is really going to slow down any site. Reduce the size of the images and you will see increased performance.
I always try to get my images as close to or below 100KB to make the page load faster. And if I have more than 500KB of images to display I will defer the loading of them as the user navigates.
This will help:
The browser only loads the mouseover images when they are first needed. Once the browser has cached them, the swap animation seems much faster. You can force the images to be loaded immediately e.g. by putting them into hidden <img> tags.
That said, requiring so many large images for such a minor cosmetic effect is kinda bad. People with slow connections will likely have a bad user experience.
new Image() and then imgArr[index].src = correlating source string;. When you want the image, you just fetch the image from the image array. document.getElementById("myImageTag").src = imgArr[imageIndex].src;. This will allow for the image to be stored in imgArr one time, and then accessed instantly at any point in the future.